Before you read the rest of this post, if you haven’t already done so, check out the ColorWall here.
A couple of weeks ago I saw Yugo Nakamura’s brilliant wonderwall Flash site. It’s a really original idea and one of the most impressive things I’ve seen in a while, he has done a great job of building the site. However, it got me thinking about how he made it. After a bit of a discussion with the other Flash Developers in my team we all agreed that we think it’s probably done with a 3D class library, most likely Away3D or Papervision (or maybe even one he’s developed himself). We thought that because you sometimes get weird mapping with the images as shown below, looks like a Papervision Plane with a double sided material perhaps.
After playing around with the site a bit more I thought I’d like to have a go at re-creating it but with a slightly different approach (that’s assuming we were right about the 3D library approach Yugo used). If you study the way the planes move you can see that there are defined points and this gave me the idea to build a similar application but using particles rather than a 3D library, and the below examples show you the steps I took to build it (when the example swf’s loose focus I am stopping the update method, this is to save fps with so many examples on 1 page). I won’t go into too much technical detail as the files are available to download at the bottom of this post so you can play around and see the code/maths yourself.
I started off simple by creating just one particle and getting the movement of that correct. What I needed was a particle with a home point that it’s always trying to get to, but it must avoid the mouse cursor at a certain distance. This was achieved with a bit of trigonometry and some simple easing.
The next step was to create a grid of particles. As you can see from the below I am getting just the movement I wanted, although this will be easier to visualize with the third example. One thing I had to do to get the right effect was make particles who’s home was closer to the mouse’s center point less effected by the repel, this stops you from having all the particles around the edge of the mouse repel circle.
Now I had the right movement I just needed to associate 4 particles together to create a square. Once I had that I just used the the moveTo and lineTo methods of the drawing API to connect the dots – simple!
The final example shows the application with the guides removed. I managed to get a very similar effect as Yogu’s wonderwall, and even surprised myself at how simple it turned out to be. It’s literally just 3 very simple classes – 1 document class to set the particles up and call an update function on enterFrame, 1 simple value object to associate 4 particles together and finally a simple particle class where the maths is done (and it’s pretty simple maths).
I have a few other things I want to do with these little particles, and I have already put together a PhotoWall app that I will post shortly (I just need to optimize it a bit first). The source for the above can be downloaded here. As always if you grab it and do something cool please post a comment with a link to it as I’d be really interested to see what you do.
This is really good work, helps but not the exact same staff as yugop’s wonder-wall. First yugop’s wall run the enter_frame when you over on an image, not big difference but you did not need to listen mouse_leave on the blog. Second thing is more imported that is; yugop’s distance circle is bigger and dots run away from circle according to distance of mouse. I am trying to do something similer.14 Apr 2012
BTW I saw a site that tried to do similer maybe you want to look. http://collection.gasjeans.com/#/gallery
When I attempt to add a 3 state hyperlink button to this website the color wall affect does not work. Why is that?
Gerard Garcia15 Nov 2010
Thank you for recommending that I download the CS5 30 Trial Version. It worked and I’m having fun with your creation. It is very cool.
When I let “var xpos:int = 0;” and “var ypos:int = 0;” the top left corner of the first image in the first row goes to (0, 0), and the top row of images appear at a 45-degree angle. Why is that? What parameters to I need to change so that the top row of images is initially at a 90-degree angle?
Thanks again for your recommendation. The simplicity of your creation is a thing of beauty.
Gerard Garcia10 Nov 2010
Hey Gerard, I think the file is CS4 but can’t remember to be honest and am currently away until the new year so can’t check for you. Maybe download a demo of the latest version of Flash from the Adobe site and save the file back for CS3 (if possible). I definitely don’t think it is an issue with the file itself though as it’s been downloaded many times and no one has mentioned any issues before.8 Nov 2010
I forgot to mention that I’m using CS3.8 Nov 2010
Are your source files in CS4 or CS5?
I unzipped the source file, then tried to open the FLA file, and got an “UNEXPECTED FILE FORMAT” error messsage.8 Nov 2010
Hi! I really appreciate your answer ! but I have a question, I can make my wall, but I can not make links to other web sites, you could help me with that?19 Oct 2010
Thank you very much!
Hi Pia, the code you are looking for can be found here29 Sep 2010
Hi! I really admire your work!Its great. I want to ask for your help. Can you send me the codes of an example with images? I really need your support.
Pia25 Sep 2010
Cool yaar good effect and thnks for code29 Jun 2010
great analysis man . I appreciate your work. thanx the work helped me a lot.22 Jan 2010
Hey dude. thanks for sharing…but any chance in you posting the flas or emailing the eariler versions. ie. eg#1, eg#2, eg#3. Thanks.14 Jan 2010
@FlashMad: it does indeed use the drawing API and is therefore re-drawing the page each frame. If you want to use images instead of a color box as in the example I would recommend looking at this distort image class. I will post an example of this later.3 Nov 2009
Hey i tried your source files. But it is drawing the object each time. How can i place a movieClip or image?? Can u please help?3 Nov 2009
Great work, looks just as good as the original 🙂30 Oct 2009
Wow man !!! Great work. Quite useful one. I saw your post on kirupa26 Oct 2009