ICM week 3

For this week I worked on a collaboration project with Minjun, we created a sketch which has two slides that changes the size and shade of a square on the screen, the background color also changes as the mouse moves.

https://editor.p5js.org/ukpfilms/sketches/fYWSkmFgs

I already made a slider in one of the worksheet questions so I was able to follow the format I wrote with slight adjustments and writing it twice for the two sliders. Essentially, the sliders are coded with a long rounded rectangle for the slide and a ellipse for the knob. I made the interactive part of the slide by making an “if” statement for when mouse is pressed inside the area of the slider rectangle, make the x position of the knob same as mouseX. There is a drawback to my slider in that it bounces back to the center when mouse is released, I am not sure how to fix this.

After implementing the sliders into my sketch, I linked the characteristics of the square with the X position of the sliders using variables – Knob1 and Knob2 for the two knobs, each assigned to link with the variables for the rectangles size and shade (rectSize, rectShade) which is linked to the square’s width, height, and RBG value (only one value since its shades between black and white).

After I finished with the main components of the sketch, I handed it over to Minjun, who added colors to the knob and made the background change colors based on the position of the mouse.