{"id":26279769,"url":"https://github.com/collidingscopes/particular-drift","last_synced_at":"2025-04-07T14:12:05.722Z","repository":{"id":274428157,"uuid":"922857004","full_name":"collidingScopes/particular-drift","owner":"collidingScopes","description":"Turn images into flowing particle animations. Built with js, webgl / glsl, and html5 canvas","archived":false,"fork":false,"pushed_at":"2025-03-04T19:49:54.000Z","size":27102,"stargazers_count":98,"open_issues_count":0,"forks_count":6,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-31T13:16:09.641Z","etag":null,"topics":["2d","3d","animation","flow-field","glsl","glsl-shaders","html5","image-filters","image-manipulation","image-processing","javascript","noise","particle","perlin","real-time","real-time-animation","shaders","simplex","webgl2"],"latest_commit_sha":null,"homepage":"https://collidingscopes.github.io/particular-drift/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/collidingScopes.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.txt","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}},"created_at":"2025-01-27T07:55:14.000Z","updated_at":"2025-03-19T14:37:19.000Z","dependencies_parsed_at":"2025-03-24T12:23:07.738Z","dependency_job_id":null,"html_url":"https://github.com/collidingScopes/particular-drift","commit_stats":null,"previous_names":["collidingscopes/particledissolve","collidingscopes/particular-drift"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collidingScopes%2Fparticular-drift","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collidingScopes%2Fparticular-drift/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collidingScopes%2Fparticular-drift/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/collidingScopes%2Fparticular-drift/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/collidingScopes","download_url":"https://codeload.github.com/collidingScopes/particular-drift/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247666014,"owners_count":20975788,"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":["2d","3d","animation","flow-field","glsl","glsl-shaders","html5","image-filters","image-manipulation","image-processing","javascript","noise","particle","perlin","real-time","real-time-animation","shaders","simplex","webgl2"],"created_at":"2025-03-14T14:16:29.078Z","updated_at":"2025-04-07T14:12:05.700Z","avatar_url":"https://github.com/collidingScopes.png","language":"JavaScript","funding_links":["https://www.buymeacoffee.com/stereoDrift"],"categories":[],"sub_categories":[],"readme":"# Particular Drift\n\nTurn images into flowing particle animations! This javascript / WebGL tool creates particle animations from any image, with particles that dynamically respond to edge detection and flow fields.\n\n\u003cimg src=\"/assets/example.gif\"\u003e\n\u003cimg src=\"/assets/onEdge.png\"\u003e\n\n## Live Demo\n\nTry it out at: [**https://particular-drift.netlify.app**](https://particular-drift.netlify.app)\n\n## Features\n\n- Upload any image and convert it to a dynamic particle animation\n- Real-time parameter controls for customizing the animation\n- Edge detection with dynamic particle attraction\n- Perlin noise-based flow fields for organic movement\n- Export animations as images or videos\n- Fully client-side processing - no server uploads required\n- MIT licensed and free for both personal and commercial use\n\n## Technical Details\n\nThe animation combines several techniques:\n\n- **Edge Detection** using Sobel filters\n- **Perlin / Simplex Noise** for generating organic flow fields (2D or 3D)\n- **WebGL** for high-performance GPU-accelerated rendering\n- **GLSL Shaders** for particle physics and rendering\n- **Transform Feedback** for efficient particle system updates\n\n## Parameters\n\nUsers can control various aspects of the animation:\n\n- **Particle Speed**: Controls how fast particles move through the scene\n- **Attraction Strength**: Determines how strongly particles are drawn to detected edges\n- **Particle Opacity**: Sets the transparency of individual particles\n- **Particle Size**: Adjusts the size of each particle\n- **Particle Count**: Sets the total number of particles in the system\n- **Edge Threshold**: Controls the sensitivity of edge detection\n- **Flow Field Scale**: Complexity of the flow field \n- **Noise Type**: Select 2D perlin noise or 3D simplex noise for the flow field movement\n- **Color Palette**: Choose from preset color combinations or customize your own\n- **Background Color**: Set the background color\n- **Particle Color**: Set the color of the particles\n\n## Installation\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/collidingScopes/particular-drift.git\n   ```\n\n2. No build process is required - this is a pure frontend application. Simply serve the files using any web server. For example, using Python:\n   ```bash\n   python -m http.server\n   ```\n   Or using Node.js and a package like `serve`:\n   ```bash\n   npx serve\n   ```\n\n3. Open your browser and navigate to the local server address (typically `http://localhost:8000`)\n\n## Browser Requirements\n\n- WebGL2 support\n- Required WebGL extensions:\n  - EXT_color_buffer_float\n  - OES_texture_float_linear\n\n## Performance Considerations\n\nThe animation is computationally intensive due to the large number of particles and real-time processing. Performance may vary based on:\n- Your device's GPU capabilities\n- Screen resolution\n- Number of particles\n- Size of the input image\n\nIf you experience lag:\n- Reduce the particle count\n- Close unnecessary browser tabs\n- Ensure your device is not in power-saving mode\n- Try a smaller input image\n\n## Video Export\n\nThe tool uses the WebCodecs API and mp4-muxer for video export. If video export doesn't work in your browser:\n- Try using Chrome or Edge, which have better support for the WebCodecs API\n- Consider using an external screen recording tool like OBS Studio\n\n## Contributing\n\nContributions are welcome! Please feel free to submit a Pull Request.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE.txt) file for details.\n\n## Other Projects\n\nCheck out my other free/open source projects:\n- [Video-to-ASCII](https://collidingScopes.github.io/ascii): Turn videos into ASCII pixel art\n- [Shape Shimmer](https://collidingScopes.github.io/shimmer): Turn photos into funky wave animations\n- [Colliding Scopes](https://collidingScopes.github.io): Turn photos into kaleidoscope animations\n- [Force-Field Animation](https://collidingScopes.github.io/forcefield): Turn photos into particle animations\n- [Manual Brick Breaker](https://manual-brick-breaker.netlify.app): Play brick breaker by waving around your hands\n\n## Donations\nIf you found this tool useful, feel free to buy me a coffee. This would be much appreciated during late-night coding sessions!\n\n\u003ca href=\"https://www.buymeacoffee.com/stereoDrift\" target=\"_blank\"\u003e\u003cimg src=\"https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png\" alt=\"Buy Me A Coffee\"\u003e\u003c/a\u003e","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcollidingscopes%2Fparticular-drift","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcollidingscopes%2Fparticular-drift","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcollidingscopes%2Fparticular-drift/lists"}