Dusty HTML Canvas

Idea
Make my dusty project for the Code for Art class work on  a browser, too.

Technical hurdles
I began with the wrong approach: pasting my own code and changing the syntax from openFrameworks to javaScript. It took a long time to work.
I stepped back then and made a simple exercise with arrays and objects. I assigned different colors to an object and assigned it to and array:
Screen Shot 2013-10-03 at 5.02.15 PMIt’s hard to believe that you can assign anything to an array element in javaScript. The code for that was:

for(var i = 0; i < myArray.length; i++){
var myColorObject = new Object();
myColorObject.red = i;
myColorObject.green = 255 - i;
myColorObject.blue = 200;
myArray[i] = myColorObject;
}

Then I got back to the “dusty” code and finally figured out a way to make it work.

Screen Shot 2013-10-03 at 4.58.56 PM

Final
Working here (doesn’t work on Firefox; works faster on Safari).

Notes
1. At first, I used setInterval. But it seemed that the mouse response was slower with that. Dragging the mouse would leave separate circles in the surface, instead of a regular flow. I changed it to mouse move, then.
2. Even so, it doesn’t work as fast as in openFrameworks. I tried a lot of different things — changing the square size, decreasing the number of particles etc. That was the best I could get.
3. I was using the same code as in the previous assignment to make the canvas resolution look better in retina displays when in Chrome and Firefox. That probably added extra processing to it and slowed down the particles, since it doubles the pixels and then shrink them again. I removed that. I recommend testing it on Safari.
4. Interaction doesn’t work on Firefox. I have no idea why.

Original post: http://teaching.jos.ph/cclab2013/2013/10/03/gabriel-gianordoli-week-3/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s