Examples / p5.js Examples / / Vertical Gradient

Vertical Gradient

example p5.js javascript for-loops genuary

Click here to edit this code in the p5.js editor.

This sketch uses a for loop to draw a vertical gradient.

I created this for the 24th day of Genuary which had a prompt of “500 lines.”

vertical gradient vertical gradient vertical gradient vertical gradient

Remix Ideas

  • Add a third color in the middle, and make the gradient go from the top color, through the middle color, to the bottom color.
  • Create a gradient by giving each corner of the canvas a color. In other words, define 4 colors instead of 2 colors. After you get that working, can you add a 5th color in the middle of the canvas?
  • Base the gradient off the current time. Show a sunrise in the morning, blue during the day, sunset in the evening, and black at night.

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!