Fading Grid

p5.js Tutorials
Tutorials
/
p5.js Tutorials
/
Arrays
/
Fading Grid
Previous:
Arrays

Fading Grid

November 10, 2021

example p5.js javascript arrays

This sketch uses a 2D array to hold values, and decreases changes those values to show a fading grid of cells.

Edit this code in the p5.js editor.

fading grid

Remix Ideas

  • Change the number of cells, or their colors.
  • Give each cell a random color.
  • Instead of resetting a cell when the user moves their mouse, reset a random cell every frame.
Previous:
Arrays

Arrays Examples

Falling Points Falling Points

Show falling points that look like snow.

Oscillating Lines Oscillating Lines

Show lines that oscillate up and down.

Fading Grid Fading Grid

Use a 2D array to show a fading grid.

Pi Visualization Pi Visualization

Visualize the first million digits of pi.

Earth Moon Emoji Orbit Earth Moon Emoji Orbit

Use arrays of emojis to show the moon orbiting the earth.

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!