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 array
  • then manage to systematically go through and start using those points to create the new triangles

In my head it seems like it could work — getting rid of the randomness of the triangle generation.

Let’s see how far I get into this code before I realize how dumb I was to think this would work.

Setting up the grid

Just so I can see what my brain is thinking, I’m physically putting the grid onto the canvas:Which ended up looking like this. I’m off to an okay start.

Which ended up looking like this. I’m off to an okay start.

--

--

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.