I’m a backend engineer and a digital artist. My work visualizes the power dynamics of technology, such as censorship, attention, and algorithms, turning hidden mechanics into experience.
keyupang.work@gmail.com
Projects
①
2025
②
2025
③
2024
④
2025–2026
Web experience
2025
Designing for the experience of censorship
404 Cosmos is an ongoing research project and interactive web experience that responds to a decade-long shift in China’s online expression—from occasional deletion to a normalized, platform-scale regime of content control. Since the early 2010s, enforcement has increasingly been outsourced to platforms, pushing companies to build expansive infrastructures for filtering, moderation, and compliance. Within this context, 404 Cosmos visualizes censorship as a lived interface condition, drawing attention to the systems that govern what can be said, seen, and circulated.
Censorship as Infrastructure
The environment for digital expression in China shifted decisively in late 2012. Following the Decision on Strengthening Network Information Protection, the government established a new legal framework that ramped up internet regulation and made real-name registration mandatory. This control was further tightened by the 2017 Cybersecurity Law, which pushed the responsibility of content policing onto platforms themselves. This shift forced internet companies to build massive filtering systems to stay compliant. Over the past decade, the space for public speech has tightened systematically under the mandate of maintaining "social stability."
During this time, I’ve watched a wide range of perspectives simply vanish from the internet. It started with political views that didn’t align with the official narrative, but it quickly spread. Advocacy for LGBTQ+ and minority rights, critical deep-dives into government policy, and even discussions about local safety incidents are now routinely suppressed to prevent public concern. On platforms like Weibo,RedNote, and Douyin (Chinese Tiktok), this erasure has become part of the user experience. We are greeted by the same repetitive phrases: "This content is no longer available due to a violation of relevant laws and regulations," or we find that an account we followed for years has been suddenly deleted. What used to be a somewhat pluralistic digital space has been recalibrated into a highly controlled environment. Information is now filtered to ensure ideological uniformity, turning the Chinese internet into a digital archive defined as much by what has been deleted as by what remains.
A user was banned for "posting harmful political information." It lists the restrictions: no posting, no commenting, and no liking.
This account is no longer available due to a violation of relevant laws and regulations
The hashtag #gay is blocked from display on Weibo.
Account restricted on Douyin: Following is disabled, and all posts have been wiped due to a violation of social ethics and public decency
Research: The Architecture of Mediated Expression
This project began with the observation of how digital expression has changed over the past decade, shifting from simple deletion into a sophisticated, automated system. The core logic of this environment, as identified by scholar Gary King, is to neutralize the potential for collective action. Rather than just silencing individual critics, the system focuses on cutting the links between people to prevent small sparks from forming a fire.
In the study of how information is managed, researcher Margaret E. Roberts identifies three primary mechanisms: Fear, Flooding, and Friction. While Fear uses the threat of punishment to silence dissent, and Flooding involves drowning out real voices with a massive influx of distraction, Friction acts by making information strategically difficult or exhausting to access. Instead of a total blackout, the system makes certain truths just annoying enough to find. It relies on a natural human tendency to avoid hassle; when information is buried under enough hurdles, most users give up.
Alongside these methods, "Algorithmic Throttling" exists as another evolving form of control. It does not necessarily remove content; instead, it uses algorithms to lower the "visibility" of specific posts. A post remains on an author's page, but the system ensures it never enters anyone else’s feed. This creates a state where a voice exists but never reaches an audience, effectively turning the expression into an isolated island.
Ultimately, this entire system—comprised of algorithmic throttling and sensitive word filtering—reshapes how people behave. This shift occurs long before anyone actually speaks: realizing that certain terms or topics will lead to being suppressed or hidden, people begin to preemptively alter their own language just to stay visible. This persistent, hidden architecture does more than filter information; it reshapes a generation’s patterns of thought.
Censored: Distraction and Diversion Inside China’s Great Firewall.
Princeton University Press, 2018.
A key theoretical reference for this project, particularly Roberts’ typology of fear, flooding, and friction.
Design
The work constructs a silent cosmos composed of digital communication fragments. Words drift through the void as familiar text boxes, mimicking our daily visual experience of exchanging thoughts and emotions on social media. Yet, within this space, due to an invisible intervention, genuine information often fails to reach its destination; every expression becomes a silent, drifting island in space.
Whenever a word triggers censorship, it transforms into a delicate peony—the national flower of China. I use the peony’s soft and ornate qualities to symbolize the gentle, almost decorative nature of suppression within the censorship system. This visual "softening" alleviates the tension of erased language, creating a seemingly harmless atmosphere that quietly encourages the public to adapt to this absence.
The peony is widely considered the national flower of the People's Republic of China, symbolizing prosperity, honor, and elegance.
Here is a digital translation of the peony.
The journey begins with a void. This minimalist interface serves as the portal for data entry, where the system awaits user input, either a personal thought or a scraped news fragment
When the input contains everyday reflections devoid of political sensitivity, the text remains physically intact.
Blooming as erasure: once sensitive keywords are detected, peonies bloom directly over the text, obstructing their legibility.
The garden of silence: the final landscape where fragmented information is buried under a field of peonies.
Hovering over the blooms reveals the systematic categorization behind the censorship
Technical Implementation
This project is built on p5.js using a Dual-Canvas Architecture. The main canvas handles text card rendering, floating physics, and drag-and-drop logic, while the effect canvas runs independently in Instance Mode to manage generative floral visuals. The two canvases are synchronized via a custom event system; as users move a card, the overlaying flower is precisely redrawn based on coordinate offsets. This separation ensures high-frequency visual animations remain fluid without compromising the responsiveness of basic text interactions.
For text processing, the system implements a matching algorithm based on character position mapping. To handle complex phrase identification, the algorithm adopts a "Longest Match First" approach, ensuring long phrases are matched before their constituent words. The system utilizes regular expressions for word boundary detection and incorporates an overlap-checking mechanism. Once a match is identified, the system calculates its exact pixel coordinates and bounding box, passing this data to the graphics engine to determine the origin and scale of the floral generation.
The floral effects are generated using Perlin Noise and dynamic drawing techniques. The visual system consists of three layers: watercolor-style blobs, radial rays, and glowing points. The ray system employs easing functions for growth animations and calculates the real-time distance between the cursor and the ray tips. When the mouse approaches, an attraction vector is applied to create a physical deflection. Finally, the interaction system triggers tooltips via Hover listeners. These tooltips are rendered with CSS backdrop filters and intelligently adjust their positioning based on mouse coordinates and screen boundaries to ensure complete visibility.
Here is a walkthrough of 404 Cosmos (sound alert!)