ICM – Week #2 – Interactive “Etch A Sketch”

This week we went over declaring variables, in order to use it easily down the road with our coding.

A variable get declaration in the top of the setup function.

For example in order to draw a line we should first give our variable (var) it’s position:

So before the code:

var lastX;

var lastY;



in the draw section:


lastY= mouseY;


Im going to try it out in this week’s homework, by creating an “Etch A Sketch” Which probably got to my mind after reading “sketch.js” in P5 environment.

I started by finding a good picture file of the original piece, and cleaning it in photoshop. I also made a scrolling button, so it can move with the lines created. After I failed to upload the image as we learned in class, I went to Jason to get some help, he recognized there is a bug regarding uploading jpeg, so it means we found a bug!

I still hsd to get those home work done, so he nicely showed me a few more ways of getting this jpeg as a background. The solution was to upload the image as a different HTML element, we opened the .js file of the project and edited the CSS code lines. I hope next time I can just do it easily by uploading a jpeg to the library and that’s it 🙂

We figured that the canvas will have to be on top of the image, so we gave it 0.7 opacity..these is why there is a little bit of faded feeling tot he image. But anyway it helps the line to be more grey- which s good.

I got up to here.

Another part of our homework was to bring some inspiring works that we would like to try and do.\

 Rafael Rozendaal I started following him few years ago, he’s doing a lot of coding but also physical works. And…he also writes Haiku’s! (this is great).

Another inspiring piece is this cute website: http://animade.tv/frankensim/

Leave a comment.

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