Real-Time Video Pixelation

An interactive browser-based graphics experiment built with JavaScript and p5.js. The sketch captures a live webcam feed and represents it as a grid of squares whose sizes vary according to each sampled pixel's brightness.

Features

• Live webcam capture in the browser
• Pixel-level RGB sampling
• Average-brightness calculation
• Brightness-to-size mapping
• Dynamic rendering with p5.js
• Original source preserved separately for comparison

Run locally

1. Download or clone this repository.
2. Open the project folder in a code editor.
3. Start a local web server (for example, the Live Server extension in Visual Studio Code).
4. Open the local URL and allow webcam access.

Camera access generally requires a secure context such as https:// or localhost; opening index.html directly as a file:// URL may not allow camera access in every browser.

How it works

1. createCapture(VIDEO) requests a webcam stream.
2. The video is reduced to a small sampling grid.
3. loadPixels() makes the current frame's pixel data available.
4. The sketch reads each pixel's red, green, and blue values and calculates their average.
5. map() converts brightness from the 0–255 range to a square size from 0 to vScale.
6. p5.js draws the resulting grid every frame.

Files

• index.html — browser entry point
• src/sketch.js — runnable version, with row-major pixel indexing and a centered grid
• src/sketch.original.js — original source, preserved without edits
• src/style.css — page styling
• docs/ARCHITECTURE.md — implementation notes

Technologies

JavaScript · p5.js · HTML5 · Web APIs · RGB pixel sampling · Real-time visualization

Privacy

The sketch requests webcam permission and processes the video locally in the browser. This repository contains no video upload or recording functionality. Review any future changes before publishing or deploying.

Limitations

This is an educational graphics prototype, not a complete computer-vision or machine-learning system. Results depend on browser support, camera availability, lighting, and the device's processing performance.

License

Released under the MIT License. See LICENSE.