Generative Art: Triangles with p5.js

uxBrad
5 min readMay 20, 2019

After going through a bit of history on using computers to make art, my second class on p5.js had us attempt to be inspired by geometric artwork and write code to make something cool.

In about an hour and a half of coding, I ended up with this — randomly generated triangles in all kinds of colors.

Random triangles

We were tasked to continue working on it until we were happy with it — play around with shape, size and color.

I spun some things around in my head during a long commute — I’m determined to get all these triangles to be all connected and not overlap. It was something we discussed before starting the project but we deemed it too difficult to do consider we’re only 3 hours into learning p5. We looked at a library that accomplished it, but I needed to come up with my own solution.

I have a difficult time drawing while I’m driving so as soon as I managed to stop I sketched this out:

The sketch I made after a long commute on how I might approach this

What if, instead of Random coordinates to create the triangles, I could

  • setup a grid on the canvas
  • randomly place the points in that grid
  • store the coordinates in an…

--

--

uxBrad

I’m Brad Cooper — UX Practitioner. A11y Evangelist (CPACC). Blockchain Enthusiast. Web Theorist. Find out more on how I work at https://uxBrad.com.