https://github.com/area73/particle-system-es6
Particle System ES6 OO & Functional
https://github.com/area73/particle-system-es6
functional-programming javascript object-oriented-programming particle-system particles
Last synced: 9 days ago
JSON representation
Particle System ES6 OO & Functional
- Host: GitHub
- URL: https://github.com/area73/particle-system-es6
- Owner: area73
- License: mit
- Created: 2019-01-16T06:12:09.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-05-30T17:36:27.000Z (25 days ago)
- Last Synced: 2025-05-31T01:47:06.862Z (24 days ago)
- Topics: functional-programming, javascript, object-oriented-programming, particle-system, particles
- Language: JavaScript
- Homepage: https://particle-system.deelo.cloud/
- Size: 126 MB
- Stars: 7
- Watchers: 2
- Forks: 4
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
> ## 🛠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](#features)
* [Design Patterns](#patterns)
* [Screenshots](#Screenshots)
* [Getting Started](#Getting-Started)
* [Code scaffolding](#code-scaffolding)
* [Prerequisites](#Prerequisites)
* [Installation](#installation)
* [Start the development server](#start-server)
* [Running tests](#Running-the-tests)
* [Built With](#Built-With)
* [Authors](#Authors)
* [License](#License)
* [Wallaby.js](#wallaby)
* [Bibliography / Acknowledgments](#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 :scream_cat:
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 !! :metal: :metal:
### 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://medium.com/@peterxjang/a-functional-canvas-approach-with-redux-ce59a369241b)
https://www.oddlyfunctional.com/making-a-game-with-functional-programming-part-1
## Wallaby.js
[](https://wallabyjs.com/oss/)
This repository contributors are welcome to use
[Wallaby.js OSS License](https://wallabyjs.com/oss/) to get
test results immediately as you type, and see the results in
your editor right next to your code.