In-Class Exercises

Recreate the following sketch.

1. Starting with this sketch, visualize the data as a bar chart like the image below.
   Here is a video to walk you through it.
   
   

Recreate the following sketch and submit it to collection #11 in openprocessing.

Starting with the bouncing ball object code below, create an array of balls. Watch this video to walk you through the process.

Recreate the following sketch and submit it to collection #11 in openprocessing.

Choose a quote and create a sketch where each word of the quote appears with every click, like below. Watch Dan Shiffman's videos for help.

YouTube Playlist

Code from class

Recreate the following sketches and submit them to collection #10 in openprocessing.

1. Write a class that creates a button object that changes the background when clicked on.
   
2. Using the button class, make two button objects that each change the background to a different color.
   

Create the following sketches and submit them to collection #10 in openprocessing.

1. Start with your sketch of the bouncing ball using functions, like the sketch below. Rewrite that code to make the ball into an object. Here is a video to walk you through the process. Be sure to watch Dan Shiffman's videos first.

2. Starting with the sketch below, rewrite the code so that the "bug" is an object.

Create the following sketches and submit them to collection #9 in openprocessing.

1. Start with the code from this previous exercise. Rewrite the code using functions to acheive the same result. (Watch Daniel Shiffman's videos for help.)

2. Right a sketch that uses a custom function to draw a target to the screen wherever the mouse is clicked, with a random size. Your program should use parameters and arguments to pass in the position and size. Click on example below.

3. Write a sketch with a custom function called barbell(). Everytime the program is run, a barbell with a different size and length will be drawn to the screen. Run and rerun the example below.

Others

Examples from class

Recreate the following sketches.

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

Others

Recreate the following sketchs.

1. Download the media files here.

2. Download the media files here.

Others

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. Alter your code again to create something like this. You will need to look up the typography functions in the p5 reference.
answer

4. 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

Recreate the following sketches:

1. Use custom and built-in variables. answer
   
2. Increment a variable to draw a line of circles. Make them 60 pixels wide and spaced 80 pixels apart.
   
3. Now rewrite that code using a for loop to draw the same line of circles. answer
4. Use a for loop to draw these boxes. answer
   
5. Use fill() to color the boxes like this. answer
   
6. Adjust that code to color them like this. answer
   

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.
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.

Save them to the Basic Shapes collection in openprocessing.