Category: Unit 1

Excerpt of the project brief

Next, as a way of continuing this critical examination of your tool or medium, develop an iterative experiment that ‘hacks’ it to do something that it is not intended to do.

Consider how you can subvert its primary function, use, or context—in other words, what it does, how it does it, or what it does it for—as a way of interrogating it.

My process

The example of moving images from my iterations

My aim is to hack the tool by subverting its main function, ‘code’, to visualise itself. Since code is a hidden infrastructure, I wonder what it would look like if I generated code that appears as the outcome.

Note: Please refer to my process presentation for the explanation, as I primarily intended to share examples of my moving images. I will update the blog once I have more time.

Iteration set 01:
Translating the ‘translate()’ function and its example code

Iteration set 02:
Deconstructing the syntax elements of code

Iteration set 04:
Over-compressing the code from the replicated project

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.

Excerpt of the project brief

Find a project made by someone else that makes effective use of this tool or medium. (Make your selection in advance of your first tutorial on Jan 16, and bring it to share and discuss with your group.)

My Reasoning

Before I introduce my chosen tool, I’ll briefly explain why I selected it, based on my insights from Methods of Translating. During the visual exploration for this brief, I realised the limitations of the tools I usually use, like Illustrator. I wanted to visualise the ‘collapsing’ of graphic elements over time, but static software couldn’t fully convey that. 

This led me to experiment with creative coding. Since I had no prior experience, I utilised AI, or what some call ‘vibe coding,’ to develop a generative tool. Then I developed a concept for this tool that allowed me to upload images and text, which would then collapse under adjustable parameters I set. I used the resulting outputs as graphic elements in my publication.

An interface of a collapsing tool

Example of how I use graphic elements from that tool in layout and publication design

This example from my publication investigates the earthquake in Thailand that caused a building to collapse. I found this approach effective for creating graphic components because it allowed me to develop a repeatable system that can be used across many visual elements, saving me from crafting each one manually. Using a generative tool also maintains consistency in the artwork and makes it easier to extend into other media in the future.

The chosen tool

That project ignited my curiosity about what I can achieve through creative coding. I aim to learn the fundamentals of coding and expand my skills using p5.js, a library and tool designed for learning coding and creating visual art.

I believe self-learning coding will benefit me more than simply vibing with AI. I’m also curious about how it uses language to produce visuals instead of drawing with vectors.

The chosen project

The project I selected to replicate is a generative poster app created by DIA Studio. It demonstrates an effective way of using code to generate endless compositions. The app allows control over various parameters, such as line thickness, dot size, density, and motion, making it a valuable reference for me to learn how to draw basic lines and shapes programmatically and how a visual system can be managed through these controls. I plan to first replicate the visual output and then adjust the parameters. I’m unsure how difficult this will be and may not implement all functions, but I will do my best to complete it within one week.

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