Week 7 : Interactivity and Conditionals
-
In-Class Goals:
- Say hello and check-in
- Take attendance
Homework
Coding Sketch: Interactive Interface
Create an interface with a "button" or some clickable square or circle.
this is not the "button" feature in p5*js -- don't use that reference material. Instead you will draw a shape (Use square, circle, triangle, or rectangle. Irregular shapes are not recommended!) that will serve as your button. Use an if/else statement to change the color of the button if your mouse is on top of the shape.
Create a second color change if the mouse is pressed using the system variable mouseIsPressed and the else if constructor.
Bonus. Use a second if/else statement to change the color of the background when the mouse is in a certain region of the canvas.
tips
- In order for our program to know if our mouse is over our shape button, we will need to use mouseX, mouseY to input our mouse coordinates. We will also need to test to see if our mouse coordinates fall inside the coordinates of our shape. This will vary based on whether you choose a rectangle or a circle for your button. Check out the examples in the book for how to calculate these using 1) >, <, && logical operators inside an if statement in rectangles, or 2) the dist() function in circles.
- Use variables to define your colors ahead of time. Use a color picker app to get a color palette from a favorite site or artwork, or use a palette generator app. Be sure you are referencing colors correctly in either RGB or Hexcode.
Readings
