p5 Polygons - making shapes happen in p5.js

I used a crap ton of quad primitives to make a hand, a butterfly, and some grass. The grass length and color are randomized. Press the 'g' key to randomize the grass. You can also increase/decrease the amount of grass using the "+" and "-" keys, respectively. For more fun, you can outline the geometries used by hitting the space bar.


  • I started by drawing a picture on paint. here it is
  • Then I used this sketch to manually obtain vertex data for all of the quads.
  • I used the quad function to make all of the shapes.
  • I created a system to outline the shapes so I could check what I was doing.
  • Next I set up a bunch of variables to take care of all of the colors. Two arrays were used for the grass heights and colors.
  • The height array was filled with random number within an arbitrary range.
  • The color array was filled with colors that had random green values within an arbitrary range (what looked pretty to me).
  • Next I made a loop to make the grass happen. Just walk through the arrays and draw and fill the quads with the info in the arrays.
  • Once that was done I set up some key stroke events to control the thing live.
  • I played around with colors until I thought it looked 'ight.