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:


gianpaolo_2gianpaolo_1

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.

pattern_1

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 + ')';

pattern_2

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: http://teaching.jos.ph/cclab2013/2013/09/24/gabriel-gianordoli-week-2/

About these ads

One thought on “Interactive Canvas

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