•••• P5JS Workbook ••••

Colored Walls

← ↑ →

Assignment

Define two colors, left and right. Draw two rectangles facing each vertical edge of the canvas and color them with the left and right colors. Draw a circle following the pointer position, filled with a color interpolated between the left and right according to the mouseX value. The spacebar should allow the user to switch between a "clean" mode and a "trail" mode.

Skills

Basic Drawing, Booleans, Colors, Comparison Operators, Conditional Construct, DOM Controls, Flexible Canvas, Keyboard Input, Linear Interpolation

Resources

(↷) Exercise Solution

(↗) attribute()

(↗) background()

(↗) Comparison and Logical Operators

(↗) createCanvas()

(↗) createColorPicker()

(↗) createDiv()

(↗) createP()

(↗) ellipse()

(↗) How to toggle a boolean (stackoverflow)

(↗) if...else

(↗) lerpColor()

(↗) noStroke()