2020 Creative Coding
Final Project
Creative Coding
the concept
Create a low-poly art generator
Simple geometric shapes placed side-by-side create angular and minimalistic artistic compositions. These low-poly artforms come from the early days of 3D animation. The low resolution artwork helped reduce render times. I have a need for this project. I’ve written a children’s story (https://alearningspirit.com/stories/what-is-this/) that I would like to illustrate using low-poly designs. These experimentations will allow me to create the artwork.
Overview
I’ve always been interested in low-poly art creations. The artform appeals to me and it has always seemed a good candidate for generative art. I could not have imagined in 1994 while programming javascript rollovers for menu items that the model could be turned into a powerful art generation platform.
This website follows that exploration; from simple explorations with delaunay triangulation to an algorithm that provides a compelling low-poly animation of the artwork. Ideally, one page would have combined the ability to randomly generate a series of triangles with an ability to add to that by clicking on the canvas. But I decided to leave the efforts separate so I could more finely tune each experiment.
Ultimately, I would like to create a low-poly drawing program that not only allows the user to select their image and have it randomly “triangulated” but also encourage the user to use drawing tools such as pencil to add single points, an area point eraser, and a random point sprayer. Both the eraser and point sprayer would have controllable brush size.
Skills Learned
This project extended the Javascript skills I already have. For this project, I decided to use the p5.js library using some techniques to address and display/change DOM elements from the Javascript. Creating a drawing program was a bit more involved than I originally thought. But overall, the pieces of what I worked on can be put together for a cohesive whole.
Perhaps the most interesting skill learned was the exploration of the Delaunay Triangulation method itself and the use for Voronoi generation as well. Manipulating the image to evaluate an area and glean the underlyling color information was a fun/frustrating exercise as well. And will help as I develop this concept to generate black-and-white art using the triangles to simulate color brightness of the image and thus creating similar artwork.
The most surprising exploration was in the low-poly animation experiment. I find this effect to be sublime. It took an evening to take from thought to reality. And it really shows the value of coding with a precise goal in mind. It was one of the most prescient coding sessions of the semester. Perhaps this exact exercise was right at my skill level and allowed me to see the “adjacent possible” in this particular project.
I also generated dozens of different pieces of generative art using my own photos and scenes from Hubble Space Telescope and the Star Wars moves. Some of the images would make great posters once SVG could be exported for large format, vector images. I’ve run across a library but did not implement file export to PNG and SVG. The images can be downloaded using right-mouse-click.
Experiment 1:
Fullscreen low poly gradient
Just a simple low poly gradient. After Justin suggested Delaunay triangulation to create low-poly art, I created this fullscreen gradient with a random spread of points to create the triangles.
Experiment 2:
Slider Controlling LowPoly Creation
The next step was to preload an image. With a slider set for a minimum number of triangles, the user could then adjust slider to control the number of points that were saved to an array and used to triangulate the image. The challenge with this experiment was to use the PolySides function so that discreet sections of the triangles could be evaluated to draw the average color from beneath. This creates a pleasing patchwork. Each time the slider is moved, it immediately recalculates the entire canvas to create a new polygon pattern.
Experiment 3:
User Image Upload/User Drawing
An extension of Experiment 2, this experiment allows users to upload their own image and then start adding points for triangulation.
Experiment 4:
LowPoly Animation
One of the most exciting experiments involved taking the slider to allow users to choose the number of triangle. The algorithm then takes the number of points and randomizes the positions of the triangle apexes. This produces a low-poly animation.
Experiment 5:
Point Sprayer
In a move to create a robust low-poly drawing demo, I wanted to allow users to be able to add points individually, erase points and spray random points to aid in image creation. This example uses a set “brush” size of 100px to create a spray radius. Points are indeed added to the points array at a coded 20 points. But the example falls short of adding the point to the canvas for triangulation.
Experiment 6:
Drawing and Layout
A mockup and partially working example of a final idea to allow users to save images, turn off points and triangles, all to give more control over the drawing experience.
References:
With help and inspiration from these sources
- https://en.wikipedia.org/wiki/Delaunay_triangulation
- https://mapbox.github.io/delaunator/
- https://github.com/mapbox/delaunator
- https://observablehq.com/@cpreid2/p5-js-starter
- https://trianglify.io/
- https://github.com/victoraugust/js-lowpoly
- https://codepen.io/cojdev/pen/vgmxmj
- http://low-poly.coolvr.tech/#/
