# 17

Due 5/2

Working With p5

Watch videos 8.1, 8.2, and 8.3 from Daniel Shiffman's Working with data - p5.js Tutorial

Final Memory Game

Due 4/25

Save your game into a folder named memory-game and upload it to the server.

# 15

Due 4/6


Help! These programs don't work. Fix them!

Before it is possible to debug a problem, you must convince yourself that it is possible to debug the problem.

Remember, whenever you're debugging something, ask yourself these three quesions. It's best to literally speak your answers outloud, as if explaining them to someone else.

  1. What makes you say your code isn't working?
  2. What did you expect your code to do, and why?
  3. What did your code do instead, and how do you know?

Use these gifs as a reference for what they are supposed to do. Click on the sketch title to get the code.


a standard rollover / hover effect


The object should rotate only when the mouse is moved.


The large, main area (stage) should change color depending on which "thumbnail" is clicked.

Save all three in a folder named hw15 and upload it to the server. It doesn't matter what you name each sketch. These won't be displayed on you gallery page.

# 14

Due 4/4

Memory Game: Visual Design

Take the code we have so far and give it your own visual style. The goal of the traditional tiles-in-a-grid model of the game is to test spacial memory. How many different ways can you design a memory game? Think about...

  • If images don't belong to same category, what effect does that have? What if they are abstract vs representational?

  • How would using words or colors, instead of images, change people's ability to recall?

  • If the objects are moving, what changes need to be made to keep the game plausible and enjoyable?

  • How does a grid layout effect the game play?

  • How does sound affect visual memory?

  • What if the sound were a spoken word?

Figure out what is most interesting to you and go from there.

This assignment is not about functionality. You are setting the stage, design-wise, so that the code you write from now onward will be appropriate to your version of the game.

Save your design as hw14-1 and upload it to the server.

# 13

Due 3/30

Bubble Pop Game

Using the bouncing ball object and array code from previous exercises, refine the "bubble pop" game that we did in class. As a designer, make this game your own. Come up with creative versions of simple game standard play.

Your game should have the following functionality.

  1. bubbles 'pop' when you click on them
  2. a 'game over' function displays something when the user has 'popped' all the bubbles
  3. when the game is over, a 'reset' option lets the user play again
  4. EXTRA
    • a welcome screen with a button to start the game
    • a timer
    • correct bouncing (meaning the ball actually appears to bounce when it hits the wall, instead of melting half-way into it)

Save your sketch as hw13-1 and upload it to the server.

# 12

Due 3/28

Freestyle: Objects, Arrays, and Loops

Create two sketches using objects inside an array. Experiment with functions inside the objects, and using the index variable inside the loop to effect some property of the objects. At least one piece should be something other than bouncing balls.

Save your sketches as hw12-1 and hw12-2 and upload it to the server.

# 11

Due 3/23


Using the bouncing ball object code from class, create three ball objects and have each one change in some way with a specific key stroke. They should each change independently.

Save your sketch as hw11-1 and upload it to the server.

# 10

Due 3/16

Interactive Instrument: Functions and Keyboard Events

Create a piece that uses custom functions and the keyboard as an input device. The user should be able to play with it using at least four specific keys. The keys will trigger your custom functions.

Be sure to read the descriptions of the key functions on the p5 reference page.

Save your sketch as hw10-1 and upload it to the server.

# 9

Due 3/14

Custom Functions
  1. Watch Daniel Shiffman’s video 5.1: Function Basics
  2. Create a sketch that draws something. Anything. Put that code into a custom function and then call that function. You’re welcome to recycle an old sketch, such as your first abstract painting.

Here's an example.

Save your sketch as hw9-1 and upload it to the server.

# 8

Due 3/9

Nested Loops: 10 Iterations

Experiment with all the different things you can create with loops inside of loops. What can you do with mouseX and mouseY? What if you put a conditional statement, or two, inside a loop? How do loops affect rotation? etc. etc.

Take the creative process where it leads you, and keep saving versions as you go along, until you have a dozen or so. It doesn't matter if some are very similar.

Save your favorite ten sketches into folders named hw8-1 through hw8-10 and upload them to the server.

# 7

Due 3/7

Freestyle Loops

Create three different sketches using the power of iteration. Explore what's possible when you throw your creative ideas into a loop or two.

Save them into folders named hw7-1 hw7-2 and hw7-3 and upload them to the server.


Due 2/28

Mid-semester Project: Time Visualization

Save your final program into a folder called clock and upload it to the server. Make sure it's presented in the proper context. For example, if it's meant for mobile devices, make sure that is clear. You could try doing something like this.

# 5

Due 2/9

Time Piece Project: Ideas

You will be creating a piece that uses the time and date data from the computer to create a unique way of represent the passing of time. We will begin this project with a brainstorming assignment:

  1. Brainstorm ten or more time visualization concepts. Write down whatever comes into your head. You won't have to show this to anyone so don't be shy.
  2. Choose three of these concepts and come up with at least two ideas about where you could take each concept.
  3. Now pick your three favorites and develop those ideas further. Describe them in more detail. How will they look? How will they function? What is their context? (what form will they take — i.e. webpage, smartwatch face, phone app, tablet app, installation, etc.
  4. Make some visual sketches of your ideas, on paper or digitally.

I've made a simple HTML template for you to fill in with your descriptions and images of your sketches. Save it as index.html into a folder called hw5-1 and upload it to the server, along with your images.

# 4

Due 2/7

The Bouncing Ball : Conditional Statements

In class, we learned how to use a conditional statement to test if something is true or false. In our case, we wanted to know if the ball on our screen had hit the edge or not. If it had, we'd want it to reverse it's direction.

Your assignment for Tuesday is to play with this code. You can put ANYTHING inside an 'if' statement. The ball doesn't have to be a ball. It's really just a number value, right? Have fun with it. I want to you to create three amazing sketches. At least two should incorpoarate the bouncing ball code. The third can be a freestyle sketch, if you like.

Save and upload each p5 sketch in separate directories named hw4-1, hw4-2 and hw4-3. The order doesn't matter, as long as the names correspond.


watch Shiffman videos 3.3 and 3.4.

# 3

Due 2/2

3-1   Split-Screen Mapping

Split the window into a top half and a bottom half. When the mouse moves left to right, the top half should change from black to white and the bottom half should change from white to black. You will be using the map() function.

Save and upload as hw3-1.

3-2   Freestyle!

Make something amazing! Use what you've learnedso far to create a captivating interactive experience. Try to use some functions that we haven't learned in class. Browse through the p5js reference.

Save and upload as hw3-2.

# 2

Due 1/26

2-1   Interactive Painting

Take your abstract "painting" sketch and make it interactive. Play with the variables and functions we went over in class (mouseX mouseY random() width height) to control things like size, color, position, background, etc.

Add some event handlers like mouseClicked() and keyPressed() for more interactivity. Look up other event functions on the p5 reference page.

Save and upload as hw2-1.

2-2   Grouped Dots

Make a group of four dots (like the image below) follow the mouse around on the screen, with the mouse being in the center. This will require creating variables that draw the circles in relation to something else. Check out the exercise we did in class for help (below).

Save and upload as hw2-2.

See the Pen GD 153 - Feb 2 - 01 by Rusty Robison (@rustyrobison) on CodePen.


Shiffman videos:

# 1

Due 1/24

1-1   Abstact Painting in Code

Choose an abstract painting that inspires you and reproduce it using code.

A suggested starting point would be Piet Mondrian, Sol Lewitt, Vilmos Huszár, Theo van Doesburg, Varvara Stepanova, etc. Choose whatever artist/painting that gets your creative juices flowing. Using p5, produce a composition that is inspired by, and closely mimics, the piece you have chosen. The more geometrical the piece is, the easier it will be. You will be using the functions we learned in class: rect(); line(); ellipse(); fill(); stroke(); background(); createCanvas();

When finished, name your project folder hw1-1 and upload it into your GD153 directory on the server. It is very important that the name is correct. The URL should look something like*yourname*/GD153/hw1-1/ and will automatically appear on your website.

For instructions on how to use FTP to upload to the server, check out the Resouces page on this site.


Watch videos 1.1, 1.2, 1.3, and 1.4 on Daniel Shiffman's YouTube channel.