{"id":18763032,"url":"https://github.com/leonlaser/p5js-particle-flowfield","last_synced_at":"2025-04-13T04:32:26.641Z","repository":{"id":144641991,"uuid":"123705991","full_name":"leonlaser/p5js-particle-flowfield","owner":"leonlaser","description":"P5.js flowfield animation/simulation with particles","archived":false,"fork":false,"pushed_at":"2024-07-30T08:26:24.000Z","size":1519,"stargazers_count":7,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T21:38:25.521Z","etag":null,"topics":["animation","art","canvas","demo","flow-control","html5","p5js","p5xjs","particles"],"latest_commit_sha":null,"homepage":null,"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/leonlaser.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}},"created_at":"2018-03-03T15:46:21.000Z","updated_at":"2025-02-28T01:14:33.000Z","dependencies_parsed_at":null,"dependency_job_id":"f2d9ae86-ed0d-447f-95a9-481d40d683b5","html_url":"https://github.com/leonlaser/p5js-particle-flowfield","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonlaser%2Fp5js-particle-flowfield","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonlaser%2Fp5js-particle-flowfield/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonlaser%2Fp5js-particle-flowfield/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leonlaser%2Fp5js-particle-flowfield/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leonlaser","download_url":"https://codeload.github.com/leonlaser/p5js-particle-flowfield/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248664025,"owners_count":21141878,"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":["animation","art","canvas","demo","flow-control","html5","p5js","p5xjs","particles"],"created_at":"2024-11-07T18:24:26.144Z","updated_at":"2025-04-13T04:32:26.247Z","avatar_url":"https://github.com/leonlaser.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# P5.js Particle Flowfield Animation\n\n![Flowfield animation demo](demo.gif)\n\nA flowfield based animation realized by moving particles over a grid based field. It works similar to a flow field It renders much faster than [my first attempt](https://github.com/achjaderleon/p5js-pixel-flowfield).\nThis one is using an approach used in [The Coding Train's coding challange #24](https://www.youtube.com/watch?v=BjoM9oKOAKY).\n\nYou are able to change some basic parameters:\n\n`DEBUG` enables you to display the flowfield and renders particles a without trails.\n\n`FLOW_TILE_SIZE` sets the flowfield resolution by defining the size of a tile.\n\n`FLOW_TILE_INFLUENCE` defines how strong a particle is moved by the field. While moving over a tile of the flowfield, the particles current direction is slowly interpolated towards the given direction of the flowfield. Define the amount of each interpolation step for each frame.\n\n`FLOW_TILE_MOVEMENT` how fast the flowfield changes over time.\n\n`PARTICLES_NUMBER` how many particles to render on screen. When a particles leaves the screen, a new one is created.\n\n`PARTICLES_MAX_MAGNITUDE` how fast a particle can be. Is randomly chosen between 2 and this value.\n\nMade with [P5.js](https://p5js.org/).\n\n[Click here to show  in your browser.](https://codepen.io/achjaderleon/pen/wvovgJy)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleonlaser%2Fp5js-particle-flowfield","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleonlaser%2Fp5js-particle-flowfield","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleonlaser%2Fp5js-particle-flowfield/lists"}