Final Idea

Poster

Video

Final Product after Changes

A. Where It All Started

This project started as a fusion of vintage aesthetics and modern interactivity. I wanted to create a camera that doesn't just capture photos but turns them into relivable pixelated moments, inspired by low-res nostalgia and interactive installations.

Goal:

Capture a photo using an ESP32-S3 camera.
Pixelate the image into an 8×8 version.
Display it on an 8×8 RGB NeoPixel matrix.
Show a preview of the captured image on a local webpage.
Store the image data on an SD card.
Make the body look like an old-school camera (using 3D printing & laser cutting).
Didn’t want to make just another digital camera. I imagined something that feels analog, glitchy, and warm—something where you take a photo and it lights up like a memory. The vision was to take a photo, pixelate it in real time, and display it on an RGB LED matrix to make each image feel like a living mosaic.

B. Getting the Camera to Talk

Used the ESP32-S3 camera module board (with OV2640) as the brain of this little build. The first milestone? Making sure it could take a photo and stream it.

Pin Out Diagram

with the CameraWebServer example in the Arduino IDE. I adjusted the pin definitions to match board . Once uploaded opened the Serial Monitor, got the local IP, pasted it in the browser—and just like that, I had a live stream. It was wild seeing a camera I soldered myself stream video in real time.

C. What You Capture – Web Preview

Before adding any button or display, I wanted to know what the camera was actually capturing. So I made a super simple web interface using the ESPAsyncWebServer library.

was working with the ESP32-S3 camera board (with OV2640) and wanted to turn it into a simple Wi-Fi webcam. At first, I ran into a bunch of errors — things like the camera buffer failing or ESP-ROM messages showing up — and I realized it’s mostly due to incorrect pin config or memory issues.

1. First got basics ready

1.Installed the ESP32 board package in Arduino IDE (via Boards Manager).

2.Selected " XIAO ESP32S3" as the board.

3.Connected the board via a proper USB cable (some USBs only power the board but don't let it upload code!).

2. Pin configuration (this was super important)

I found out that the ESP32-S3 camera board needs the right GPIO pins for the OV2640 camera to work. So I defined all of this in code:

#define PWDN_GPIO_NUM    -1
#define RESET_GPIO_NUM   -1
#define XCLK_GPIO_NUM     10
#define SIOD_GPIO_NUM     40
#define SIOC_GPIO_NUM     39
#define Y9_GPIO_NUM       48
#define Y8_GPIO_NUM       11
#define Y7_GPIO_NUM       12
#define Y6_GPIO_NUM       14
#define Y5_GPIO_NUM       16
#define Y4_GPIO_NUM       18
#define Y3_GPIO_NUM       17
#define Y2_GPIO_NUM       15
#define VSYNC_GPIO_NUM    38
#define HREF_GPIO_NUM     47
#define PCLK_GPIO_NUM     13

I copied this from my board’s datasheet (or sometimes online examples if they used the same ESP32-S3 cam board as me).

3. Wi-Fi camera streaming

then wrote a basic sketch to:

Connect to Wi-Fi
Set up the camera
Run a local webpage where I could stream the video feed

After every capture, the image showed up as a Base64-encoded preview on a webpage. It looked lo-fi and sometimes slightly glitchy, which weirdly added to the charm. This became my way of debugging the image input and making sure the pixelation was working the way I intended.

D. Testing the Matrix – Lighting It Up

The visual part of this project lives in the 8×8 WS2812B RGB LED matrix. I hooked it up with 5V power, GND, and a signal pin connected to my ESP32.

Used the Adafruit NeoPixel library to test the LED matrix. First, I made it show solid colors like red, green, and blue, then tried a rainbow effect to check how the lights worked. That’s when I noticed something odd—the rows weren’t in a straight line. Every second row was flipped in the opposite direction. This is called a serpentine layout.

E. Adding a Button – Capturing Without a Screen

Instead of sending an image immediately when the client connects, I served a simple HTML page with a "Capture" button.

When the button is clicked, it sends a GET request like GET /capture, which the ESP32 handles by taking a photo.

Connection

Button Pin	Connected To
One leg	GPIO1 (input pin)
Other leg	GND

Note: Use INPUT_PULLUP in code to avoid needing an external resistor.

Didn’t want to rely on clicking a webpage to capture photos—it felt too modern for a retro-inspired device. So added a push button.

Wired it to a GPIO pin and used the internal pull-up resistor. Once the logic was set up in the code, I added simple debounce logic so it wouldn’t trigger from random hand twitches. Pressing the button now triggers a photo capture

Before soldering anything, I first connected the push button to a breadboard setup just to check if it was working. I connected one leg to a GPIO pin on the ESP32-S3 and the other to ground, using the internal pull-up resistor in the code. A basic serial print helped confirm the button press. Once I was sure everything was working smoothly, I included the button on the final fabricated PCB board.

I could capture an image just by pressing the button.
Helpful when I didn’t want to use the browser every time.
Both web and physical trigger worked together!

F. Shrinking the Image Down to 8×8

So, once the ESP32-S3 captured an image (it comes in as a JPEG),had to find a way to shrink it down to just 64 pixels—because that’s all LED matrix can show.

Here’s how I did it:

1.Decode the JPEG

First, I used the built-in tools in the ESP32 camera library to decode the JPEG into raw RGB data. That gave me access to each pixel’s color values.

2.Divide the Image into a Grid

I split the image into an 8×8 grid—basically 64 small blocks. Each of these blocks would become one pixel on the LED matrix.

3.Find the Average Color in Each Block

For every block, I calculated the average red, green, and blue values by going through all the pixels inside it. So instead of showing all the detail, it just shows the overall color.

4.Store All the Colors

I saved all 64 RGB colors in an array, which I later used to light up the LED matrix.

It kind of felt like squinting at a photo until only the most basic feeling of it remains. No sharp lines—just the mood. That’s what I loved about it.

Before setting up the full camera capture flow, I tried testing the pixelation logic using an existing image from Pinterest. The goal was to see whether the color mapping and pixel display were working correctly on the 8x8 NeoPixel matrix.

G. Camera Body Design

Creating the camera body was more than just boxing up electronics—it was about giving everything a home, making sure wires had space to breathe, buttons were reachable, and lights could shine through without hiding the magic inside.

(The 3D CAD model used for the final build was made after all the design corrections from the first prototype. This version had accurate dimensions for all parts and fit everything properly.)

1. Planning the Layout in Fusion 360

started by listing down everything I needed to fit:

ESP32-S3 board
8×8 LED matrix
Push button
ESP camera module
Power wire (5V)
USB connection for uploading code

The main challenge was keeping the whole body small but organized. created a tight layout in Fusion 360, making sure no part would block another, and left gaps or holes wherever access was needed.

2. Key Cutouts and Features

Here’s what I had to include in the body design:

1.Top Slot for Camera Module

The ESP32-CAM module was mounted on the top panel. I made a rectangular cutout for the lens and a cavity that fit the board tightly so it wouldn’t shift.

2.Side Hole for Power Wire

A small hole was added on the left side panel to pass the 5V wire through from an external supply.

3.Back Gap for USB Access

Since the ESP32-S3 still needed to be connected to my laptop for uploading code or powering via USB, I left a rectangular cut on the back.

4.Front Rectangular Button Cut

I added a rectangular cutout on the front panel to fit the push button perfectly along with top slot for camera module. It was important that it stayed aligned with the finger’s reach and didn’t pop out too much.

3. Materials and Fabrication Process

To make the structure strong but easy to cut and assemble, I used 3mm thick sheets and a mix of laser cutting and 3D printing:

1.Side Panels

Made from laser-cut black opaque acrylic. These formed the main structure of the camera and gave a clean outer look.

2.Front Panel (LED Display Window)

Cut from transparent 3mm acrylic, so the light from the 8×8 LED matrix would be clearly visible from outside. The LED matrix sat right behind it.

3.Top Panel

3D printed in PLA, because I needed more control over the form. It helped hold the ESP camera firmly and had curves to support the PCB.

4. Assembly and Fit

The parts were either press-fit or lightly glued using acrylic adhesive. I kept tolerances tight in Fusion 360, so everything slotted together without wobble. It was super satisfying when the first mockup came together and all the slots lined up just like in the CAD.

H. Iterating the Body Design After Final Presentation

During the final Fab Academy review, Neil pointed out a few issues in the camera body design—and honestly, most of them were already bothering me. The first prototype had the general form, but in terms of fit and usability, it clearly needed polishing. The structure had potential, but the details were off.

1. Issues in the First Prototype

1.No USB Access at the Back

The biggest mistake was not adding a proper slot for the USB cable. I had to physically remove the ESP32 board every time I needed to upload code or power it up—super inconvenient.

2.Loose LED Matrix Fit

The front panel had extra space around the LED matrix. I hadn’t accounted for the real PCB size, so it didn’t sit snugly. This caused light to leak from the sides and made the front look messy.

3.Tight Camera Module Placement

I left almost no gap for the ESP32-CAM module at the top. It just about squeezed in, and the wires were at risk of getting pressed or bent.

4.Misaligned Button Cutout

The rectangular slot for the trigger button was off. The button kept tilting and sometimes got stuck when pressed.

2. What Got Fixed in the Final Design

After the feedback, I headed back to Fusion 360 to rework the parts carefully:

I added a proper USB cutout at the back panel to allow smooth cable connection without removing the ESP board.
Re-measured and tightened the LED matrix slot so that it sat perfectly flush against the front transparent acrylic.
Widened the camera module's slot at the top for easier mounting and to protect the ribbon cables.
Realigned the button cutout so that the button sat neatly in place and pressed cleanly.

These changes made a big difference. The parts now felt more intentional, and everything started to fall into place. Instead of fighting with the box, I was finally assembling something that worked and looked right.

I. Making the PCB

In the beginning, tested everything on a breadboard, just to see if my connections and logic worked. But for the final project, I knew a breadboard wouldn’t fit inside the camera body—plus it’s fragile and messy with jumper wires everywhere.

So I decided to design a custom PCB that would:

Fit the camera’s limited internal space
Let solder permanent connections for the ESP32-S3
Be strong enough for handling, plugging in, and reprogramming
Align perfectly with the cutouts I designed in the Fusion model

1. PCB Design in EasyEDA

Used EasyEDA to design a simple single-layer PCB. The ESP32-S3 (Seeed Studio XIAO version) sits in the center of the board. From there, I pulled out only the pins I actually needed for the final functionality:

GPIO for button
GPIO for NeoPixel matrix
5V and GND lines
A few extra GPIOs for possible future tweaks

2. Design

Board Size: Custom sized to fit within the acrylic camera base (approx. 70mm × 20mm)
Hole Placement: Two screw holes on each side for mounting inside the body
Tracks: Routed as straight as possible to avoid unnecessary bends
I avoided adding extra components like resistors or capacitors on the board because I had already added them in the LED matrix and button wiring externally.

3. Fabrication – Milling the PCB

Once I exported the Gerber and drill files from EasyEDA, I used the Roland SRM-20 CNC milling machine available in our lab.

For milling the PCB, I followed the same workflow and settings from Electronics Production Week. Since had already used the Roland SRM-20 machine earlier during that assignment, I was confident about the parameters and tools.

Traces Tool: 0.4 mm engraving bit
Outline Cut: 3 mm end mill
Material: FR1 single-sided copper board
Software Used: (same as earlier week)
Settings: feed rates and depths as used before, which worked perfectly without overcutting

I reused the tried-and-tested settings from that week because they gave me clean, accurate results without breaking the tool or damaging the board. The only new step was aligning it within the size constraints of camera body.

By referring back to that week’s experience, the entire milling and soldering process became quicker and much smoother.

4. Soldering the Board

I soldered the XIAO ESP32-S3 onto the milled board using a soldering station with a fine tip, since the pins were very close together.

Once the board was ready, I tested each connection with a multimeter using continuity mode. That way, I could be sure every trace worked before connecting power.

J. Assembly and Fit – Final Working Version

Once the parts were redesigned, putting the camera together became a much smoother experience. All the panels were laser-cut from 3mm acrylic (some black opaque, some transparent), and the top piece with the camera module was 3D-printed to handle the mounting better.

1. Final Fit Adjustments

1.USB Cutout

This time, the slot was large and aligned, with enough space to comfortably plug in the USB cable during code uploads and testing.

2.LED Matrix Placement

The front slot was refined to the actual matrix size. The panel was laser-cut from clear acrylic so the LEDs would shine through nicely.

3.Camera Module Gap

With the extra space added in the 3D model, the ESP32-CAM now fit comfortably with no wire strain.

4.Button Fit

The rectangular cutout was corrected for the tactile button. Now it sat flush and pressed properly without getting stuck.

5.Wire Passages

I added small gap on the inner walls and base so the wires could pass through neatly without being pinched.

Hero Shot

Final Working Video

Attempt one:

Attempt two:

Attempt three:

Final Capture Outcome

I am glad that camera was able to capture pink folwer, blue cloth clip, green leaves, some grey background and other random shades.

Feature Progress Table

Feature	Status	Notes
ESP32-S3 camera capture	Working	Streams via browser, captures JPEGs
Web preview of captured photo	Working	Base64 image shows on local page
NeoPixel 8×8 LED matrix control	Working	Shows pixelated photo with mapped layout
Image-to-8×8 pixel mapping	Working	Uses average color per block
Button-based photo capture	Working	Simple push to capture, debounce added
Camera body (physical casing)	Done	Fully enclosed, functional and aesthetic
SD card storage of image data	In progress	Will save raw or pixelated data

Learning Through the Project – Start, Midway, and End

Starting Out

In the beginning, the idea sounded simple in my head—“a pixelated camera that shows a low-res image on LEDs.” But once I actually sat down to plan it, I realized how many layers were involved. From hardware choices to coding, from physical fit to output display—it wasn’t just one task. It was a mix of electronics, CAD, fabrication, and visual logic.

Early on, I spent a lot of time just figuring out what connects to what—testing the LED matrix, trying out image pixelation methods, checking if buttons worked, and finding out how to make the ESP32 camera actually take and save a photo. The planning stage taught me how to explore without rushing. Every little working part gave me confidence.

Midway – When Things Got Real

The middle phase was the most intense. That’s when the pressure of making all components come together started. My focus shifted from "does this part work" to "can they work together?"

Some big lessons here:

Remapping LED layout was a game-changer. Understanding serpentine layout logic taught me how hardware affects software directly.

Realizing how important it was to design the enclosure and electronics together, not one after the other.

I faced issues with camera alignment, USB slot placement, and LED matrix visibility, and had to go back to Fusion 360 and redo those parts.

This was the phase where I truly understood the role of iteration—nothing I made was final the first time. But every version got closer.

Ending – Seeing It Work

By the end, things started falling into place. The LED matrix finally responded to captured image data. The pixelation logic started making sense visually. I replaced the breadboard with a custom PCB, 3D printed and laser cut the body, and finally assembled everything neatly.

Some small adjustments were still needed—even in the final week—but I had reached a point where I understood my system well enough to fix things quickly. I could troubleshoot code or hardware without panicking.

The best part? Seeing an image captured by the ESP32 camera, pixelated down to 8x8, and displayed on the NeoPixel grid—with the whole thing housed in something I built myself.

Final Takeaway

This project taught me how to handle complexity by breaking it down, how to think like a designer and an engineer at the same time, and how to keep improving my work without losing motivation. It wasn’t just about finishing a final piece—it was about learning how to get there thoughtfully, layer by layer.

And honestly, that’s the kind of learning that sticks.

System Integration Week Here, expenditure is available but most of the things used were in rridl fablab materials.

Link

These helped a lot during process.

https://youtu.be/TYApFAKzrJM?si=dSJvaYo6CZL934oM

https://youtu.be/eot6COwCPF0?si=Ykzt9PIeXmxMxqzQ

https://youtu.be/_wvuOsRgmt4?si=c0_IIUQkgnL2Olf3