Procedural Punk

Project Details

Type

Web Application

Technologies

React, TypeScript, Next.js

Year

2025

Procedural Punk

A friend of mine wanted to create a ready-wear collection based on the deterioration of posters around the city. I thought this was an interesting idea and something that could be recreated using WebGL at scale. I created a series of procedurally generated posters as well as a series of shaders that could layer ontop of one another to create a series of compounding random effects.

Once I was happy with the system, I needed to figure out a way to automate the process of generating them. Since WebGL requires certain GPU specs, I decided to automate the process locally. I decided the best way to do this was to use JEST to automate the process of clicking through the UI in using seed functions to automate the process of creating the settings for each poster. Below find some of the (1000) results:

Procedural Punk Poster 1
Procedural Punk Poster 2
Procedural Punk Poster 2
Procedural Punk Poster 2
Procedural Punk Poster 2
Procedural Punk Poster 2
Procedural Punk Poster 2
Procedural Punk Poster 2
Procedural Punk Poster 2

Of course, this resulted in a fashion show at New York Fashion Week. Below are some of the looks:

Procedural Punk Poster 1
Procedural Punk Poster 1
Procedural Punk Poster 1
Procedural Punk Poster 1
Procedural Punk Poster 1
Procedural Punk Poster 1
Procedural Punk Poster 1