Streetview Stereographic

03.01.12 Max Novakovic

I came across an online demo called Streetview Stereographic and was inspired to create a short animation that 'drives' from Farringdon station past our office and to Smithfield Market. Streetview Stereographic uses WebGL and Stereographic projection on Google Street View images to create a novel effect that looks like what you are viewing is a mini planet.

As the project uses WebGL you will need a relatively new browser such as Chrome 15+ or Firefox 4+. Some interesting results:

I've seen some videos before that use Stereographic projection and thought it was a cool effect. Unfortunately, I can't remember where I saw any of them. I see lots of potential with this; the demo is open source so it could be adapted so that you can specify a route and automatically be walked you through the route in the same style as the video.

The video was made quite crudely by taking a screenshot of each frame and then stitching them together with FFmpeg.

Comments ( 2 ) + More
link to Twitter icon link to Permalink icon Permalink
#WebGL #animation #canvas #javascript
Stonehenge Stereographic

artraffi
2012-01-09   21:23

nice pics!! i just made a video of it in berlin--> http://www.youtube.com/watch?v=oGXYEqVFclg

orgicus
2012-01-16   20:26

That's pretty sweet ! Although not the same, reminds me of Keith Peters' Polar Distortion experiments ( http://www.bit-101.com/blog/?s=polar )...Simpsons did if first :P





Cross-domain getImageData API using Google App Engine

29.11.10 Max Novakovic

$.getImageData is a jQuery plug in that allows you to get an image from anywhere on the internet and use it as if it came from your domain. This should prove useful for anyone who has come across the cross-domain policy enforced by browsers on the Canvas tag. The service uses a Google App Engine project to fetch the image and return it as a JSON formatted data URL.

I created the plug in and service so that anyone wishing to take images from somewhere like Flickr or Google Image Search can do so without having to bother to create a proxy or fiddle with the server.

David DeSandro's Close Pixelate (Pictured first) uses the Google App Engine service to enable it's users to process images from other domains. Another novel use of the plug in is on Pete Goodman's website; when the Konami Code is pressed, the whole website turns black and white including any images from other domains. Read more about it here.

Some of the common error codes that come up when trying to get an image from another domain are;

In Firefox:

Security error" code: "1000

In Chrome:

Uncaught Error: SECURITY_ERR: DOM Exception 18

And in Safari:

SECURITY_ERR: DOM Exception 18: An attempt was made to break through the security policy of the user agent.

So, if you have ever come across one of these errors, then have a look at the documentation for $.getImageData which includes information on how to use the jQuery plug in and how to use the Google App Engine service using no javascript library. There are also two basic examples, one of which gets images from Flickr and analyses them to get their average colour (pictured second).

The complete code is also on GitHub which includes example code for the server in PHP and Python in case you want to implement your own version of the server side program.

Comments ( 0 ) + More
link to Twitter icon link to Permalink icon Permalink
#canvas #extensions #javascript #jquery
David Desandro's Close Pixelate used on the Disturb Logo Getting images from Flickr and getting the average colour from them