This week, I learned how to make a button, slider, and rollover, which make ICM more interactive. I can kinda imagine using P5.JS to create a page of interface in real.
And the second part of this week’s assignment is to read and change partner’s sketch, it is actually an exercise of making our own code readable.
At first, I drew a line and a rectangle. To make the rectangle become a slider, I need:
- The rectangle can only slide on the line.
- The rectangle must be inside of the canvas.
- When mouse pressed, the rectangle change color.
Therefore, I wrote the code:
Then I need to relate something to the slider. I drew the “circle wall”, which the wall’s thickness is related to the slider’s location.
Last, I put a ball into the sketch, bouncing between the edges of the canvas and the wall.
This is my final sketch.