Interactive Canvas

1. Idea
Make an interactive pattern. Elements should interact with both mouse’s move and press.

2. Precedents
I love patterns. I was reminded of that when I bought this beautiful issue of Un Sedicesimo featuring Gianpaolo Pagni last weekend on NY Artbook Fair:


I especially like the way screen printing affects the interaction of color, like in Karel Martens works:

tumblr_mcepyv1Qfv1ru82ue tumblr_mcf0srNkUm1ru82ue

I wanted the mouse interaction to add a similar effect to my digital pattern.

3. Code
a) Make an array of squares, given a number of columns and lines.


b) Map the colors to the array index — I miss Processing’s map() function! Note: when using variables with color settings in canvas, you have to concatenate them:
ctx.strokeStyle = 'rgb('+ r +', 150,' + b + ')';


c) Draw squares in different angles according to the mouse position. I used javaScript atan2 function.

d) Draw squares in different sizes according to their distance to the mouse (when pressed). I miss Processing’s dist() function. Using javaScript sine and cosine instead.

Html working here.

4. Notes
This is not relevant, but there was an annoying thing in the page so far: Chrome and Firefox render badly the canvas element on a Macbook Retina.  I found the reason and the solution for that in this article and added it to my code.

Original post:


One thought on “Interactive Canvas

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s