Coding • Fashion • Creative Coding
Coding • Fashion • Creative Coding
Personal Project
Personal Project
12 Weeks (2024)
Python • JS • HTML • CSS • Procreate
Codeture explores the intersection of the physical and digital worlds through fashion and technology. The project extracts color codes from videos of New Yorkers’ clothing and translates them into digital accessories designed for virtual environments. By transforming physical attire into digital forms, Codeture highlights how data can serve as a creative bridge between these realms. Codeture offers a fresh perspective on fashion, identity, and the interplay between technology and urban culture.
DEMO
01 Inspiration
The visual inspiration for Codeture is rooted in futurism fashion. Drawing from their sleek, avant-garde designs and bold use of form, the project reimagines how clothing can transcend physical boundaries.
02 SKETCHES
Shape Sketch
Fashion Illustration
Based on the moodboard I created, I visualized the digital accessories by sketching detailed designs of the desired shape and pairing it with a fashion illustration.
03 KEY FEATURES
01
Frame-by-Frame Video Analysis: Python script processes each frame of a video to calculate the average color and motion values, exporting these data as a JSON file.
02
Interactive Particle Visualization:
JavaScript loads the JSON file and control shapes’ colors based on the video's analyzed attributes. The shapes change their colors in sync with the video's playback.
03
Real-Time Interaction:
As the video plays, the visualization reflects the video's analysis in real time, creating an immersive experience.
04 INPUT VIDEO
Video Input Screenshots Footage from Soho
05 CODING
Javascript
The JavaScript code uses MediaPipe Pose to detect human body landmarks from a video input and dynamically visualizes virtual clothing effects based on the detected poses. It processes frame-by-frame data to create fluid animations like sparkles, flowing garments, and dynamic decorations using canvas drawing and particle systems. The script integrates interactive features, such as video uploads and real-time pose tracking, to simulate a customizable and visually immersive virtual fitting experience.
Clothing Visualization
Uses detected body points to calculate positions for particles, simulating flowing virtual clothing with sparkles and dynamic effects.
Pose Detection and Frame Processing
Captures pose landmarks using MediaPipe, processes frame-by-frame data, and visualizes virtual clothing effects based on detected body points.
Colored Sparkle Drawing
Creates and animates sparkles around the body landmarks using particles, with configurable colors and transparency based on the pose.
Python
The script extracts video metadata (frame count, dimensions, FPS) using OpenCV, analyzes frames for color histograms, motion, and average color, and stores the results in JSON. It visualizes the data with color histograms and motion change graphs.
The script that extracts video metadata (frame count, dimensions, FPS) using OpenCV
The code extracts color from each video frame by calculating the average RGB values using np.mean, converting from BGR to RGB.
Exporting results to a JSON file and a visualization diamgram
Visualization of the average color & the motion magnitude
06 testings
Screenshots of motion tracking testing
