https://github.com/qc20/pinportrait

PinPortrait: An immersive 3D webcam pixelation experiment. Transform your live video feed into an interactive, three-dimensional pixel art portrait. Explore the intersection of computer vision and creative coding.
https://github.com/qc20/pinportrait

3d-graphics computer-vision creative-coding css3-animations data-visualization hci html5 interactive interactive-art javascript pixel-art real-time-processing threejs ux-design web-experiment webgl

Last synced: 6 days ago
JSON representation

PinPortrait: An immersive 3D webcam pixelation experiment. Transform your live video feed into an interactive, three-dimensional pixel art portrait. Explore the intersection of computer vision and creative coding.

• Host: GitHub
• URL: https://github.com/qc20/pinportrait
• Owner: QC20
• License: mit
• Created: 2024-07-21T23:46:38.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-07-22T20:05:17.000Z (4 months ago)
• Last Synced: 2024-07-23T01:49:22.585Z (4 months ago)
• Topics: 3d-graphics, computer-vision, creative-coding, css3-animations, data-visualization, hci, html5, interactive, interactive-art, javascript, pixel-art, real-time-processing, threejs, ux-design, web-experiment, webgl
• Language: HTML
• Homepage: https://qc20.github.io/PinPortrait/
• Size: 2.24 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PinPortrait: 3D Webcam Pixelation Experiment

PinPortrait is an interactive web experiment that transforms your webcam feed into a dynamic 3D pixel art portrait. This project explores the intersection of computer vision, 3D graphics, and interactive design, offering a unique and engaging user experience.



  

  




## Features

- Real-time webcam input processing

- 3D representation of pixelated video feed

- Interactive camera controls for exploring the 3D space

- Customizable pixel size and color mapping

## How It Works

PinPortrait uses the following technologies and techniques:

1. **Webcam Input**: Captures live video feed from the user's webcam.

2. **Canvas Pixelation**: Processes the video feed and calculates average color values for each pixel block.

3. **Three.js 3D Rendering**: Creates a 3D scene with cubes representing each pixel.

4. **Dynamic Updates**: Continuously updates cube colors and heights based on the processed video data.

5. **Interactive Controls**: Allows users to orbit, zoom, and pan around the 3D scene.

## Customization

PinPortrait is designed to be easily customizable. Here are some ways you can modify the project:

- Adjust the `size` variable in `sketch.js` to change the pixel/cube size

- Modify the color mapping in the `setupColors()` function for different visual effects

- Experiment with different 3D geometries by replacing the cube mesh in `setupCubes()`

- Add post-processing effects using Three.js post-processing library

- Implement additional interactivity, such as click events on individual cubes

## Getting Started

To run PinPortrait locally:

1. Clone this repository

2. Open `index.html` in a modern web browser

3. Allow access to your webcam when prompted

## Performance Considerations

The performance of PinPortrait depends on the capabilities of the user's device. For optimal perfo