Solution

Goals

• Get practice working with p5.js
• Learn about linear interpolation
• Learn about color models

Prerequisites

1. Accept the assignment on our Github Classroom.
2. Download the git repository to your local computer.

Assignment

This is a fairly simplistic assignment, we are just going to make two bands which fade from one color to another through interpolation. The top band will operate in RGB, and the bottom band will operate in HSB. Each band will consist of a row of small rectangles, the color of which will be chosen based on its position.

Links to the references for the included functions can be found at the bottom.

Part 1: Setup

We will need three main variables to control our color bands: a start color, and end color, and the number of divisions in the band. Create variables divisions, startColor, and endColor above the setup() function.

We will initialize these variables inside the setup() function (this is one of those situations where we have to wait, because the color() function isn't ready yet). Make the divisions 100, and make the two colors to red and blue.

You will also want to turn off the stroke (noStroke()).

Part 2: Draw the RGB band

In draw(), make a for loop and draw a rect for each one of the divisions. The band should span the width of the canvas, which is available in the width variable. Use width to determine the size of your rectangles given the number of divisions. The height of the rectangles is up to you.

Use lerpColor to figure out the color for each rect based on the percentage of the distance across the canvas.

Run this -- you should have a nice band that fades from red to blue.

Part 3: Draw the HSB band

I don't normally recommend this, but copy your for loop and paste it into the draw() function a second time. Change the y position for the rectangles so second band is below the first.

Before the second for loop, add in colorMode(HSB). Because draw() is running in a loop, you will also need to add colorMode(RGB) before the first for loop, or both bands will use HSB.

This works because the colors are stored independently of the color mode. The color mode comes into effect at the creation time of colors (so inputs can be interpreted correctly) and when performing operations like interpolation.

You should see a distinct difference between the two bands. Can you explain it?

Part 4: Commit your changes

Let's be mindful about our git use. Commit your changes to your repository. Don't worry about making feature branches, however, we aren't getting that complex yet.

Part 5: User interaction

We are going to add some basic user interaction to allow the user to control our three primary variables.

Add a slider

Comment out the divisions variable and add a new divisionSlider variable. In setup, use the createSlider() function to make a slider that allows the user to vary the number of divisions between 2 and 200. Set the default to 100, and the step size to 1.

Use the slider's position function to place it just below the canvas (the height variable might be useful here).

Adjust the draw() function so that it pulls the number of divisions from the sliders value function.

You should now be able to slide the slider back and forth and see the number of divisions change.

Add color pickers

A function we have not looked at yet is createColorPicker(). This works just like createSlider, except that it places a swatch of color on the page, and clicking on it opens up a color picker, allowing the user to select a new color.

Comment out your startColor and endColor variables, and create two new variables: startPicker and endPicker. Use createColorPicker() in setup to initialize your pickers. The function takes a color to initialize the swatch, so pass in red and blue.

Use the pickers' position function to place them under your slider.

Adjust the draw function to use the values from these pickers for your color endpoints.

Finishing up

Commit your changes to git and push them back up to GitHub. I will find them there.

References

Links to the reference pages for the functions you will be using:

background
color
colorMode
createCanvas
createColorPicker
createSlider
fill
lerpColor
noStroke
rect