My aim with this tool is to create a means of quickly generating letterforms that can then act as the inspiration behind further typeface designs. The canvas of the sketch will display a selection of random components, creating a random letterform. The user should be able to generate multiple versions of letterforms via a button press and easily save/export any that they wish to keep.
I based the initial collection of components on the serif and stroke variations that I have create previously as there is significant variation in the design of each but the dimensions of them are similar enough to get them to align with each other.
In my previous experience coding in this way in the Digital Media unit I found it helpful to break down my aims into a series of stages, adding complexity as I progress to an end point. The naming convention of each is toolname-objective#-variation#.
rando-1-1: Create a tool that displays a random shape on the canvas in a random location
https://editor.p5js.org/markmadethis/sketches/452N0nCqi
rando-1-2: Add a “save image” button
rando-1-3: Add a “generate new” button
rando-2-1: Create a tool that displays a random shape on the canvas in a random orientation.
rando-2-2: Create a tool that displays 4 random shapes on the canvas in different places
For this version I had problems getting the server to refresh and display the most current version of code I had written, adding a version number to the script seemed to correct that issue. I also noticed that while displaying 4 random shapes in random positions, the shapes weren’t changing each time I clicked generate (though their random position was). I reworked my original code to make use of an array to store the images and then randomise through them. One apparent benefit is that I can store different components in different relevantly named arrays (ie serifs in an array called “serifs” and strokes in an array called “strokes”) and then generate random serifs or strokes from each as needed, this should give me much more control over how to display them. I integrated my previous work on the “generate” and “download” button into this sketch as show below. (rando-2-2-1)
Building on this code base I then tried to code it so that multiple random components could be displayed.
rando-2-2-3: Create a tool that displays a random components on the canvas in a predefined position and orientation.
I had some trouble with this design making the lower serif align to the bottom of the stroke. One aim of coding is to keep assets to their minimum, so rather than creating a serif in every orientation and ending up with a great many jpeg assets the intent is to use the same asset and then transform it’s orientation via coding it’s position on the canvas. I originally attempted this via a rotate function (in a version called rando-2-2-2) but this method continuously rotates it off the canvas so I have not included this as a video. The next method used a scale function, the asset is set to have a -1 scale along the X or Y axis with the resulting image appearing to have then flipped.
rando-2-3: Create a tool that displays a random components on the canvas in a predefined position and orientation. Have the background colour change with each version.
Utilising an array of predefined colours (in this case three) I can randomly cycle through them each time a new one is pressed.
rando-3: Display multiple versions of the Canvas on the same page
This was much harder than I expected. I had hoped it would be the case of simply duplicating the sketch multiple times but due to the way p5 works with it’s default being that everything is specified at a global level (McCarthy 2020) it meant each of the variables in the sketch then needed a prefix to determine which version of the sketch they related to. This lead to problems with getting it to run as intended as the random displaying variables did not work with this prefix. After a few different attempts I settled on the solution of using multiple iframes on one page with the result being a page filled with multiple versions of the sketch that can be interacted with independently.
Reflection on current prototype
I have made use of the random functionality in p5 on previous projects but exploring it in this was has identified it’s benefits and limitations. There are a few ways to create random outcomes, 2 of which I have explored above. The first is choosing a random integer between a defined amount (ie. a number between 1-200) that can then be applied to a value (ie. the R value in a RGB colour code). This results in a huge amount of variation but with little control over the outcome, as shown in rando-1-1 with it’s placement of shapes on the canvas. Though interesting to play with the resulting forms are rarely going to be complex enough to be perceived as letterforms without a huge amount of them being produced. The second method I used in later experiments created an array of values (in this case colours and components) and then randomly selected one to use. This gave a higher level of control in the forms created and will be the method I continue to make use of.
On reflection, though the Randomiser technically works as I had hoped, my selection of components were too specific and too limited (serifs and strokes) which meant each had to be coded to appear in a defined space so there was very little variation in the form that was created. The resulting forms are an exploration of the technology but not a successful exploration of the concepts of shape perception and recognition.
Alongside this coding experimentation I have also been working on my collection of stamps and I found the most interesting forms were the ones created out of more substantial and unexpected shapes such as these g’s below.
Something I found from my early experiments with the elementary forms was that the forms created more often became a collection of shapes that followed an outline of a letter, rather than a series of shapes that defined the design of the letter. This is something I need to keep pushing for this tool, with the selection of components as they are (serifs and strokes) I will just be coding them to appear in defined co-ordinations and thus will be controlling the resulting form too much.
References
- HAPPY CODING, 2021. From p5.js to Web Dev [viewed July 14, 2021].
- JOREA, 2021. Random Images [viewed July 14, 2021].
- MCCARTHY, L.L., 2020. Global and instance mode [viewed July 14, 2021].
- MCKAY, J., 2021. Multiple p5.js sketches in separate divs on one HTML page [viewed July 14, 2021].
- P5JS, 2021. p5js.org Examples [viewed July 14, 2021].
- PARRISH, A., 2019. Media [viewed July 14, 2021].
- PROCESSING, 2020. Processing Github [viewed July 14, 2021].
- RIVKIN, J., 2020. p5.js – Random Image from Array [viewed July 14, 2021].
- SALERNO, M., 2017. How to add version number to HTML file (not only to css and js files) [viewed July 14, 2021].
- SAYANTANM19, 2020. p5.js | saveCanvas() Function [viewed July 14, 2021].
- THE CODING TRAIN, 2021. Reset Button [viewed July 14, 2021].