In-Class Exercises

Code from class

Code from class

Code from class

Recreate the following sketch

1. Starting with this sketch, visualize the data as a bar chart like the image below. answer
   

Code from class

Code from class

YouTube Playlist

Code from class

Recreate the following sketches.

1. Modify the code from this sketch to makes the balls reverse direction when the mouse is pressed. (HINT: You'll need to add another method to the class.) answer
   
2. Write a class that creates a button object that changes the background when clicked on. answer
   
3. Using the button class, make two button objects that each change the background to a different color. answer
   

Examples from class

Examples from class

Create the following sketches.

1. Write a function that draws a target design to the screen wherever the mouseclicks.
   

Examples

Examples from class

Examples from class

Recreate the following sketches.

1. Use translate() and rotate() to make this diagonal line. answer
   
2. Now add a square to the end of the line. answer
   
3. Write a sketch where the background color cycles through all the hues in one minute. answer
   

Others

Clock and Rotation Examples

Media Examples

Media Examples

Recreate the following sketch.

1. Make a button that changes the background color. Use a variable to keep track of the two different states. answer
   

Others

Video

Recreate the following sketches:

1. Make half of the canvas change color when you hover over it. answer
   
2. Make a center bar change color on hover. answer
   
3. Make a square change color on hover. answer
   
4. Make a square chage color when you click on it, and then change back with another click. answer
   
5. Write a program that lets you draw when you click and drag the mouse. Then have it clear the screen when you press any key. answer
   

Others

Recreate the following sketches:

1. Draw 100 circles in random locations on the canvas. answer
   
2. Alter your code so that it looks like this. answer
   
3. Now use nested loops to create a grid of circles, but use the random function to slightly move their placement. answer
   

Recreate the following sketches:

1. Warm up with a single for loop. answer
   
2. Create nested loops to draw a grid of circles that starts away from the edge of the canvas.
   
3. Now draw two circles at each position. answer
   
4. Set it to noFill() and expand the circles to create a pattern similar to this. answer
   
5. Draw a grid of circles inside of squares. (tip: look up rectMode() in the p5 reference) answer
   
6. Now try this. answer
   

Others

Create the following sketches:

1. Draw a circle to the screen which all of the inputs are variables.
2. Draw three more circles next to it. Have their values come from variables as well. answer
3. Draw three circle to create a target symbol. Code it in a way that allows you to change the size of target (with all three circles) by changing the value of only one variable.

Recreate the following sketches: