Category: Journal

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].

To continue developing the Randomiser, based on my reflection in the last post on the subject, I will now experiment with using the tool to display a random selection of grouped components. The aim of doing this is to increase the occurrences of components intersecting with the hope that this creates forms that, though randomly generated, will be easier to perceive as letterforms.

The coding of the tool will remain the same while I focus on the creation of the combined components to be used as assets.

New Art Board

For these designs I standardised my artboard in Illustrator to be 432px x 432px so that all the files created would be the same size. This allows it to be split into a 6×6 grid of 72px squares. These squares can be subdivided into a further 6×6 square. A grid that is a multiple of 6 is favourable to a grid made of multiples of 5 as the grid based on 6 can be subdivided more times. This should allow for components to align with various grid lines as shown below.

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

• 

Reflection on current prototype

Overall I am very excited by the prospects of developing this tool further. The initial tests have produced some dynamic and interesting forms. If I have the time I may rework some of the unsuccessful components such as the separate serifs as I think in this iteration of the tool they often end up floating as disconnected parts. But overall my push now will be to refine some of the layout and design problems as identified below:

• Add more colours to the background
• bring size of components down slightly to keep edges crisp as on some they are displaying pixelated
• Investigate adding an optional ODD Foundry logo in the lower corner when exported.
• Restyle buttons and perhaps change them to icons

Explorer
A drawing tool with all the different components available as stamps/brushes, it is about conscious, exploratory creation. Like a typographical sketch or doodle. The resulting form can be saved as a jpeg and then further developed in other relevant programs.
This tool aims to allow the user to explorer the components in the same way as they would experience the shapes as stamps.

Explorer 1 – Make a canvas where a single component can be stamped on it

Explorer 1-1 – Allow the user to clear the canvas and to save the canvas

Explorer 1-2 – Allow the user to change stamps via keyboard

Explorer 1-3 – Allow the user to change stamps via clicking on an icon

Explorer 1-3 – Show the current stamp in place of the cursor

Explorer 2 – Allow the user to rotate stamps

There is a small selection of stamps to draw with. The user is invited to finish the letterform.

explorerb-1 – Tool drawing on a separate canvas based on Tool 1

explorerb-1-1 – Integrate refresh and save buttons

explorerb-1-2 – change tool via button press

explorerb-1-3 – use images as tools as well as vectors

explorerb-1-4 – Show tool where cursor hovers

explorerb-1-5 – move controls to control block

explorerb-1-6 – allow tool to be resized

explorerb-2 – allow canvas to fit screen size

explorerb-2-1 – Display Random starter images on canvas

Reflection on Current Prototype Explorer

Whilst I ran into some early problems with the way that p5.js deals with the arrangement of images on a page and how they follow a cursor, I’m now happy with the current state of the prototype. Currently it allows the user to draw on the canvas with a selection of different tools and to download the results.

The next stage of the design process if finalising the main site design and then make further refinements to this prototype. Currently the prototype above is coded so the canvas should expand to fit the screen and the controls are in a separate block of html. This should mean I can integrate them into the overall Odd Foundry site design easily. Once added to the main site I can focus on testing the site with users as well as choosing which components should be available as stamps.

Next stages:

• Refine Odd Foundry Site Design
• Define colour palette and integrate into prototypes
• Integrate prototypes into Odd Foundry site
• Test Randomiser and Explorer digital tools with users
• Collect feedback from tests and further refine digital tools
• 3D print selected components and photograph for Odd Foundry site

---

References

• KANCHAN_RAY, 2019. p5.js | str() function  [viewed July 22, 2021].
• SHIFFMAN, D., 2021. Learning [viewed July 22, 2021].