Chapter 02 - Lesson 05

Sliders and DOM Controls

Connect drawing variables to live controls.

Open full demo View source

Concept explanation

A sketch becomes a learning tool when the reader can change a variable and immediately see the result. Sliders expose parameters like depth, angle, shrink, and thickness.

Try it

Connect drawing variables to live controls.

Code fragment

const depth = Number(depthSlider.value);
const angle = radians(Number(angleSlider.value));
drawTree(depth, angle);

What to observe

  • Controls do not draw by themselves.
  • The draw rule reads current values.
  • A reset gives the reader a safe way back.

Small challenge

Change only angle for three redraws and keep depth fixed.