{"id":15130351,"url":"https://github.com/ebodshojaei/particle_simulator_js","last_synced_at":"2026-01-19T12:33:23.614Z","repository":{"id":257060233,"uuid":"854288348","full_name":"EbodShojaei/particle_simulator_js","owner":"EbodShojaei","description":"JavaScript particle simulator that randomizes the colours and positions of N # of buttons the user selects.","archived":false,"fork":false,"pushed_at":"2024-10-31T00:53:11.000Z","size":311,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-11T17:55:53.705Z","etag":null,"topics":["eslint","html-css-javascript","html5-canvas","javascript","javascript-game","js","webpack"],"latest_commit_sha":null,"homepage":"https://webodsimjs.netlify.app","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/EbodShojaei.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":"2024-09-08T21:41:38.000Z","updated_at":"2025-02-05T09:14:22.000Z","dependencies_parsed_at":"2024-12-19T02:21:52.458Z","dependency_job_id":"018e47d2-84f5-4a90-b528-a0afb0bb0260","html_url":"https://github.com/EbodShojaei/particle_simulator_js","commit_stats":null,"previous_names":["ebodshojaei/particle_simulator_js"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EbodShojaei%2Fparticle_simulator_js","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EbodShojaei%2Fparticle_simulator_js/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EbodShojaei%2Fparticle_simulator_js/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EbodShojaei%2Fparticle_simulator_js/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EbodShojaei","download_url":"https://codeload.github.com/EbodShojaei/particle_simulator_js/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247393540,"owners_count":20931809,"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":["eslint","html-css-javascript","html5-canvas","javascript","javascript-game","js","webpack"],"created_at":"2024-09-26T02:46:09.153Z","updated_at":"2026-01-19T12:33:23.585Z","avatar_url":"https://github.com/EbodShojaei.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dynamic Particle Simulator With Randomized Buttons\nThis program is a dynamic particle simulator that randomizes the colour and position of N buttons in N time.\n\nThe objects are rendered onto a canvas, which translates the positions of each canvas item.\n\nThe intention is for a highly flexible simulator that enables custom configurations and scaleable implementations.\n\nFinal distro is bundled for optimization and obfuscation of source code.\n\n## Components\nThe program incorporates JavaScript for the root logic and HTML with CSS for web interfacing.\n\n### HTML \u0026 CSS for Web Interfacing\nThe files below are used for interfacing the simulator logic on the client-side (i.e., front-end).\n```bash\n- index.html                        # web template to interface with init.js\n- style.css                         # style template to render the ui designs\n```\n\n### JS for Root Logic\nThe files below are used for implementing the simulator logic (i.e., root program).\n\n```bash\n- init.js                           # web script drives the simulation (entry point)\n  - src\n    - Game.js                       # creates the simulation given N (root kernel)\n    - config\n      - schemas\n        - buttonSchema.js           # defines the custom parameters to model a button generically onto the canvas\n        - gridSchema.js             # defines the custom parameters for the canvas (e.g., color, size, position, layers)\n      - objects.js                  # defines the type of objects and related properties to model using class names\n    - helpers\n      - state\n        - controllers\n          - Scheduler.js            # schedules time-based updates to state (ui scheduler)\n          - StateManager.js         # manages object state per observer pings (ui manager)\n        - storage\n          - Memory.js               # manages memory storage and retrieval of game states (ui storage)\n          - Replay.js               # handles the replay of a specific game state from memory ()\n        - Observer.js               # observes (grid) the subjects (buttons) (ui listener)\n        - Subject.js                # subject (button) that is watched by the observer (grid) (ui entity)\n      - view\n        - Displayer.js              # rehydrates UI component state to current (ui hydrator)\n        - Renderer.js               # renders Datum objects into UI components (ui renderer)\n      - Engine.js                   # orchestrates simulation state and sim logic (ui orchestrator)\n    - models\n      - factory\n        - DatumFactory.js           # abstract factory to create datum ui components\n        - ObjectFactory.js          # concrete factory creates object ui components\n        - GridFactory.js            # concrete factory creates canvas ui components\n      - obj\n        - Datum.js                  # abstract datum model stores object state data\n        - SimObject.js                 # concrete object of object model includes vertex prop\n        - SimGrid.js                   # concrete object of grid model holds a reference to a dictionary of Datums\n      - props\n        - object.js                 # defines object properties\n        - events.js                 # defines event handler properties\n        - vertex.js                 # defines vertex properties (px, py, vx, vy)\n      - ui\n        - UiObject.js               # ui component for an object model (translate3d used for canvas)\n        - UiGrid                    # ui component for a grid model (canvas used for view)\n    - utils\n      - randomUtils.js              # util functions for randomness\n      - domUtils.js                 # util functions for DOM manipulation\n      - validationUtils.js          # util functions for input validation\n      - mathUtils.js                # util functions for math operations (e.g., vertex calculations)\n  - langs\n    - messages\n      - en\n        - cache\n          - replay.js               # file accesses local storage for replay data\n        - ui\n          - menu.js                 # file stores all ui menu text for client-side\n          - pings.js                # file stores all ui output messages for client-side\n```\n\n# Attributions\nDocumentation/code was reviewed/formatted by the developer and AI software (OpenAI).**\n\n** Updated as of Sept. 8, 2024 15:22 PST by @ebodshojaei\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Febodshojaei%2Fparticle_simulator_js","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Febodshojaei%2Fparticle_simulator_js","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Febodshojaei%2Fparticle_simulator_js/lists"}