Recursive Emergence

Live Demo

This is a program I wrote to further study visual feedback loops. It was developed as a testing tool for my project Recursive Emergence.

The concept is similar to the "infinite mirror" effect created when pointing a camera at a screen or using a display capture source in OBS. However, I wanted more precise control over how the feedback behaves. This program duplicates the screen frames but allows me to rotate, scale, and move the individual layers. It also overlaps the screens additively, which simulates how physical light projections would blend together in a dark room.

One distinct problem I encountered with a purely digital feedback loop was the lack of an initial light source. Unlike a physical webcam that picks up ambient room light, a digital empty loop is just black. To solve this, I programmed the screen to flash a specific color when I press a button, acting as a "seed" for the feedback.

Usage

This program is designed to be used in conjunction with screen capture software or a physical camera setup pointing at the screen.

Setup

1. Launch the Program: Open the index.html file in your browser.
2. Create the Loop:
   • Method A (OBS): Use OBS Studio to capture the window displaying the program, then create a "Virtual Camera" output. Feed this virtual camera back into the program.
   • Method B (Physical): Point a webcam at your monitor.
3. Interact: Use the keyboard and mouse controls to manipulate the feedback loop.

Controls

Keyboard Shortcuts

• SPACEBAR: Flashes the background color (Teal). This acts as the "light source" to seed the feedback loop (for Virtual Cameras).
• F: Toggles a red wireframe around the video layers, helping you locate them if they drift off-screen or fade out.
• B: Toggles a fade effect, where each loop gets darker.

Mouse Interactions

• Move: Click and drag a video layer to move it.
• Rotate: Use the Mouse Wheel while dragging a layer to rotate it.
• Scale: Hold Shift + use the Mouse Wheel while dragging a layer to scale it up or down.

recursive_emergence_example.mp4

Technical Details

The project is built using HTML5 and JavaScript (specifically the p5.js library).

• index.html: Sets up the web environment and imports the p5.js library.
• webcam.js: Contains the core logic. It initializes multiple VideoInstance objects (defaulting to 3) that capture the webcam feed. It handles the blendMode(SCREEN) logic for additive mixing and manages the user input events for transforming the video layers.