Examples / p5.js Examples / / Recursive Lines

Recursive Lines

example p5.js javascript creating-classes trigonometry genuary

Click here to view this code in the p5 editor.

Click here to view the result by itself.

This sketch shows lines that draw other lines. Each line draws itself, and 3 other lines. Those 3 lines draw themselves, and each draws 3 more lines.

I created this for the 21st day of Genuary which had a prompt of:

function f(x) { 
  DRAW(x); 
  f(1 * x / 4); 
  f(2 * x / 4); 
  f(3 * x / 4); 
}

Each line draws itself, and then spawns a new line at 25%, 50%, and 75% of its own length.

recursive lines recursive lines recursive lines recursive lines

Remix Ideas

  • Restart each line when with a new color when it finishes.
  • Start each new line at a random angle.
  • Base the line’s color off of it’s length. Make longer lines darker, or more red.

Comments and Questions

Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!