Examples / p5.js Examples / / Bouncing Line

Bouncing Line

example p5.js javascript animation random genuary

This sketch draws a line between two points that bounce around, creating a colorful gradient. I created this for the 17th day of Genuary which had a prompt of “Draw a line, pick a new color, move a bit.”

bouncing line bouncing line bouncing curve bouncing curve bouncing line bouncing line

Remix Ideas

  • Try calling bezier() instead of line() to create a curve.
  • Make it so each point bounces in a new random direction when it hits an edge.
  • Create your own sketch from the prompt: “Draw a line, pick a new color, move a bit.”

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!