Lowtech Playground

by Liuliu Zhu, posted on December 1, 2025

Who I am

My name is Liuliu, and I am a Master’s student in Media Design at HEAD–Geneva. I have hands-on experience with a wide range of technologies, and my current practice focuses on exploring how these different media can intersect with each other and influence one another to create cross-media narrative experiences.

Idea

The idea for this project grows from both my thesis research on “playground” and the concepts we took away from the workshop such as lowtech manifesto and permacomputing.

The community playgrounds are a common low-tech physical interaction system, simple but playful, a place where rules are minimal, tools are simple, and interaction emerges primarily from bodies, movement, and imagination rather than from computational calculation or emerging technologies. Thus, limited to 128kb, I want to try to translate the physical playground idea to the virtual graphic space and focus on intuitive motions. Low-tech is not a limitation but a framework and more direct amplifier.

Process

I started working in p5.js because I already had the a series of different facilities idea in mind, and I wanted to develop it further within a single webpage. VS Code offers a clearer structure for managing multiple sketches and files, so it became the ideal environment for arranging everything.

First I gave the gif a real slide as background and tried to add motion trace on it, it turned out to be not very direct. Tim suggested to focus on the motion more and let audiences realize the physical part of facilities. Thus, I simplified the graphic design and dive into how to stimulate the physics.

Key motion of the swing is pulling the ball(player) left & right following a sine wave to make it look like “swinging”. And a constraint solver to adjust the rope.

let targetX = 64 + sin(t) * swingRange;
end.x += (targetX - end.x) * 0.05;

Somthing to mention, one moment with Tim, we tried to use the gifsicle library in homebrew to edit media, we used the script to dithering the “swing.gif”, a noisy color, slight grey color replaced the blue on ball. However, the other day, we used the same gif, same code line, the ball turned out white. I haven’t figure out the reason but will try to find why some day.

gifsicle -O3 --colors 3 --dither swing.gif -o output.gif

A favorite piece of code

I like this simple line that included in all my sketches, small but defining. It disables anti-aliasing, preserving the jagged edges of each pixel. And it’s interesting that pixels are supposed to be the most basic unit. Yet in p5.js the default is to soften them, to blur their edges, to pretend they’re not really there. The system automatically smooths everything out. I have to manually enable pixel mode with noSmooth(). This quiet paradox inside digital graphics and coding is attractive.

noSmooth();

Find me on…