ColorWall

20 Comments 25 October 2009

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.

Source code


Posted in ActionScript, Experiment, Physics

20 Responses to ColorWall

  1. 26 October 2009

    Wow man !!! Great work. Quite useful one. I saw your post on kirupa

  2. 30 October 2009

    Great work, looks just as good as the original :)

  3. 3 November 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?

  4. 3 November 2009
    FlashMonkey

    @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.

  5. ColorWall with images | Flash Monkey

    [...] (with a search tag of “sunset”). It works in pretty much the same way as described here, but instead of using the drawing API to create coloured boxes, I am using Ruben’s [...]

  6. 14 January 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.

  7. 22 January 2010
    Sourav Bhargava

    great analysis man . I appreciate your work. thanx the work helped me a lot.

  8. 29 June 2010
    sameer Palkar

    Cool yaar good effect and thnks for code

  9. 25 September 2010
    Pia

    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.

    Pia

  10. 29 September 2010
    FlashMonkey

    Hi Pia, the code you are looking for can be found here

  11. 19 October 2010
    Pia

    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?
    Thank you very much!

  12. 8 November 2010
    Gerard Garcia

    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.

  13. 8 November 2010
    Gerard Garcia

    I forgot to mention that I’m using CS3.

  14. 8 November 2010
    FlashMonkey

    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.

  15. 10 November 2010
    Gerard Garcia

    FlashMonkey:

    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 Garcia

  16. 15 November 2010
    Gerard Garcia

    Flash Monkey:

    When I attempt to add a 3 state hyperlink button to this website the color wall affect does not work. Why is that?

    Gerard Garcia

  17. ColorWall gets half a million hits | Flash Monkey

    [...] but I was so happy with the result I thought I’d post it here on FlashMonkey, along with an explanation of how I did it and some source [...]

  18. Fun with JavaScript and particles | Flash Monkey

    [...] enjoyed playing around with particles as you can see from the posts featured on this blog, e.g. ColorWall, WobbleWall and Simple JavaScript [...]

  19. 14 April 2012
    emrah atilkan

    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.
    BTW I saw a site that tried to do similer maybe you want to look. http://collection.gasjeans.com/#/gallery

  20. NodeGarden and Particle Wall • Tal Woolf | Interactive Developer

    [...] You can achieve some really fun and interesting effects this way. Just start off with one Particle, adjusting its movement from the mouse, and then just add more particles.  Steven Burges illustrates this nicely with his ColourWall example. [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>