As I continued to develop the digital tools I reflected on other possible designs for the rest of the site. My intent with the site is to put the focus on the tools themselves, in my original design I was doing this by stripping back the navigation to the simple sidebar. With some development of the tools, and with a desire to reinforce the unexpected pillar of the project, I decided to further refine my site design to have the focus on the canvas of the tool by placing it on the left portion of the screen and to push the menu/logo/text content to the right. Conventionally western users read from the left to the right, starting in the top left corner, normally this is what informs the placement of a sites logo being in that space.
I have also begun to experiment with different brand colours.
I have added the required pages to the site and in most places put some indicative content. Displaying the explorer tool on the wordpress site was problematic but I was able to covert the files to be php and then include them in the sites theme so that they could be accessed and displayed correctly. Currently the canvas of the explorer is set to be the width of the page which is causing it to overlap with the the hand column, this will need to be fixed. The Randomiser works but I need to resize the frames for each random letter to fit more on the page, as well as add some kind of loading function to them. The shop is functioning with some dummy projects and overall the basic framework is coming together.Further code has been added to the explorer sketch to allow it’s canvas to be defined by the size of the container it’s been placed in. In this case that’s the large column that takes up the left 2/3s of the page. Though it doesn’t resize when the browser window is moved, it does resize when the page loads which corrects a lot of display issues on mobile. Opening the menu on mobile doesn’t draw over the canvas so I might be able to move these controls to an offscreen menu, accessed by a button press in the same way as the main site menu when on mobile.
Next steps
add loading image behind p5 sketches
add random colours to randomiser and explorer
change size of randomizer to fit more on a page
move explorer controls to offcanvas menu (like main menu) when viewed on mobile
decide on relevant explorer stamps and tools
increase frame rate of explorer to get smoother lines for tools
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].
Rando-5-1 Add an optional ODD Foundry logo in the lower corner when exported.
I attempted this and although I was able to get a logo to appear when a button was toggled it would not appear on the downloaded image which was the overall aim. In the process of working this out I was able to get the icons to appear at a higher quality though.
Rando-5-2 Lower size of components to keep edges crisp as on some they are displaying pixelated
Rando-5-3 Have sketches refresh at regular intervals
Rando-5-3-1 Have sketches refresh at random intervals
Randomiser in use on mobile
Reflection
The use of colour on the background helps to define the viewport in which the forms should be view. As does the choice to keep all the letterforms black as it unifies the disparate shapes into one object that is then perceived as a single form. By placing multiple variations next to each other I believe they are easier to perceive as letterforms as the brain tries to read the collections as words.
References
BROOKS, L., 2020. How to make a button that is an image in p5.js [viewed July 14, 2021].
PIECESOFUK, 2021. Font Awesome and p5.js [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.
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].
I had previously registered the oddfoundry.com domain and hosting at the start of the project and had set up a temporary holding page that will show to users if they access the site before I have launched it. This allows me to work on the site directly online and very easily test the site on multiple devices as I progress through the coding. Knowing that I would want complete control over the design and functionality of the site I opted to build it using the WordPress content management system and extend it’s functionality via the use of plugins, in particular WooCommerce that allows me to run a self hosted shop that can sell digital and physical products.
Left. Setting up the hosting Right. Setting up WordPress and WooCommerce
Installing WordPress is relatively easy and once set up on my hosting I began to install the required plugins and complete the set up procedure for WooCommerce. This involved creating a series of dummy products and pages of content so I that I could ensure the site was displaying content correctly. I also set up the site with an SSL certificate for security which will be needed if I plan to sell products on my site. During the Digital Media unit I had made use of the Bootstrap framework and I found it sped up my production time. As stated on their site, Bootstrap is “the world’s most popular front-end open source toolkit” (2021), html by itself doesn’t allow you to create, style and manipulate grids/buttons/drop down menus easily, by using Bootstrap as the basis I can make use of these components quickly and style them in the way I want them to display. Alongside Bootstrap I made use of a WordPress theme template generator called Underscores that produces all the standard starter templates for a WordPress site that I may need. By combining the Bootstrap framework with the Underscores starter templates I ensured I had a solid foundation to then build my custom site.
Above. The Bootstrap website showing examples of the different components built into it’s framework (2021)Above. Integrating Bootstrap and the Underscores core coding required some work removing and recoding certain components, primarily the menus and headers. Both included some code to make these display correctly on mobile sites, in most cases I opted for the Boostrap code.
Typography and Layout
With a basic framework in place I began integrating my initial site designs into the site. The lefthand column is set to be static, so that it remains in place as the user scrolls down the page. The site is responsive, with the lefthand column and main content area resizing in relation to the screen size. When viewed on a smaller device, like a mobile phone, the design reconfigures to be a drop down menu from the top of the screen. Adobe fonts allows me to make use of various licensed typefaces, in this case Futura PT and Baskerville PT. The Bootstrap example page provides a list of dummy text to test the application of the different typestyles so this worked well as a sample sheet of how the type displays. Baskerville, visually appears very small even at a type size that would normally be standard for digital work so I increased the sizes proportionally.
P5.js
A primary component of my site will be the ability for users to explore the manipulation of letterforms. To do this I am going to use, the open source JavaScript library, p5.js. I have previously made use of this in my Digital Media unit, creating various prototypes for drawing on screen and arranging components via controls on screen. Using libraries like this within more complex hosting environments and more complex sites such as my planned site can be problematic, with different ways that hosting servers are set up interfering with the displaying of the p5.js code even before I’ve be able to test whether the code has be written correctly. With this in mind, once the site was set up with a basic design the next thing I did was attempt to duplicate some of the more basic p5.js experiments from the previous module on this new website. Each experiment that I made in the Digital Media module increases in complexity and use of different technical features of p5.js, so they will be a good way to test the new site. Each p5 experiment is made up of a few files, the experiment itself (called a sketch and saved as a .js file) and the html page where it is displayed. As my tests progressed the interactions between the .js and .html file become more complex
Above. The home screen of the original Odd Foundry site made use of a script that showed randomly sized squares over the gridded background, these squares followed the users cursor. Here you can see I have duplicated this code onto the new Odd Foundry site. Other than some sizing issues, it appears to have worked correctly. This would appear to indicate the server is set up correctly. Above. For my unsuccessful second test I tried to integrate the most complex p5.js experiment I had created, Prototype-2, into the new site.
Unfortunately this was where I ran into my first major problems with only the basic outline of the experiment showing up with none of the sliders nor the canvas to draw upon displaying. This experiment needs the .js file to interact with the html file in a much more complex way than the last experiment as there are sliders that the user can alter to manipulate the size of shapes. Some further tests will need to be made to correct this. With that in mind I research some different ways to integrate p5.js into a WordPress site.
Problem Solving
p5.js Block
Searching on Google suggested using a plugin called p5.js Block (mapk 2020). The current version of WordPress uses a system called the Gutenberg Block editor to allow writers to add different blocks of content to a page (for instance a heading, an image, a gallery), the p5.js Block plugin adds a block specifically for holding the p5.js code. My first test involved me adding the same random squares experiment from the previous tests. This was unsuccessful.
Above. Using the p5.js block to add p5 code to page.
However with some adjustments to the code I was able to get it to run a different experiment, surface-3, in which a grid is generated on the page that a user can draw upon and edit the size of.
Above. Surface-3 experiment running on the new Odd Foundry site via the p5.js block plugin
As I gained confidence I moved to a more complex experiment, surface-4-1, which is based of the last experiment but with the inclusion of a slider that allows the user to change the size of the grid. This was also unsuccessful and didn’t render correctly. On scrutinising the code that is produced by the p5.js block I could see that it was misinterpreting parts of the code and converting the quotation marks that delineated named parts of the code into numbers, causing it to not render properly. All the more complex experiments make use of this ability to name components of the code so if p5.js block cannot make use of that feature I may need to try another option.
Above. Here you can see me highlight the code that p5.js block is misinterpreting
iFrame
When researching methods of adding p5.js to a site I checked the Processing forum (the language that p5.js is based on) and found a jobhas suggests making use of iframes (2017). An iframe is a component in html that allows you to view another pages content by embedding it on your own page. Initial tests seem promising with the embedded experiment from my old site showing up correctly.
Above. Using an iFrame to pull in content from my previous test site
I next tried to embed an experiment that was hosted on the current hosting. Although the sizing of the frame was cut off, the rest of the content displayed and functioned as expected. The only worry was that it was now showing the page as “not secure”, as indicated by the message in the address bar. The site is running with SSL certificate so this should not be showing. Thinking that it maybe because of the extra scripts running on the page I tried directing the iframe to a basic page on the site, however this still showed as “not secure” so it seems the issue is with the iframe itself.
Above. Using an iFrame to pull in content on the current siteAbove. Using an iFrame to pull in content from my current site to test if the “not secure” notification is removed
Some further research into iframes and security, as presented in the article by Nada Rifiki (2020) on the subject, indicates that there can be issues with iframes showing a site as insecure. However she indicates that as long as the page to be embedded is accessed via HTTPS, as well as the main page being HTTPS there should not be an issue. Both pages are from what I can ascertain secure and accessed via HTTPS which makes me think this may be a server configuration issue that I need to question my host about.
That issue aside, the iframe method does appear to be successful in its application. Further testing with a very complex page with multiple controls all appears functional with all the main features of the page working even when embedded. With that in mind I will push on with designing the site using the iframe method where needed whilst I query the host on the “not secure” issue that’s noted above.
Above. Using an iFrame to pull in content from my previous test site with a high level of complexity.
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].
