Delaunay Triangulation

Creative Coding seemed easier than my first troubling encounter with jQuery and native Javascript. It’s usually harder during the first time you learn a language. But I imagine that by the end of the semester, I should be equipped to generate data art through p5.js. I came across a delaunay triangulation pattern maker site 2 years ago and still dream of the day that I can design data and patterns using code.

 

Here’s what Delaunay Triangulation looks like at least in the design world. (You can read about its mathematical origin here):

Screen Shot 2017-09-19 at 11.45.45 PM

 

I was very happy with my building block version of a “Delaunay” using a mix of rect, line and ellipse methods on p5. Also worth mentioning was a happy accident I ran into. I found a coordinate-mapping tool, it comes free with your macbook – the screenshot command. As soon as I found this, I got more encouraged to keep making edits to my shapes.

 

I first mapped each coordinate and replaced the x’s or y’s that needed to be connected to the dot in the middle to achieve this stretch-y line effect consequentially playing with irregular triangle shapes.

 

Screen Shot 2017-09-17 at 10.11.03 PM

My final product looks like this: http://alpha.editor.p5js.org/kriziafern/sketches/B1LF_jhc-

I learned about the map function (my current favorite) where the background colors change with mouseX.

Leave a comment