{"id":16323598,"url":"https://github.com/im-rises/particle-simulator-react-p5-website","last_synced_at":"2025-06-11T09:07:31.045Z","repository":{"id":155520320,"uuid":"624734209","full_name":"Im-Rises/particle-simulator-react-p5-website","owner":"Im-Rises","description":"Particle Simulation website demo made in React with P5js.","archived":false,"fork":false,"pushed_at":"2023-09-28T02:31:45.000Z","size":2098,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-03T00:37:21.899Z","etag":null,"topics":["canvas","javascript","npm","npm-package","package","particle-simulator","particles","react","scss","simulation","typescript","website"],"latest_commit_sha":null,"homepage":"https://im-rises.github.io/particle-simulator-react-p5-website/","language":"TypeScript","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/Im-Rises.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-04-07T06:10:48.000Z","updated_at":"2024-04-02T00:24:04.000Z","dependencies_parsed_at":"2023-10-12T17:44:12.247Z","dependency_job_id":"ffc81164-3717-42af-a04b-4025498cbfc4","html_url":"https://github.com/Im-Rises/particle-simulator-react-p5-website","commit_stats":{"total_commits":103,"total_committers":3,"mean_commits":"34.333333333333336","dds":0.03883495145631066,"last_synced_commit":"ca5c62d2080a44e89784c13b5ce7ca1aea460b0b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Im-Rises%2Fparticle-simulator-react-p5-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Im-Rises%2Fparticle-simulator-react-p5-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Im-Rises%2Fparticle-simulator-react-p5-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Im-Rises%2Fparticle-simulator-react-p5-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Im-Rises","download_url":"https://codeload.github.com/Im-Rises/particle-simulator-react-p5-website/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Im-Rises%2Fparticle-simulator-react-p5-website/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259236302,"owners_count":22826303,"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":["canvas","javascript","npm","npm-package","package","particle-simulator","particles","react","scss","simulation","typescript","website"],"created_at":"2024-10-10T22:55:13.169Z","updated_at":"2025-06-11T09:07:30.987Z","avatar_url":"https://github.com/Im-Rises.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# particle-simulator-react-p5\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/React-20232A?style=for-the-badge\u0026logo=react\u0026logoColor=61DAFB\" alt=\"reactLogo\" style=\"height:50px;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/JavaScript-323330?style=for-the-badge\u0026logo=javascript\u0026logoColor=F7DF1E\" alt=\"javascriptLogo\" style=\"height:50px;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\" alt=\"typescriptLogo\" style=\"height:50px;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Sass-CC6699?style=for-the-badge\u0026logo=sass\u0026logoColor=white\" alt=\"scssLogo\" style=\"height:50px;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/CSS-239120?\u0026style=for-the-badge\u0026logo=css3\u0026logoColor=white\" alt=\"cssLogo\" style=\"height:50px;\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/p5%20js-ED225D?style=for-the-badge\u0026logo=p5dotjs\u0026logoColor=white\" alt=\"cssLogo\" style=\"height:50px;\"\u003e\n\u003c/p\u003e\n\n## Description\n\nThis is a simple demo of the `particle-simulator-react-p5` package. It is a particle simulator made with React and\np5.js.\n\n## 🚀🚀[You can try it online from your browser](https://im-rises.github.io/particle-simulator-react-p5-website/) 🚀🚀\n\nIt works on desktop and mobile as well with different controls (check the `controls` section).\n\nThe particles are set randomly on the screen in a circle shape. Their color change according to the speed of the\nparticle. The particles are attracted to the mouse and they are repelled from the edges of the screen. You can toggle\nattract/repel by clicking with the mouse button on a screen. On tablet and mobile de the touch screen to move the\nparticles by dragging your finger. To toggle attract/repel tap on the screen.\n\n## 🚀🚀 [The package is available on npm](https://www.npmjs.com/package/particle-simulator-react-p5) 🚀🚀\n\n\u003e **Note**  \n\u003e I also made a C++ version for WebGL2 using OpenGL ES 3.0. You can check it\n\u003e out [here](https://github.com/Im-Rises/particle-simulator-webgl).\n\n## Screenshots\n\n|                                                      Attraction                                                       |                                                         Drag                                                          |                                                       Repulsion                                                       |\n|:---------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------------------------------:|\n| ![screenshot1](https://user-images.githubusercontent.com/59691442/230525907-1efd6bc5-ce33-485a-879a-57a8ed46c596.png) | ![screenshot2](https://user-images.githubusercontent.com/59691442/230525910-7a41907f-d6fe-4ed2-8c44-94c09b837e6f.png) | ![screenshot3](https://user-images.githubusercontent.com/59691442/230525912-bb0054c4-0f0c-4f6e-b7c9-937f11ba0acf.png) |\n\n## Demo video\n\n[//]: # (https://user-images.githubusercontent.com/59691442/219550627-16660c09-dbea-41f3-ba15-3d7aaafca6d9.mp4)\n\n[//]: # (https://user-images.githubusercontent.com/59691442/230523799-9afbf327-3cf4-4530-8127-594339d94334.mp4)\n\nhttps://user-images.githubusercontent.com/59691442/230526870-cd104007-be41-4cdd-a10e-4672da650974.mp4\n\n## Controls\n\nThe particles are initially attracted to the mouse, but you can toggle attract/repel by clicking with the mouse\nbutton on a screen.  \nOn tablet and mobile de the touch screen to move the particles by dragging your finger. To toggle\nattract/repel tap on the screen.\n\nYou can also toggle fullscreen mode by pressing the `F11` key.\n\n## GitHub Actions\n\n[![Node.js CI](https://github.com/Im-Rises/particle-simulator-react-p5-website/actions/workflows/node.js.yml/badge.svg?branch=main)](https://github.com/Im-Rises/particle-simulator-react-p5-website/actions/workflows/node.js.yml)\n[![ESLint](https://github.com/Im-Rises/particle-simulator-react-p5-website/actions/workflows/eslint.yml/badge.svg?branch=main)](https://github.com/Im-Rises/particle-simulator-react-p5-website/actions/workflows/eslint.yml)\n[![CodeQL](https://github.com/Im-Rises/particle-simulator-react-p5-website/actions/workflows/codeql.yml/badge.svg?branch=main)](https://github.com/Im-Rises/particle-simulator-react-p5-website/actions/workflows/codeql.yml)\n[![pages-build-deployment](https://github.com/Im-Rises/particle-simulator-react-p5-website/actions/workflows/pages/pages-build-deployment/badge.svg)](https://github.com/Im-Rises/particle-simulator-react-p5-website/actions/workflows/pages/pages-build-deployment)\n\nThe project is set up to run the following actions:\n\n[//]: # (- pages-build-deployment : Builds the website and deploys it to GitHub Pages.)\n\n- node.js.yml : Runs the tests for the Node.js project.\n- eslint.yml : Runs the ESLint linter on the project.\n- codeql.yml : Runs the CodeQL linter on the project.\n- pages-build-deployment : Publish the website\n\n## Libraries\n\nReact:  \n\u003chttps://reactjs.org/docs/getting-started.html\u003e\n\nXo:  \n\u003chttps://github.com/xojs/xo\u003e  \n\u003chttps://github.com/xojs/eslint-config-xo-react\u003e  \n\u003chttps://github.com/xojs/eslint-config-xo-typescript\u003e\n\nESLint:  \n\u003chttps://eslint.org/docs/latest/user-guide/getting-started\u003e\n\nGitHub gh-pages:  \n\u003chttps://github.com/gitname/react-gh-pages\u003e\n\nP5.js:  \n\u003chttps://p5js.org/\u003e  \n\u003chttps://www.npmjs.com/package/react-p5\u003e\n\nreact-device-detect:  \n\u003chttps://www.npmjs.com/package/react-device-detect\u003e\n\n## Documentation\n\nThe Coding Challenge (math and physics):  \n\u003chttps://www.youtube.com/watch?v=OAcXnzRNiCY\u003e\n\nP5.js:  \n\u003chttps://p5js.org/\u003e\n\nP5.js React:  \n\u003chttps://www.npmjs.com/package/react-p5\u003e\n\n## Links\n\nCheck the source code\non [![github](https://user-images.githubusercontent.com/59691442/223556058-6244e346-8117-43cd-97c6-bf68611bf286.svg)](https://github.com/im-rises/particle-simulator-react-p5)\n\nCheck the demo\non [![github](https://user-images.githubusercontent.com/59691442/223556058-6244e346-8117-43cd-97c6-bf68611bf286.svg)](https://github.com/im-rises/particle-simulator-react-p5-website)\n\nCheck the package\non [![npm](https://user-images.githubusercontent.com/59691442/223556055-4e9ef014-79d4-4136-ac07-b837b49066c8.svg)](https://www.npmjs.com/package/particle-simulator-react-p5)\n\n## Contributors\n\nQuentin MOREL :\n\n- @Im-Rises\n- \u003chttps://github.com/Im-Rises\u003e\n\n[![GitHub contributors](https://contrib.rocks/image?repo=Im-Rises/particle-simulator-react-p5-website)](https://github.com/Im-Rises/particle-simulator-react-p5-website/graphs/contributors)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fim-rises%2Fparticle-simulator-react-p5-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fim-rises%2Fparticle-simulator-react-p5-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fim-rises%2Fparticle-simulator-react-p5-website/lists"}