Initial Explorer Design

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