•••• P5JS Workbook ••••

Step gradient

← ↑ →

Assignment

Draw a gradient between two colors in a fixed amount of steps. Add two color picker controls to let the user change the color extremes and an input to let the user change the number of steps. Be sure to update the canvas only when necessary.

Skills

Basic Drawing, Callbacks/events, Colors, DOM Controls, Flexible Canvas, For Loops, Hexadecimal Values, Linear Interpolation

Resources

(↷) Exercise Solution

(↗) attribute()

(↗) createCanvas()

(↗) createColorPicker()

(↗) createDiv()

(↗) createElement()

(↗) createInput()

(↗) Destructuring Assignment

(↗) function declaration

(↗) HTML <input type="number">

(↗) JS Number toString()

(↗) lerpColor()

(↗) noStroke()

(↗) padStart()

(↗) parseInt()

(↗) Template literals

© Roberto Arista 2020 – Released under MIT License

Table of Contents

Home
Empty Sketch
Primitives
Frames
Kaleidoscope
Geometric Tail
Circle or square?
Glyph Cursor
Colored Walls
Colored Corners
Rulers
Zig Zag
Propeller
Step gradient
FuncMeter
Grid
Random Points
Webcolors
Orbits
Watch
Boxplot
Ambivalent Sequence