Vertical Gradient

p5.js Tutorials
Tutorials
/
p5.js Tutorials
/
For Loops
/
Vertical Gradient
Previous:
For Loops

Vertical Gradient

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.
Previous:
For Loops

For Loops Examples

Lines Silhouette Lines Silhouette

Use a for loop to create a silhouette of lines.

Wrong Lines Wrong Lines

Draw lines the wrong way.

Vertical Gradient Vertical Gradient

Draw a gradient from one color to another.

Flower Grid Flower Grid

Draw a grid of random flowers.

Spooky Text Spooky Text

Use `sin()` to make spooky text.

Menorah Menorah

Code your own virtual menorah!

Code Rocket Code Rocket

Make a rocket from the whitespace in your code.

Vera Molnár Squares Vera Molnár Squares

Code a design inspired by Vera Molnár.

Add Your Own Example Add Your Own Example

Add your own example to Happy Coding.

Comments

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

Comments are powered by the Happy Coding forum. This page has a corresponding forum post, and replies to that post show up as comments here. Click the button above to go to the forum to post a comment!