It's always worth keeping an eye on the Google Labs website, as that's where you get to find out about any potential new Google services. They might not all be particularly useful, but the latest edition is a service I've been waiting for for ages.
It's called Similar Images and simply allows you to search for images as normal, but when you get the results, you can select an item you like and ask for similar results. This is particularly useful for searches that are skewed by more popular results (e.g. when searching for 'wallpaper' (as in the stuff you paste on your wall), most results will be computer wallpaper images and therefor not quite what you were looking for).
Google Labs - Similar Images
To show it's power, I'll show you an example that I used today for some design work. Often I need to send screenshots of development work to client and like to show what is being clicked on by adding the hand icon used in windows. However, when searching for this 'hand icon', you don't get very useful results:
Standard Image Results For "Hand Icon"
As you can see, not many of the results are what I was after. The fourth one is sort of right, but it's not quite the angle I was looking for. So I can click on the "similar images" link below it to be taken to a new results page:
Similar Image Results For Chosen Image
As you can see, I now have a number of choices that fit the bill and my image search is completed in two steps.
I'll be even more interested in this service if it allows you to import your image to search for similar images, as this would bring image recognition services to the masses - not long now, I imagine (and hope)!
I decided to tinker around with StreetView and make my own client, with a number of tools not available on the official site. I've developed a system that chooses a random location in the south of Edinburgh and allows you to explore it.
Although I made this a few weeks ago, it's taken me a while to write it up. I've testing out a new system for projects where some of the more technical details are hidden until you click to expand. Sorry for the delay, but hope it works!
The following code highlights a few excerpts from the StreetView client above, but certainly isn't comprehensive - for that, just check out the source code.
First off, you need to declare your variables:
var panoClient; var map; var panorama; var currentYaw = 180; var currentPitch = 0; var timer; var marker; var guyIcon; var mapCentre = "55, -3";
Next up, we need to create a basic StreetView client and panorama to display and parse the data [note the ¶ symbol shows an unintentional line break]:
panoClient = new GStreetviewClient(); panoClient.getNearestPanorama(mapCentre, showPanoData);
panorama = new GStreetviewPanorama ¶ (document.getElementById("pano"));
Then the panaroma div needs to be sent a location, yaw, pitch and zoom - in this case, the last three variables are given 'current' values so data can be gathered from the user's selection:
The ability for the client to smoothly rotate the map is gained from only two small functions, one to set the parameter changes and one to set the timer changes. These values can be tinkered with to change the speed and movement of the rotation.
function spiralslow() { currentYaw += 0.75; panorama.panTo({yaw:currentYaw, pitch:currentPitch}); }
function spinslow() { clearInterval(timer); timer = window.setInterval (spiralslow, 50); }
In order to stop the rotation at any point, a simple stop function is created that resets the timer to zero:
function stop() { clearInterval(timer); }
Finally, you can set up the marker icon to look like the little StreetView man used on the Google Maps site. Other sites may well have missed out the .shadow and .shadowSize lines, but without these the marker will be given an extra shadow - the PNG file for this marker has a shadow in it, so you need to set the default shadow to 0 to end up with it looking right:
guyIcon = new GIcon(G_DEFAULT_ICON); guyIcon.image = "http://maps.google.com/intl/en_us/¶ mapfiles/cb/man_arrow-0.png"; guyIcon.transparent = "http://maps.google.com/intl/¶ en_us/mapfiles/cb/man-pick.png"; guyIcon.shadow = "http://maps.google.com/intl/en_us/¶ mapfiles/cb/man-pick.png"; guyIcon.shadowSize = new GSize(0.0, 0.0); guyIcon.imageMap = [26,13, 30,14, 32,28, 27,28, 28,36,¶ 18,35, 18,27, 16,26, 16,20, 16,14, 19,13, 22,8]; guyIcon.iconSize = new GSize(49, 52); guyIcon.iconAnchor = new GPoint(25, 35); guyIcon.infoWindowAnchor = new GPoint(25, 5);
So that's some of the key functions in this StreetView client - take a look at the source code if you want to find out more. The above code presumes some knowledge about embedding Google Maps, but it's all relatively simple stuff that can be picked up in numerous online tutorials.
- The StreetView Icon doesn't show view direction - Each random view is calculated in JavaScript, within a bounding box - The Panorama function helps find the nearest StreetView
OK, so I was expecting something 'April-foolish' from Google but didn't expect it to be quite this subtle - I was thinking maybe a re-designed logo or an unusual search result, but it seems they've plumped for a Street View panda icon (that old chestnut!).
Maybe this is just in the UK (we've only just got Street View after all) but if you go to Google Maps drag the yellow man onto a blue street as normal, now he magically turns into a panda in the overview map:
I'm about to launch a new Street View service on this blog (next post) so watch out for that - in the mean time, you'll have to make do with some bamboo-fuelled goodness!
Showing and hiding table rows onClick can be a really useful feature for a webpage - it allows a small amount of data to be displayed on the page by default whilst the page can instantly be expanded by the user. This process can be repeated allowing each section of a webpage to be expanded with the user's discretion - see my About Page for an example of the system in action.
Sure, this can be a useful feature - but it's nice to jazz it up a bit with some image work. As you can see using the link above, one way is to have image rollovers on the clickable sections. This not only looks good, but alerts the user that the image has a function. So we need two sepearate JavaScript files to power this system - I'll link to them below.
So, firstly we need to link to these JavaScript files in the <head> of our HTML document:
Now in order to get the clickable sections looking nice, design images to use making sure they have a 1px border around the top and sides of the image. Design a rollover image in the same way, and make your clickable table row dimensions the same as these images (in the example at the bottom, I've used image dimensions of 400x34).
Once the images are saved, you need to set up the rollover behaviour, again putting the code in the <head> of our HTML document - The first term in quotes is an ID for the rollover (in this case, img1 and img2) and the next term in the location and name of the rollover image:
We now need to make a background image for the data cells of the table - it only needs to be 1px high and the width of your table (in this case, 400px). Make sure it has a one pixel border at each side (matching your image border) and a light background colour making up the rest of the image. You also need to make a 1px square GIF matching your border colour - this is used to make the bottom border line of your clickable images. In this way, we can guarantee there is always a 1px border around everything, whether it's being shown or hidden. In my example, the background image is called 'version_data.jpg' and the border file is called 'dark_line.gif'.
Now we have everything ready to go, we just need to code the table itself, calling up both out JavaScript classes. Set up a table as normal, making its width match that of your images. The set up the first clickable table row referencing the show/hide script:
<tr id="trOne" onClick="FuncShowHideOne()">
Then set up your table cell, referencing your clickable image and the rollover ID set up earlier, finishing by closing your table row:
Finally, you need to set up the row that can shown and hidden. In this example, the row will start off hidden, but to show it by default just remove the bit of style code:
So, that should be it. I admit it looks a bit complicated on here, but once you've mastered the system, it's really simple to replicate and gives great results. I've attached a ZIP file below with all the necessary scripts, files etc so you should be able to edit mine directly if you so wish - just open the index.html file and away you go! And just to finish off, here's the working version that all the code above was for:
I've posted a couple of times about things I've seen on the Strange Maps Blog (see: Old School GPS & Hoaxe Island and Pop vs Soda (USA)) and another post recently caught my eye. It's a decent blog, but occasionally things stand out - I'll try to add some context here too.
This time, it's a map of the world using typography to fill in the land area with the name of each country. It was created by Vlad Studio (a wallpaper design guy) and some countries were obviously considerably harder to work with than others. Firstly, some of them have awkward shapes, secondly, a lot of countries are way to small to fit readable type inside and thirdly, some countries names are way too long! It seems people didn't have such a task in mind when creating their states.
Looking at the image in detail (click to enlarge), It's fair to say any country smaller than Ireland has little chance of making the readability grade - leaving 111 countries out of the picture. As there are around 230 countries (too disputable to be 100% accurate!), this leaves only half the world's countries on the map - but I still love the look of it:
After seeing this, I thought it would be fun to find some other unusual maps - and not just modern designs but a few older maps that saw the world in a slightly different way.
First up, here's a map of the world with north at the bottom - and as space doesn't really have an up or a down, this map is just as accurate as any other - but it's strange how wrong it looks. Growing up in the UK, I also find it weird seeing maps that don't have GMT (and hence the UK) in the middle:
In fact, the first map of the world - The Fra Mauro Map of 1459 - used a similar system, although as was commonplace in the 15th century, a circular space was used rather than a more modern rectangular projection system. Fra Mauro was obviously a pretty impressive mapmaker though, as his map is not only beautiful, but he was described as "geographus incomparabilis":
Finally, here's a map that doesn't invert any display directions, but simply inverts land and sea - it's hard to imagine us all living on one massive chunk of land with a few huge lakes in the middle - but it might be fun:
So that's a little round up of some unusal maps - I'm sure there are plenty more examples out there and the Strange Maps blog is always a good place to start!
So, the title of this post may not be the most enlightening - but it's hard to sum up in 6 or 7 words! I was recently told about a web project called Ten Thousand Cents, that split an image of a $100 bill into 10,000 segments and got people to draw a copy of each segment before putting them back together to recreate a $100 bill.
The concept was pretty simple: using Amazon's Mechanical Turk system (where people are paid to perform basic tasks) and a customised drawing / animation tool, people were paid 1 cent for every segment they re-created and their efforts were "recorded" by the software so their brush strokes could be shown as an animation.
So what they ended up with was a drawing of a $100 bill that cost $100 to create. So far, so good:
You can see in the picture above that a video is playing showing the image segment (left) and the user-created replication (right). Look carefully and you can see a small red traingle showing which segment is being represented. All of the 10,000 segments can be selected and viewed in this way - and it's fair to say there is a variation in the quality of the user's work, as can be seen in the photos and animation below:
But put all this work together and you get a pretty glorious whole, with only the odd error being visible (mostly where the background was left white). The results of this project were put on display at Ars Electronica 2008 in Linz, Austria:
But this whole project had a bigger purpose than just that of a piece of art - the reproduced $100 bills were printed and sold for $100, with all proceeds going to the One Laptop per Child Foundation (OLPC). I had a brief look at the technology behind the project and other than Flash, a lot was done using a coding language I'd not heard of before, called Processing (1.0). It seems an interesting language, but I'll leave it to the creators to explain what it's for:
Their website is full of examples of its use and some of them are really interesting. I've touched on similar themes in this blog before (see: Dynamic Abstraction - Joshua Davis) and think there is a lot of room for mixing programming and graphic design - maybe Processing could fill the open-source gap created by the prominence and proprietary nature of Flash. I've shoved a screenshot of one of the Processing projects I found below - called Platonic Solids - but the site is a nice one, so feel free to find more interesting things for yourself!
As always, that was a bit of a journey but I hope there are a few useful things in there - a great project, a benefiting charity and an open source graphical programming language - now it's time to think of a snappier title! :)
When the famous old street Cowgate caught fire on 7 December 2000, it looked as though Edinburgh good lose a good chunk of its old town. Although the fire was controlled, there is now a sizable hole to the west of South Bridge and it hasn't seen much change since the fire. Big boards advertise the redevelopment, but this project seems to be little more than a website - but I thought it was worth checking out.
I have to admit I was disappointed with what seems to be on its way - I remember seeing some early plans of the redevelopment and being unsure, but was hoping things might have changed since then. One of the photo-realistic drawings they show barely even features the new building, so I've faded out the bits that are there already and what's left is a relatively standard looking stone facade - nothing to write home about really.
I was hoping the main development might cheer me up a bit, but the scene they paint seems so generic that I can't really get that enthusiastic. You can just imagine the cafe being a Starbucks or Costa Coffee - there somehow doesn't seem much room for anything fresh - although the developers have to make money so maybe that's just the way of the world. I just hope the good people of Edinburgh make the space their own!
There seems to be a trend in Edinburgh in recent years to build relatively uninteresting stone buildings, as if the one rule is "make it out of stone" (this is a good rule, but needs company!). First the parliament managed to choose a stone that was identical in appearance to concrete and then the old midlothian council site has been redeveloped with a really quite boring building - OK, the old one was worse, but that's no excuse not to make the new one brilliant.
I find architect's drawings quite inspiring, so maybe everything looks better at the planning stage - although I think there are hints of what's to come in the plans of the Cowgate work:
Maybe council planners will come to their senses soon - it's not a big catastrophe and Edinburgh has done well to keep such a large amount of its great buildings, but I just hope people realise that if they need replacing, the replacement should be great also! The site can be seen in the map below, and it pretty much looks exactly the same today:
Philip Print in London sell an interesting world map by Pierre Desceliers, 1550. It is designed to be placed on a table and read from both sides. Half of the map is inverted, and the other half is the right way round. 
