ICM Help Session Week 3: Loops, Modulo, Buttons and Sliders

Mimi

Code Examples Here

How to make a Slider | Code

This is a great example for understanding the following Processing functions:

1. constrain() – How to make the slider button not fall off the ends of the slider.
2. Using variables to keep a bunch of shapes together relative to the mouse. (Our slider button is a complex shape comprising of 2 circles and 2 lines, all moving together relative to the y-location of the slider bar and the x-location of the mouse.)

Using Loops to Generate Patterns | Code

1. % modulo - Use division to create “regular” patterns, e.g. alternating rectangles by only filling a rectangle with “black” if the index number of the rectangle (in the loop) can be divided by 2 without a remainder. (e.g. 0, 2, 4, 6, 8, 10, 12, etc…)

Interactive Buttons | Code

We went over this example which shows 4 different kinds of interactive buttons working side by side.

1. Momentary click
2. Turning a button ON and OFF
3. Mouseover or Hover effect
4. Momentary click plus Mouseover or Hover effect

Concepts convered include:

1. Using booleans to keep track of on/off states
2. What’s the difference between mousePressed and mousePressed()?

mousePressed is a Processing variable like mouseX that tells you if the mouse button is pressed down.

mousePressed() is a function that runs code  you write ONE TIME when you click the mouse.

This sketch illustrates it. 

So then can you guess what’s the difference between keyPressed and keyPressed()?

Teaser For Next Week

How do you create a grid of on/off switches?
Approach 1
Approach 2 (with hover state)
Approach 3 (randomly placed cells with drawing via objects)