{"id":27939511,"url":"https://github.com/qc20/flow-mirror","last_synced_at":"2025-05-07T09:54:38.638Z","repository":{"id":291741188,"uuid":"978337950","full_name":"QC20/Flow-Mirror","owner":"QC20","description":"An interactive webcam visualization that transforms your camera feed into flowing, organic particles using p5.js. Create mesmerizing, real-time visual effects with customizable motion and appearance.","archived":false,"fork":false,"pushed_at":"2025-05-06T09:22:21.000Z","size":4,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-05-06T10:29:26.431Z","etag":null,"topics":["creative-coding","creative-tech","digital-art","digital-mirror","generative-art","interactive-art","interactive-visualization","javascript","p5js","particles","perlin-noise","visualization","web-art","webcam"],"latest_commit_sha":null,"homepage":"https://qc20.github.io/Flow-Mirror/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/QC20.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-05-05T20:40:23.000Z","updated_at":"2025-05-06T09:34:53.000Z","dependencies_parsed_at":"2025-05-06T10:39:39.430Z","dependency_job_id":null,"html_url":"https://github.com/QC20/Flow-Mirror","commit_stats":null,"previous_names":["qc20/flow-mirror"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2FFlow-Mirror","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2FFlow-Mirror/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2FFlow-Mirror/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/QC20%2FFlow-Mirror/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/QC20","download_url":"https://codeload.github.com/QC20/Flow-Mirror/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252856425,"owners_count":21814853,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["creative-coding","creative-tech","digital-art","digital-mirror","generative-art","interactive-art","interactive-visualization","javascript","p5js","particles","perlin-noise","visualization","web-art","webcam"],"created_at":"2025-05-07T09:54:37.844Z","updated_at":"2025-05-07T09:54:38.630Z","avatar_url":"https://github.com/QC20.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Flow Mirror\n\nA creative webcam visualization that transforms your camera feed into dynamic, flowing particles. This interactive sketch uses p5.js to create an organic, responsive experience that reacts to color and movement.\n\n![Flow Mirror Preview](.src/assets/images/pixel-me.png)\n\n## Overview\n\nFlow Mirror captures your webcam input and transforms it into a constellation of colorful particles that orbit and flow with natural, organic movement. The visualization maintains the colors from your camera feed while adding mesmerizing motion through perlin noise algorithms.\n\n## Features\n\n- **Responsive Design**: Automatically adapts to any screen size and orientation\n- **Organic Movement**: Uses perlin noise for natural, flowing animation patterns\n- **Color Extraction**: Preserves the color palette from your webcam input\n- **Performance Optimized**: Samples pixels at intervals for smooth performance\n- **Fullscreen Support**: Click anywhere to toggle fullscreen mode\n- **Mirror Effect**: Horizontally flips the input for a more intuitive experience\n\n## Quick Start\n\n1. Clone this repository\n2. Open `index.html` in a web browser that supports webcam access\n3. Allow camera access when prompted\n4. Click anywhere to toggle fullscreen mode\n\n## Customization\n\nThe sketch is designed to be easily customizable. Here are some parameters you can modify in `sketch.js` to create different visual effects:\n\n### Particle System\n\n```javascript\n// In the draw() function, modify these values:\nsz = 5;        // Size of particles (smaller = more detailed, larger = more abstract)\nspace = 1;     // Space between particles (smaller = denser, larger = sparser)\n```\n\n### Motion Controls\n\n```javascript\n// Adjust these constants at the top of the file:\nconst ns = 60;    // Noise scale for spatial variation (smaller = more chaotic, larger = smoother)\nconst nss = 150;  // Noise scale for temporal variation (affects animation speed)\nconst ni = 8;     // Noise intensity multiplier (higher = more dramatic movement)\n\n// In the draw() function:\nwalk = 30;     // Orbital distance (higher = more movement range)\nspd = 35;      // Animation speed (lower = faster)\n```\n\n### Visual Effects\n\n```javascript\n// In the draw() function:\nbackground(0, 25);  // Controls the trail effect (second parameter: lower = longer trails)\n\n// Try different shapes instead of ellipses:\n// bg.ellipse(...) can be changed to:\n// bg.rect(...) for square particles\n// Or create custom shapes with bg.beginShape(), bg.vertex(), bg.endShape()\n```\n\n### Orientation-Specific Settings\n\nThe code automatically detects whether your camera is in landscape or portrait orientation and adjusts parameters accordingly. You can customize each mode separately:\n\n```javascript\nif (w \u003e h) {\n    // Landscape orientation settings\n    sz = 5;\n    space = 1;\n    walk = 30;\n    spd = 35;\n} else {\n    // Portrait orientation settings\n    sz = 5;\n    space = 5;\n    walk = 15;\n    spd = 5;\n}\n```\n\n## Advanced Customization Ideas\n\n- **Color Manipulation**: Add filters or transformations to the RGB values\n- **Multiple Particle Types**: Create different types of particles based on brightness or position\n- **Audio Reactivity**: Add p5.sound to make particles react to music or microphone input\n- **Interactive Elements**: Add mouse interaction to affect the flow of particles\n- **Custom Shaders**: Replace the particle system with GLSL shaders for more complex effects\n\n## Technical Details\n\nFlow Mirror uses several key techniques:\n\n1. **Pixel Sampling**: Instead of processing every pixel, it samples the webcam feed at regular intervals for better performance\n2. **Off-screen Rendering**: Uses a graphics buffer for efficient rendering\n3. **Perlin Noise**: Creates organic movement with coherent randomness\n4. **Aspect Ratio Preservation**: Maintains the correct proportions regardless of window size\n\n## Requirements\n\n- A modern web browser with webcam support\n- p5.js library (included via CDN)\n\n## License\n\n[MIT License](LICENSE)\n\n## Acknowledgements\n\nThis project uses [p5.js](https://p5js.org/), a JavaScript library for creative coding.\n\n## Contact\n\nFor questions, feedback, or collaboration opportunities, please open an issue on this repository or reach out directly.\n\n---\n\nHappy coding and creating!","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqc20%2Fflow-mirror","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqc20%2Fflow-mirror","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqc20%2Fflow-mirror/lists"}