area73 / particle-system-es6

Particle System ES6 OO & Functional

🛠 Status: On active development

Particle System: ES6 Object Oriented Vs Functional Paradigm

There are two sources, one for Object Oriented and the other one for functional programing both sources do the same.

This repo has been made to see the differences on mind change from adopting an object oriented approach and switching to functional programming

Index

• Features
  • Design Patterns
• Screenshots
• Getting Started
  • Code scaffolding
  • Prerequisites
  • Installation
  • Start the development server
• Running tests
• Built With
• Authors
• License
• Wallaby.js
• Bibliography / Acknowledgments

---

Features

This is a very simple particle system with 3 actors.

Particle: the _main object of this system that will be affected by forces.

Emitter: Entity that will spell particles at different speed and angle

Field: A gravity field. This gravity can be positive (it will attract particles), or negative (it will repel particles)

There are other peaces to consider like the particle system itself were we set our scenario and a display system

Design Patterns

This application contains a variety of design patterns to make the code readable and maintainable.

Screenshots

Getting Started

There is no need for a build or any package installation 🙀

Just run the index.html on a modern browser and that's it.

All the imports has been made with ES6 modules

Code scaffolding

/root --> config files
  /assets --> images and static content
  /src --> this is were the code is located (fn -> functional , OO -> object orientes )
  /test --> testing files

Prerequisites

As I said before there is no need ot install any dependencies although this project has a package .json to manage dev dependencies. This dev dependencies are relate to eslint and prettier (tools for code linting and good practices)

Installation

None , hurrah !! 🤘 🤘

Start the development server

... but (there is always a but), you will need to run the index.html in a server because trying to execute index.html from file directory won't work since ES6 modules are sandbox to be executed in a server and not from file system.

If you don't have any server you can run from the root of the project the following command:

npx simple-server

Then you can visit:

index-oo.html (Object Oriented)

index-fn.html (functional) 

Running the tests

I'm using Jest to do the testing. You can do:

npm run test

Built With

Good old plain Javascript

Author

Work by: Rodrigo Erades

License

MIT Licence

Bibliography / Acknowledgments

This Particle system is base on this article and repo:

https://software.intel.com/en-us/html5/hub/blogs/build-a-javascript-particle-system-in-200-lines

https://github.com/jsoverson/JavaScript-Particle-System

A functional canvas approach with redux

https://www.oddlyfunctional.com/making-a-game-with-functional-programming-part-1

Wallaby.js

This repository contributors are welcome to use Wallaby.js OSS License to get test results immediately as you type, and see the results in your editor right next to your code.

particle-system-es6's Issues

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	@babel/plugin-proposal-class-properties
npm	babel-eslint
npm	npm-run-all

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Replace dependency npm-run-all with npm-run-all2 5.0.0
• Update dependency eslint to v8.57.0
• Update dependency jest-canvas-mock to v2.5.2
• Update dependency eslint to v9
• Update dependency eslint-config-prettier to v9
• Update dependency eslint-plugin-html to v8
• Update dependency eslint-plugin-prettier to v5
• Update dependency husky to v9
• Update dependency jest-extended to v4
• Update dependency jest-junit to v16
• Update dependency prettier to v3
• Update jest monorepo to v29 (major) (babel-jest, jest)
• 🔐 Create all rate-limited PRs at once 🔐

Edited/Blocked

These updates have been manually edited so Renovate will no longer make changes. To discard all commits and start over, click on a checkbox.

• Update dependency jest-extended to v1.2.1
• Update dependency jest-junit to v13.2.0
• Update jest monorepo to v27.5.1 (babel-jest, jest)

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Replace dependency babel-eslint with @babel/eslint-parser 7.11.0
• Update babel monorepo (@babel/core, @babel/plugin-proposal-class-properties, @babel/preset-env)
• Update dependency canvas to v2.11.2
• Update dependency eslint-config-prettier to v8.10.0
• Update dependency eslint-plugin-import to v2.29.1
• Update dependency eslint-plugin-prettier to v4.2.1
• Update dependency prettier to v2.8.8
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

npm

package.json

• @babel/core 7.16.7
• @babel/plugin-proposal-class-properties 7.16.7
• @babel/preset-env 7.16.8
• babel-eslint 10.1.0
• babel-jest 27.4.6
• canvas 2.8.0
• eslint 8.7.0
• eslint-config-airbnb-base 15.0.0
• eslint-config-prettier 8.3.0
• eslint-plugin-html 6.2.0
• eslint-plugin-import 2.25.4
• eslint-plugin-prettier 4.0.0
• event-target-shim 6.0.2
• husky 7.0.4
• jest 27.4.7
• jest-canvas-mock 2.3.1
• jest-extended 1.2.0
• jest-junit 13.0.0
• npm-run-all 4.1.5
• prettier 2.5.1

---

• Check this box to trigger a request for Renovate to run again on this repository