Excerpt of the project brief
Remake this selected project as best as you can, with as much fidelity as possible. Through this task you’ll be primarily engaged in iteration according the first definition shown to the right.)
iteration(1): refining to get a singular desired output
My process
My final iteration
You can access my code in p5.js here by clicking the button below, and run it by clicking the play button on the right side of that page.
Reference
Dia Studio (2025) Us, Me, You, Them, Here, There [Digital art]. Available at: https://www.instagram.com/p/DOeV-szEnZm/?hl=en&img_index=1 (Accessed: 15 January 2026)
Questions
What’s unexpected about this thing you just made?
- The unexpected shift was realising that organising code became part of my creative process. As the sketch grew complex, my focus shifted from visuals to code, which I constantly restructured, renamed, relayouted, and grouped, not just for maintenance but to improve clarity and revisitability. The craft was found as much in the clarity of the structure as it was in the visual result.
- In moving from Illustrator to code, coding required explaining the logic and rules to the computer, shifting my mode from making images to writing clear instructions. I had to tell the computer to draw, or to express what could be for me. This shows coding as a form of authorship, or perhaps collective authorship, since I adapted from others’ projects and resources. Ultimately, the code had to be clear and make sense for the computer to execute, yet human enough for me to return to, reread, and continue developing with my own work.
What do you understand better or differently about your tool or medium now?
- Drawing in code is unlike drawing in Illustrator, which is just a few mouse moves with a single tool. Drawing in code for a beginner like me starts by mostly copying and pasting, with a little bit of typing, syntax that becomes a set of instructions and statements to communicate with a computer and express or create something.
- I now understand why p5.js calls itself ‘a friendly tool for learning to code and make art.’ It builds on JavaScript with its own library designed specifically for visual art. For example, the draw() function, which continuously loops, is a direct, intuitive term for creative practitioners. It also simplifies mathematical operations that would otherwise require many lines of code for full math.
- Another important realisation is that human and machine readability are not the same. When I inspected the source code, I noticed some files were hard to read because they were ‘minified’ to reduce size and load more quickly in browsers. However, for human writers and readers, features like spacing, comments, and descriptive names are essential. This led me to consider p5.js as a tool for typography and layout design.
Did it pose a particular technical challenge?
- Mastering JavaScript syntax as a new language in p5.js required constant reference to documentation to understand how functions and variables work together. It felt like opening a dictionary.
- Integrating code snippets was challenging because each addition necessitated reorganising functions and statements across an increasingly complex source code.
- The mathematical demands of this tool were significant. The project’s heavy reliance on randomness created abstract variables that were difficult to manage and link to equations, particularly challenging given my limited math background.
What kind of output or knowledge does this tool or medium favour?
- p5.js favours generative, dynamic, and interactive outputs that can produce many variations through changes in rules, parameters, loops, or randomness. Because it is built with JavaScript, the work runs in a web browser, making it easy to share and access.
What relationship does it have to graphic or communication design?
- It shifts the designer’s role from making a single polished output to programming the system that creates it.
- Unlike subscription-based software, p5.js is open-source and built specifically for creative practitioners. The functions use familiar design terms, which makes the transition from traditional tools feel easier.
- Because it’s a web-based, collaborative library, it turns design into a transparent exchange. It creates a collective space where we can learn from, share, and build upon each other’s works.
Leave a Reply