Post-Artem is a generative fashion editorial piece built with p5.js inside a React environment. The sketch features Hong Kong–based artist Artem, whose torso and limbs are dismembered and algorithmically reconstructed within a digital version of the classic game Snake.

In Post-Artem, each frame generates a new segment of Artem’s body, forming a chain of movement that evolves in real time until the body collides with the sketch’s boundaries — at which point the generation stops, completing the composition.

⚙️ Technical Architecture

The project is implemented as a React functional component wrapping a p5.js sketch using the react-p5 library. It combines procedural image sequencing with basic collision logic and frame-based randomness to produce emergent compositions.

Core components:

- React + p5.js integration: The <Sketch> component mounts the p5 canvas inside React’s lifecycle, allowing for UI-level control and dynamic sizing via canvasSize props.

- Image textures: A set of 16 directional body fragments (e.g., Body_V.jpg, Body_H.jpg, UR.jpg, DL.jpg, etc.) are preloaded during setup() and dynamically applied as textures using p5.texture().

- Grid system: The canvas is divided into a 10×10 grid (img_size = canvasSize / 10), determining the positional increments for each body segment.

- Directional logic: A finite set of direction states (up, down, left, right) define each movement. Randomized direction changes occur each frame using p5.random(choices), while constraints prevent immediate reversals (e.g., left cannot immediately switch to right).

- Boundary detection: The program checks for collisions with the canvas edges each frame. Upon collision, the sketch draws a “terminating” body image (endU, endD, etc.) and halts further generation.

- Frame control: p5.frameRate(1) creates a deliberate, stop-motion pacing — giving the piece a mechanical rhythm reminiscent of early video game logic.

🧩 System Behavior

1. The sketch starts at the center with Body_Top.jpg.
2. Each subsequent frame appends a new segment in a random direction.
3. The logic engine prevents impossible turns, simulating the rules of Snake.
4. When Artem’s “body” collides with the canvas boundary, an ending image is drawn, freezing the system.

This structure transforms the fashion editorial — a static representation of the body — into an algorithmic choreography, where composition is governed by chance and constraint.

🧠 Conceptual Layer

Post-Artem explores fragmentation, authorship, and digital corporeality. The body, once whole and performative in fashion photography, becomes procedural, directionless, and partially autonomous. By combining image-based assets with generative code logic, the piece reimagines fashion imagery as a living simulation rather than a single captured frame.