With my 4 initial tools finalised I was able to undertake a series of experiments to see how they could be used to create different forms.
Letterforms created using the Blocks
Letterforms created using the Randomiser
Letterforms created using the Stencil
Letterforms created using the Explorer
After spending time familiarising myself with each tool, I then selected one form created by each tool to then develop the start of an alphabet from. The results were very promising and due to the modular nature of their creation I was able to expand out from the initial letterform into other letters very quickly. Though each set would need further refining and standardisation, to make it a typeface rather than just a selection of an alphabet, I am excited to continue to experiment with the tools I have created as part of this project after the submission. These forms have been evaluated as part of the report.
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
While working on this version I ran into some issues getting the stamps to work as desired due to the way the components were centred on the cursor (on the top left rather than in the centre. It occurred to me that this issue will be exaggerated once I start using more larger and unconventional shapes. At the moment the files I used are pngs whose size and width are defined by the size of the form, resulting in files with many different dimensions. I decided it was best to standardise the dimension of the pngs (in the same way I did in the randomiser experiment) and then be able to change the size of the forms and adjust their placement on the png itself so the coding for each doesn’t need to change.Here is my new selection of tests forms to use as stamps on the explorer tool. P5.js will centre the cursor on the mathematical centre of these images. In some cases the forms are mathematically centred to the canvas, whilst other like the final two are optically centred to make it easier to stamp the forms in a controlled manner.
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].
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.
Grid divided into 3 x 3 modules shows how non-symmetrical characters can be created
Grid divided into 2 x 2 modules shows how symmetrical characters can be created
Collection of components to be used to create the assets for the developed Randomiser. All are scaled to be proportional to each other.My initial selection of 100 different compositions to be combined.
With 100 different compositions created I now had to upload them to the webspace and them reference them in the p5 sketch, for the previous examples that used 12 assets I hand typed these values. To speed up this process I generated a spreadsheet in google sheets, duplicated the data I needed surrounding the file name and then exported the sheet as a tsv file (tab separated value file). This plain text file could then be edited easily to correct any format inconsistencies.
The first test of the sketch running 8 timesSecond test, I’ve added another canvas so that it forms a grid of 3×3 so that the screen recording is easier to share on instagram.
A selection of successful forms created in the first few tests.
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.
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.
Components to use in the Randomiser
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-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].
It is clear to me that printing my blocks flat on the print bed creates blocks that are the most successful to print with, however the issue of removing them easily from the bed once printed needs to be remedied.
Normally a metal scraper is used to lever the block off the bed, one alternative option I have tried is to grasp the block with a pair of pliers and pull it off the bed that way. This method was unsuccessful, resulting in not just blocks whose sides were damaged by the pliers but some very stubborn blocks that were snapped in half, leaving part on the base and part in the pliers.
Through gaining experience with the blocks I have noticed that it is possible to position the corner of the scraper into one of the drainage holes and work the scraper underneath to free the block, though this works it also damages the surface around the hole leaving it unsightly. I resolve to redesign the body of the block to integrate some form of removable tab that after allowing me to remove it from the bed easily, can then be trimmed and removed from the block.
The results can been seen here where a small rectangle with a sloping face is joined to the block. This allows me to push the scraper directly underneath the tab to free the design from the print bed.
My first iteration was too small and insubstantial to be of use. However by scaling the tab up slightly it works in the desired way and is easy to clip off the block once cured.
I also took this opportunity to add a makers mark to the body, a small de-bossed ODD in the bottom left. It was common for type foundries to mark their wood and metal type with their makers mark, in wood type this was done on the capital A. My makers mark not only unifies the blocks as being set, it makes them recognisable as being produced my ODD Foundry. The consistent placement of the mark on the bodies will also help with orientating blocks to the be correct way up if the design has a top and a bottom.
Open Collab is a experiment in digital collaboration. Throughout the month they put out an open call for submissions on a theme that are the randomly combined with other submissions to create new works of art. This month it was the Typographic Session and they asked participants “to test, showcase and challenge your freshly designed fonts…This session the format is 1200×480px. Using your self-designed font, please try to find a word, that fills the format as good as possible. Feel free to use any language. The result will not only be a beautiful composition of fonts, but also a (hopefully) funny piece of 3-word-dada-poetry.
How to participate
Create a 1200×480px artboard
Adjust the fontsize to the height of the artboard
Find a word, that approximately fills the width
Do not leave margins – they will be added automatically
Export as jpg
Submit work
Best practice
JPG: black type, white bg
Single line of type
Try different color modes” (Open Collab 2021)
With that in mind I created my word “Inner” from my recent Tuscan experiment and submitted it. You can see it below combined with other submissions.
This was a fun experiment to be part of and was a good reason to start producing designs with my components.
The core part of my project will focus on the creation of a set of typographically informed shapes that users can use to combine into different letterforms. In addition to this I will experiment with different ways of presenting these components to users via various tools. My hope with these tools is to lower the barrier for entry. Often printing blocks for letterpress are antique and the presses expensive, leading to them being kept behind locked doors at institutions. Some new lettering apps and tools (like the apple pencil) are available for the ipad, though again this creates a large cost related barrier for the novice.
It is my hope that users will be able to make use of the Odd Foundry site to quickly manipulate and create their own letterforms out of the series of shapes I have created. To do this I will make use of my knowledge of p5.js and combine it with my current letterform designs to create a prototype interface that I can then add more forms to later in the project.
I will also continue to explore how I can create physical tools and alongside the programming of the digital elements I will experiment with 3D printing blocks as possibly exploring the use of stencils and stamps.
Above. Initial design for the Letterformer. Users are presented with a limited set of components on a canvas that they can move around via controls on the right
p5.js
P5.js can use many different types of media. In my own experiments when learning the code I used it to manipulate sound files, gifs and vectors. Much of my work on the original Odd Foundry site made use of an interface I’d designed that allowed you to move around simple shapes (squares and circles) and alter their size and shape.
Above. The finished Prototype-2 interface from my previous site
For the Letterformer I needed to be able to manipulate complex shapes created in other programs. My forms currently have been designed in Illustrator, a vector program that allows me to export the shapes in various vector formats. A search of the p5.js documentation indicates that it is possible to load an image into the canvas (p5js 2021), while a conversation on the Processing forum indicates that it is possible to make use of SVG as well as jpgs and pngs (juju11 et al. Nov 18). Although an SVG would be beneficial due to it not loosing quality at different sizes, from my experiments a png also works well and it has the benefit of being a file format I will be using to display the forms on the page anyway.
There are a few ways that I can implement the use of these forms on the letterformer:
As a series of static forms that can be rotated on an axis and moved around the page via the use of sliders
As a series of stamps that can be placed with the cursor and used to build up the letterform multiple times.
A combination of both where the series of stamps can be placed on the canvas and their size/orientation is manipulated via a set of sliders.
Using p5 to randomly generate letterforms out of a set of components.
Through my explorations it seems that rather than making one definitive version of the digital tool I can create a series that encourage users to experience the shapes in various different ways. Both of these tools make use of Drukery’s idea that by providing a user with restrictions in the way that they interact with an exercise. She believes, as do I, that “the limiting is important so that students have a very clear playground set up and it helps them to focus.” (2012). These tools also introduce the idea of perception of forms and an exploration of the Laws relating to Gestalt as stated by Martin, Buskist and Carlson in their book Psychology . Primarily the Laws of Figure Ground, Proximity, Simplicity and Similarity. The also make use of some of the concepts outlined in Kolbs Learning Cycle.
Digital Tool – Randomiser When the page loads it presents a selection of separate pre-formed components arranged in a random configuration. It can be saved as a jpeg or a “generate again” button can be pressed to present another random letterform. This tool will help with creative block and allow users to perceive possible new outcomes for letterforms that they may not conceive. The outcomes will be presented as black forms on a coloured background, this will encourage the viewer to perceive the disparate shapes as singular forms separate from the background(Law of Figure Ground). By clustering them together, encapsulated by this coloured background, the eye should look for similarities in the forms (Similarity). By placing multiple versions of these random forms next to each other the brain is encouraged to perceive in an abstract way that the forms as letters in a word (Proximity).
Digital Tool – Explorer A drawing tool with all the different components available as stamps/brushes, it is about conscious, exploratory creation. Like a typographical doodle. The resulting form can be saved as a jpeg. This tool aims to allow the user to explorer the components in the same way as they would experience the shapes as stamps. This tool explores some of the concepts outlined by Kolb in their Learning Cycle and is an example of a user engaging in the Active Experimentation and Abstract Conceptualisation part of the cycle. This tool encourages experimentation and reflection, the marks the user makes are permanent and cannot be erased so before acting they must consider where they will make their marks (Kolb 2021).
Physical Tool – Blocks
As with the Explorer, these blocks provide the learner with a set of restrictions with which they are encouraged to experiment and reflect on their results. The restrictions are evident in the materials of the blocks – they are solid blocks that cannot be warped in any way and they will be based on a set of related measurements and divisions to allow them to be combined in different ways.
Physical Tool – Stencil
The stencil provides a low cost option for a novice wanting to experiment with the forms.
References
TUFTE, E., 2012. Inge Druckrey: Teaching to See [viewed May 10, 2021]. Available from: https://vimeo.com/45232468
MARTIN, G.N., W. BUSKIST and N.R. CARLSON, 2013. Psychology. 5th ed. Harlow: Pearson
KOLB, D. and KOLB, A., 2021. Experience Based Learning Systems [viewed Apr 19, 2021].
Reflecting on the concepts that underpin the design of a logo, Graphic Designer Adrian Shaughnessy in his book Graphic design : A User’s Manual (2009, p.181) notes that “a logo will have to work on numerous platforms, mobile phone screen, website, T-shirt, and at the end of a television commercial. Increasingly, too, logos have to move. The days of the static unchanging logo have gone. Today our logos are expected to be mini movies that tell us stories.” It is this idea of combining movement with the logo to help convey meaning that I wish to explore. When creating my branding it was with the intent that it’s forms would be simpIe and flexible enough to be able to be animated in a variety of ways to further reinforce the key themes of the brand, exploration, accessibility and unexpectedness. The high contrast forms should remain distinct even when manipulated and warped.
Shaughnessy finishes his reflection on logo design by saying the “final development in logo design that designers have to take into consideration is that the era of the monolithic, unchanging logo is over. In our visual culture we want variety and stimulus. Accordingly, the logos of the future are likely to be ever changing and malleable.”. For an author writing in 2009 this has been particularly prescient as you can see this malleability being apparent in much contemporary branding, for instance in Monotypes branding work for Amsteldok as shown below.
Amsteldok Branding (Monotype 2020)
This makes use of a variable typeface at it’s core to create a system of interrelated letterforms that warp and move in relation to each other.
Above Left. An animated gif of a pencil I created in the Animate tutorial Above Right. The Animate tutorial
Previously, in my professional career I have created animations using After Effects, however I found this program to be too complex for the simpler style of animation I was looking to achieve. Instead I looked at using Adobe Animate, a vector based animation program that has a powerful suite of tools suitable to the animation and manipulating of letterforms. Having never used the software, I worked through a series of tutorials that are included with the program and created the animated pencil gif to the above right. Once I felt comfortable with the software, I experimented with some basic styles of revealing letters in the logo as seen to the right. I wanted to play with the idea of different parts of the logo revealing themselves as they are explored. There are still many things to correct, for instance the timing of the reveals and the quality of the movement, but it is an avenue I hope to continue to explore further as the project develops.
Above. My initial test animation for the ODD Foundry logo. The timing needs to be corrected as well as the removal of some thin outlines that not meant to be appearing over the logo.Above. My amended test animation. I have altered the timings at which areas of the logo are revealed.
References
SHAUGHNESSY, A., 2009. Graphic design : a user’s manual. London: London : Laurence King, 2009
