Check the online version here: http://fractal-tree-simulator.surge.sh/
Source code is available here: https://github.com/atorov/fractal-tree-simulator
Using React with p5.js
This project demonstrates the possibility of combining React, Bootstrap, p5.js and other modern technologies.
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS.
The basic idea is that the p5.js sketch is wrapped in a React component. The data that comes into the sketch is passed on to this component as props. Callbacks are used to return information back from the sketch to the application.
- Exponentiation Operator (ES2016).
- Async/await (ES2017).
- Object Rest/Spread Properties (stage 3 proposal).
- Dynamic import() (stage 3 proposal)
- Class Fields and Static Properties (part of stage 3 proposal).
– JSX and Flow syntax.
- Syntax Highlighting and Displaying Lint Output in the Editor
- Тhe most popular editors should be covered and your editor should report the linting warnings.
- Code Splitting - allows you to split your code into small chunks which you can then load on demand. Supports code splitting via dynamic import().
Adding a Router and Redux
Jest is a Node-based runner. While Jest provides browser globals such as window thanks to jsdom, they are only approximations of the real browser behavior. Jest is intended to be used for unit tests of your logic and your components rather than the DOM quirks.
p5.Graphics for creating a graphics buffer;
p5.Vector for describing a two dimensional vectors;
p5.noise() - Perlin noise random sequence generator that produces a more natural ordered, harmonic succession of numbers compared to the standard random() function;
p5.colorMode() - both RGB and HSB color spaces;
p5.translate() and p5.rotate() matrix transformations, etc.