CTRL+ART+DEL: Four Studies in Computational Form
2024
Team
Mirza Mas’od
Syafiq Shukor
Computational Design, Data Visualisation, Generative Art, Creative Coding, Physical Computing
A series of four computational design studies, each translating a distinct data type into visual form: physiological signals — pulse, breath, blink — collected from the collaborators themselves (Study I); urban audio environments mapped against the body's rhythms (Study II); generative noise systems classified as biological specimens (Study III); and physical gesture captured through a hardware-embedded artist's paint palette (Study IV). Exhibited at LASALLE in 2024 across four simultaneous screens, with printed outputs laid across a shared table.
Data is always situated. Physiological data, urban data, algorithmic data, physical input — all of it produced by bodies in specific environments at specific moments. Representation is an act of making that situatedness visible. CTRL+ART+DEL is four studies in what that looks like when the data and the body are the same thing.
The project was exhibited at LASALLE in 2024 as part of a computation in design module assessment.
Study I — Pulse, Breathe, Blink · Physiological Form
The biometric data in this study was collected from the three collaborators themselves — myself, Syafiq, and Kanupriya. Pulse, breath, and blink rate: three involuntary autonomic processes, things happening in the body that cannot be consciously controlled and can barely be consciously observed. The study does not measure anonymous research subjects. It measures the people who made it. The body that generates the signal is the body that built the system that records it.
The formal constraint is drawn from Armin Hofmann's Graphic Design Manual (1965): begin from fundamental shapes — circle, square, triangle — and build complexity through computational technique. Each of the three physiological rhythms is translated into visual form through four different p5.js algorithms — cellular automata, Turing patterns, particle systems, Perlin noise fields — producing twelve outputs in total, arranged across three rows in an accordion-fold zine: PULSE, BREATHE, BLINK, four images per row.
The outputs range from Perlin noise grain (irregular, speckled, resembling the variability of a heartbeat) to Turing reaction-diffusion fields (dense overlapping concentric rings, resembling interference patterns in fluid) to flowing directional waves (the most meditative — a field of short curved strokes moving like fabric or breath). The progression within each row is from simpler to more complex: the same physiological signal, read through increasingly intricate generative logic.
The study's physical form mirrors its conceptual argument. The poster carries a transparency overlay — an acetate sheet with Hofmann's concentric circles printed on it — placed above the generated output. The source form does not disappear into the complexity it produced. It hovers above, visible, in a different layer of the same object. The fundamental shape and its emergent transformation occupy the same physical space at different depths.
Study II — Places, Spaces · Embodied Time
Study I measured the body in isolation. Study II takes those same rhythms — pulse, breath, blink — into the city, and asks whether the city changes them.
Three field environments, three times of day, three acts. Each act pairs real footage of an urban location with a p5.js generative system driven by audio recorded there. The audio is not accompaniment — it is the primary data. Field sound from each environment undergoes algorithmic transmutation, converting acoustic input into visual output calibrated to a specific physiological rhythm. The body's internal clock is rendered alongside the city's external one.
The visual language of each act is morphologically precise. ACT I — Train (Morning) / Pulse — produces red and pink spherical particles with motion-blur tails, scattered in explosive bursts from within and around the footage frame: staccato, pressured, cardiovascular. ACT II — Beach (Afternoon) / Breathe — produces blue and teal blobs, rounded and diffuse, floating across and beyond the image: expansive, unhurried, respiratory. ACT III — Parkland (Night) / Blink — produces dense grids of green oval lenses arranged in tight, metronomic rows, filling the entire frame around the footage: regular, rhythmic, stroboscopic. Where Pulse is explosive and Breathe is fluid, Blink is structural — the visual system becomes a lattice, not a field.
The colour system runs consistently across both the video pieces and the printed output: red for cardiovascular, blue for respiratory, green for ocular. The printed poster — a large-format data visualisation — plots all three generative sketch outputs along a single 04:00–23:30 timeline, divided into Cycle I: The Train, Cycle II: The Beach, Cycle III: The Parkland. The timeline is annotated with specific observed events: "Nascent phase of commuter influx," "Zenith of AM peak period," "Aquatic recreational activities," "Activity deceleration phase," "Onset of post-work utilisation patterns," "Zenith of evening social interactions," "Return to baseline low anthropogenic activity state." The red, blue, and green spiral forms vary in scale and density as they move down the timeline — the body's rhythms changing as the city's conditions change around them.
The poster's descriptive text frames the work in pseudo-scientific register: "a matutinal rail transit setting," "a meridional littoral zone during peak diurnal hours," "ocular nictitation frequency," "aeolian sources," "urban-biological rhythm synchronisation." Whether environmental and physiological periodicities harmonise is posed as a legitimate research problem, and the outputs presented as data.
Study III — Proto- · Procedural Genesis
The zine opens with a definition. Proto-: a prefixal element denoting primordial precedence, inchoate manifestation, or rudimentary instantiation within a taxonomic or developmental continuum — the nascent form from which subsequent iterations derive. The study uses this prefix as its method.
Proto- begins with noise. Perlin fields, particle systems, fractal functions — the most elementary computational inputs available in TouchDesigner — are run until they produce form. The question is what the minimum produces when left to run. The answer, across three distinct generative systems, is something that looks like life.
Each system generates a different register of the biological. The first produces dark blue smoky forms — tendrils of light moving through particle clouds, resembling electron microscopy of atmospheric phenomena or cellular filaments under UV. The second produces red and orange dust nebulae — dense fields of monochromatic particles drifting in gravitational masses, indistinguishable from astrophotography or blood-cell scans. The third produces green and white multi-spectral particle explosions — bursting outward from a central mass with spectral shifts from cerulean through viridian. All three systems share the same origin: noise functions and point transforms. None of their outputs look like code.
The generated forms are classified. Nine specimens — A through I — are catalogued in a field guide table with five columns: PRIMARY STRUCTURE, MORPHOLOGY, CHARACTERISTICS, SPATIAL DISTRIBUTION, SURFACE TOPOGRAPHY. The terminology is biological. Specimen A: Heterogeneous particulate agglomeration / Coccoid consortia / Polychromatic (erythroid, viridian, cerulean). Specimen D: Reticulated vermiform architecture / Hyphal-like network / Monochromatic erythroid on azure matrix / Anastomosing mycelial formation. Specimen I: Complex tubular metacolony / Branching stromatal network / Monochromatic erythrogenic pigmentation / Reticulated three-dimensional architecture. The specimens are not described as outputs. They are described as organisms — discovered, not made.
A lineage diagram traces which generative seeds connect to which evolved outputs, showing branching divergence across the nine specimens from shared computational ancestors. The diagram reads as evolutionary phylogeny. A mirrored full-bleed spread presents one specimen symmetrically — bilateral symmetry rendering the output anatomical, closer to an x-ray than an artwork.
The printed zine is the study's primary artifact. Its design is spare: a thick black column on the left spine, the title and credits set small, the images displayed against white space. The form is scientific monograph. The content is noise.
Study IV — Blob.io · Physical Gesture
The interface is a real artist's paint palette. Not a button, not a custom PCB — a traditional wooden oval with a thumb-hole, the universal symbol of the painter's hand, with Arduino circuitry embedded inside it. It sits on its own stand, wired to the laptop, looking exactly like what it is. The transfer is literal: the painter's tool, now running code.
Pressing the palette's embedded controls generates digital blob forms in p5.js. Perlin noise governs each blob's evolution — organic fluidity built into a purely computational system, producing marks that grow and drift rather than appear and stop. Brush scale is controlled by a second input. A third cycles colour palettes. The marks accumulate: each interaction leaves a form that persists in the composition, building density over time. The final output is a layered digital painting — not a single generated image but an accumulation of gesture, each input traceable in the mass.
The colour system is the study's most visible variable. The same blob morphology appears across nine distinct palette states — each producing a different emotional register from identical generative logic. The outputs read as paintings. The palette decides which painter made them.
The study extends beyond the screen into a complete fictional exhibition identity: blob.io: Art Of The Computer, staged as a real show at ArtScience Museum, Marina Bay Sands. Admission tickets are designed and printed with generated artworks on each — no two identical. The museum's actual branding appears on the reverse. Date: 01 SEP 2024. S$24.00 ADULT. Ticket NO.: 101010 — binary for 42, computer language formatted as a serial number.
Context
Boden, M. A. & Edmonds, E. A. — "What is Generative Art?," Digital Creativity 20(1–2) (2009)
Bohnacker, H. et al. — Generative Design: Visualize, Program, and Create with JavaScript in p5.js (2018)
Hofmann, A. — Graphic Design Manual: Principles and Practice (1965)
Klanten, R. et al. — Data Flow: Visualising Information in Graphic Design (2008)
Levin, G. & Brain, T. — Code as Creative Medium: A Handbook for Computational Art and Design (2021)
Lima, M. — Visual Complexity: Mapping Patterns of Information (2011)
Maeda, J. — Design by Numbers (1999)
Reas, C. & Fry, B. — Processing: A Programming Handbook for Visual Designers and Artists (2007)
Shiffman, D. — The Nature of Code: Simulating Natural Systems with Processing (2012)
Tufte, E. R. — The Visual Display of Quantitative Information (1983)
scroll to top