Google Sphere
May 28, 2009Mr.doob
- http://mrdoob.com
- Location:
- London, England
From the Author:
Once again your beloved searcher gets hijacked. This time forming a sphere.
Mouse over the page and type the term you're looking for on the search box. Hit return (or click on the search button if you find it). The more you search the more images about the term you'll get.
Now, if you want to get geeky...
During the development of my previous experiments I found out about the -webkit-transfom style that allowed us to rotate dom elements. This same style also allows us to scale elements.
If you have ever done anything with 3D you probably know that scaling is the only thing you need to give the illusion of 3D on a 2D surface. Porting my custom 3D engine from Actionscript 3 to Javascript was pretty easy and the only thing left to figure out was the z-sorting of div elements.
For the magic touch it just needed some smooth animations which is where jstween comes in.
Take a look at the code and feel free to play with it :)
Technology:
threedoob, jstween, google api
Comments
I will always use this from now on.
Reply to this commentI didn't know that JavaScript looked so much liked C++. Very cool app. It reminds me of something Tony Stark would use.
Reply to this comment傑克!這真是太神奇了呀!
Reply to this commentVery nice! 5/5
Reply to this commentwow, i think this is really a cool project.
if it would ever be used in chrome i would definietly have it
Reply to this commentThis would actually be a really useful image search tool if you got rid of the useless text that is floating around and gets in the way.
Reply to this commentA version of Google Sphere without the text floating around is at http://rolandoislas.t35.com/experiments/googlesphere/
Reply to this commentcool coolcool funny
Reply to this commentjustin bieber rules
Reply to this commentwhat's wrong with you? did you get brainwashed by a gay freak in a guy disguise?
Reply to this commentnice 1 spherical environment...good a new try out
Reply to this commentthis is like google image search
Reply to this commenti don't have chrome so what should i do so i can view this project
plz send me u r review
Reply to this commentAlso, if you could implement the google image swirl project so if you say clicked and held an image it would spawn more like it into the sphere, and remove others
Reply to this commentThat, i would like to see but chrome is essential. Look at the name of this site man. Also. USE PROPER GRAMMAR.
Reply to this commentAWESOME!!!
Reply to this commentI love that , is very weird but indeed that makes it fabulous
Reply to this commentperhaps it's just a copy of a microsoft ex-project "tafiti.com" ;)
Reply to this commentpwnalicious i did science home work using this
Reply to this commenti hate it that produce is a piece of shit
What the fuck ...
Reply to this commentit s cool
Reply to this commentI love this experiment!!!! They should have it as an add-on forever....
Reply to this commentthank's , but plz show the coding part.
Reply to this commentTry right clicking and then select "view source". Tada!
Reply to this commentAmazing... this design would be great for Wiki
Reply to this commentAce I think this has real potential its a great addition to Google's armoury good work guys! endless application for this in the visual industries push it out there!
Reply to this commenti think this is beauty of work so i coungrate to you work hard doing well and fight for fantastic feature
Reply to this commentsimpli amazing!!!
Reply to this commentwow... amazing
Reply to this commentThis is pimp yo
Reply to this commentThat's crazy cool!
Reply to this commentNice, thats crazy lookin
Reply to this commentBrilliant!
Really like looking for images using this, would like a button which jumps to the next page (or gets rid of the oldest lot of images) so you can use it more as a browser for images.
Reply to this commentThis is the best Google experiment ever! :)
Reply to this commentWow, that's really cool! Nice work Mr. doob!!
Reply to this commentVery Nice,
I was wondering how to change the code so when you have your mouse at the top of the Document, the Sphere will rotate vertically continuously, just like it does horizontally
Reply to this commentThat, although it sounds like a easy thing to do, it's quite complex, google for quaternions.
Reply to this commentits very nice...cool......
Reply to this commentd
Reply to this commentnice............huh.................gr8 job man
Reply to this commentcool job.congratz.
Reply to this commentthis should totally become the default for google images, or at least something along the lines of this, nice work
Reply to this commentpretty wicked(=
Reply to this commentOh WOW!!! I LOVE this!! This is so awesome!! I WANT IT!!! How does this get to be something real and permanent and not just an experiment?
Reply to this commentvery cool!
Reply to this commentRad! It works on iPhone too. Little slowly but works. Good job.
Reply to this commentI feel this might be more useful if only the search results floated in the sphere
Reply to this commentI liked it, but what is the point. What is wrong with regular Google image search?
Reply to this commentI like houses, but what is the point? What is wrong with living in caves?
I like cars, but what is the point? What is wrong with walking?
I like bacon, but what is the point? What is wrong with eating pigs raw?
I like flash videos, but what is the point? What is wrong with .gif?
I like toilets, but what is the point? What is wrong with pooping on a tree?
I like toilet paper, but what is the point? What is wrong with using your hands?
I like laptops, but what is the point? What is wrong with bringing your desktop everywhere?
I could go all month.
Reply to this comment"pooping on a tree" Has to be the greatest thing iv ever read
Reply to this commentO hya....
What is the Point in Launching a new Ultra advanced Browser Like GC
You Cant think Like that mate.
Knowledge and Creativity should be LimitLess and Purpose-less
Reply to this commentGREAT JOB. Quite impressive... I'd like to do my igoogle page like this ;)
I think this is great and it would be really good with touch screen... I'd like to see some of the muti touch screen gui on the browser. There are a few aps and add-ons that come close but Mr. Doob if you were to make that happen for me I would gladly follow.
Reply to this commentI'm trying to learn .js and have been experimenting with your code. Where can I change the number of images pulled from Google and what stops this running in firefox?
Great work!
Reply to this commentThe number of images coming from Google is something from the Google API. I'm afraid you can't get more (unless you do 2 querys at once).
The reason it doesn't work on firefox3 and lower (it doesn work on firefox3.5) it's because I'm doing some weird reparenting on DOM nodes at start. To be honest, when I was writing I though it was quite crazy idea but it ended up working on new browsers.
Reply to this commentVery nice!
Reply to this commentI like it! I'd quite like things to pause or at least slow while my mouse is over them though... if I approached too fast they had a habit of whizzing past before I could click on them!
Reply to this commentPerhaps decreasing the opacity for elements supposed to be further away would enhance the 3D effect?
Reply to this commentTried that. Didn't work. Because some images are too close to others so you'll be easily see that they are just "magicaly" getting transparent, instead of getting a fog effect. The best approach I can think of for your suggestion is to create a white image on top of each image and fade it in a bit.
Reply to this commentThis seems as though it would have quite a few practical uses in the touch-ui space, for instance, sorting through large data sets...
Reply to this commentGenial,
Otra manera de mostrar resultados, muy interesante.
Great
Another way to show a result's, interesting.
Reply to this commentXxxx
Reply to this commentdoes this only work on the Chrome browser? I tried launching the app on firefox but got nothing. I'm new to this kind of apps. But this is totally rad. I love new things like this.
Great job in making this
Reply to this commentIt works on Firefox 3.5+
Reply to this commentthis is a very good blend of technology. very simple idea well thought out and well executed. people like you are the reason that there are so many nice apps out there. people who think 'well why can't I just do that' and do it. good job :)
oh and from what I saw up there 'ed' was just kidding, hence why he put 'jk jk' lol
anyway I give this 9/10 :)
Reply to this commentSearch button should stand still.
Reply to this commentcan i download it? and is one of the best things that make google cool!!!
Reply to this commentThis is awsome XD
would be cool to see a version of google sphere for the normal google page not google images XD
Reply to this commentis there anyway you could search the internet and play games with google sphere?
Reply to this commentHome page'd. Is there any chance you could integrate this with google gravity? (As in clicking the web search button takes you there?)
Reply to this commentNice idea :)
Reply to this commentlove it...
Reply to this commentWell done Mr. Doob! This is a very good Google Chrome experiment! It is also very good for ur age! This is the coolest one I have ever seen! Keep it up! Love the graphics!
Reply to this commenti love google
Reply to this commentpiss of ed get a liffe
this is awsome lol hehehehe
Reply to this commentthis sucks get a life!!!!
hahahahahahahahaha
get a better google this one sucks not jkjk
Reply to this comment:(
Reply to this commentExcuse me. No offensive language is allowed. My good old pal made this and he had taken over 2 hours to do this. He is only a teenager! I bet you can't even make anything! Beep you!
Reply to this commentHey, calm down. He said he was just kidding. He was joking. Gotta read the whole comment people.
Reply to this commentThis.Is.Amazing. If google actually adopted this as their homepage, it would become the most popular search engine EVER.
Reply to this commentHave you actually tried using it for deep research yet? You will sooner be pulling out your hair at the frustrating interface then marvelling at the 3D impression.
Reply to this commentIT ALREADY IS :)
Reply to this commentThis might sound a bit noob or even lazy BUT here goes and it is directed at the chrome browser designers:
I think you should provide the Home and Stop buttons by default. This may seem like a very small detail (and it can be easily rectified through the Toolbar options) but when you use software for many years you expect to have these shortcuts in place, especially the Home button.
The Home button has saved my life b4, ROFL.
Nice update, now i've got to learn another api, damn.
Reply to this commentAre you saying that it may sound noob or even lazy because you have the impression that maybe this is not the right way to speak with the actual Chrome developers? :P
I can assure you that I don't know any of them.
Hopefully they'll wander around this experiment at some point and read all the comments and maybe read yours too and then consider it...
Reply to this commentJust updated the experiment a bit. Old results go away when searching for a new term. Also changed jsTween by jsTweener (much better).
Reply to this commentHey,
Thx man.
That was very kind of you.
Isn't Wonderfl, wonderful.
Japanese are tearing it up. Your doing quite nicely too btw (in my humble opinion).
About the Chrome, i just downloaded the browser, it runs wicked. Hey nice work as usual. Google should feel lucky that someone of your magnetism is playing with there software.
Reply to this commentNice, very nice.
Reply to this commentnice sphere expo Mr. Doob.
mr Doob, i noticed you use media temple. would you recommend them.
Reply to this commentDepends of the bandwidth you need. I would go with dreamhost first... cheaper, much better panel and easier to handle small host details in my experience. Although a bit more bumpy.
Reply to this commentI speed to sheet my finger in determine the parable of analization in action by this blog.
Reply to this commenthey!!this one is a real masterpiece!love it!!cool the images are moving!!cant wait to see the codes!
Reply to this commentVery nice. Works perfectly in chrome. In IE it doesn't move at all, and searching actually brings you to the normal search page!
Reply to this commentIE is software from the 90s.
http://a.deveria.com/caniuse/
Reply to this commentWOW! Even my Safari works this cool baby of yours fast! Totally rad! B-)
Reply to this commentvery nice. Better still would be to have just the images pop up, rotating round the google search box.
Reply to this commentwhats goin on in here
Reply to this commentASDA
Reply to this commentAlternative School Day Assignment?
Reply to this commentMen this program is exotic and stylish. Love it!!
Great job!! would love to see the codes for this program
thanks
Reply to this commentRight click, View page source ;)
Reply to this commentwhere should i right click to get the source?
Reply to this commentOn the piece itself, then look for the Main.js. That's all you need.
Reply to this commentNICE
Reply to this commentlol its so cool, i like how the images just pop up on your screen
Reply to this comment