Skip to content

Create webcam contour-following particle swarm demo - #1

Open
PGuuu wants to merge 3 commits into
mainfrom
codex/build-contour-following-swarm-particle-system
Open

Create webcam contour-following particle swarm demo#1
PGuuu wants to merge 3 commits into
mainfrom
codex/build-contour-following-swarm-particle-system

Conversation

@PGuuu

@PGuuu PGuuu commented Feb 6, 2026

Copy link
Copy Markdown
Owner

Motivation

  • Provide an interactive, browser-based particle swarm that visually tracks contours from a webcam feed so users can experiment with swarm behaviors and real-time contour-following effects.

Description

  • Add a minimal UI page (index.html) with controls to start/stop the webcam and adjust particle count and a canvas to render the swarm.
  • Add presentation styles in styles.css for a dark, canvas-centered layout and compact controls.
  • Implement the swarm engine in script.js that extracts contour points from webcam frames using a luminance-gradient edge check, samples/limits points, and steers particles toward sampled contour points while rendering particles and soft connection lines.
  • Manage webcam lifecycle, responsive canvas resizing, particle count adjustments via setParticleCount, and lightweight performance tuning (point sampling, capping, and update throttling).

Testing

  • Ran node --check script.js to verify syntax and the check completed without errors.
  • Served the demo locally with python3 -m http.server 4173 to validate the app loads and assets are served successfully.
  • Captured a UI screenshot using a headless Playwright script to validate rendering and layout, and the screenshot artifact was produced successfully.

Codex Task

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant