CS 467 - Color Interpolation
Due: 2020-02-20 3:00p
- Get practice working with p5.js
- Learn about linear interpolation
- Learn about color models
- Accept the assignment on our Github Classroom.
- Download the git repository to your local computer.
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
endColor above the
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 (
Part 2: Draw the RGB band
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.
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
draw() is running in a loop, you will also need to add
colorMode(RGB) before the first
for loop, or both bands will use
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).
draw() function so that it pulls the number of divisions from the sliders
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
endColor variables, and create two new variables:
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.
draw function to use the values from these pickers for your color endpoints.
Commit your changes to git and push them back up to GitHub. I will find them there.
Links to the reference pages for the functions you will be using: