Project #02

Analog Algorithm

Description

This is a generator, creating shapes, based on fixed points of diverse grids. The number corners of the shape depend on the x-position of the cursor, while the far left equals 0 anchor points and the far right all of them. The specific points get selected randomly. Clicking triggers a new shape while keeping the other parameters.

Try out the different grids and save formal inspirations for future purposes. Find the table of usage below ↓;

mouseX	Defines the number of points within the vertex
mouseClick	Redraws the shape, with the current point parameters
← / →	switches between the different grids
H	hide / show the grid dots
C	select a random color for the shape
R	change the color back to the original red
S	Saves the current state as png

Design Process

Inspired by Analog Algorithm by Christoph Grünberger, I decided to create a generator, generating different shapes within a grid. I started with a dot grid, simply generated by the number of points in a selected distance, that would conclude in a squarish pattern within the canvas. These profoundly generated points were saved within an array, which serves as the baseline for all other elements of the sketch. From this variable the visual dots get created, but also the points selected for the vertex shape.

After playing around, to see what kind of shapes get output, it quickly came across, (1) that using a point multiple times makes the shape unnecessary, visually complex, and (2) that the grid itself seemed rather boring. (3) Additionally, the endless changing of the whole shape in the quick framerate, made it hard to focus on the different shapes, making it impossible to realize what is going on in the sketch.

Taking these learnings into consideration, firstly I played with the framerate and form array, slicing the array so that no point can be used twice, and thus making more use of the whole grid. Secondly, the shape should be generated randomly, however, the process of generation should be triggered manually. I decided on two ways of redrawing the shape: clicking (to receive a new shape with the current parameters) and change the number of points that get connected (adjusting the parameters of the grid), as both seemed like useful ways.

"Yellow Gameboy" by Mike Meyers, downloaded on Unsplash

As proposed by Christoph Grünberger, I took a technical, physical object and selected “form-bounding anchor points” from an image of it, to create a more interesting base grid. A Gameboy Color seemed like an interesting, yet simple object, that could serve as a great base grid.

In the tool Figma, I pushed the dots around, where it felt right, trying out different variations of grids. Creating a vector shape to connect the dots, I got a feeling if the generated grid would work out the way I wanted it to be. Afterward, the points in the Figma frame needed to manually be transferred into a database, so the points could be generated by P5, enabling the system to have multiple grids to choose from.

Using other keypress events (H,C, and R), I wanted to give the sketch more variations within the shape, by allowing to change the color randomly (and back again, if wanted) as well as removing the dots of the grid. This required to have the shape saved in a variable, as the changing other parameters force to redraw the whole sketch, initially destroying the generated form.

Finally, I decided to give the user a little bit of information about the current state, adding text about the state and grid type. Finally, to use that generator to get inspired, the user can press the S key, to save an image of the sketch.

Addition: To easily create more grids, I built a Figma plugin that generates an array of points to copy-paste into the P5 sketch. This plugin allows for the same generation of shapes within Figma, enabling users to afterward manipulate the vector as well.

Reflection

I think it is quite interesting which kind of shapes can be generated and spark new ideas for other design work. Generally, with fewer dots, the forms that get created are more appealing and inspiring as the ones that, let’s say, take more than a third of the points, as they seem a little bit to overloaded, and not a clear shape is emerging from the sketch.

Clicking through the sketch, a variety of new approaches are created, a lot of ones that I would not have considered to create myself. Having also now created a system that easily allows for other grids, I can only imagine how new generators can be built easily. The plugin allows for quick iterations of the shape and even manipulation of the vector afterward. I can imagine using this tool in the future more frequently!