This experiment recreates the opening scene from the movie The Matrix and takes inspiration from the Matrix digital rain wiki. Animation done in P5.js and GUI in React.

Codepen demo

To build it locally, run

npm i
npm start

then open http://localhost:3000/ in the browser.

Note: There are performance issues in dev build because of the unminified p5 lib. This can be alleviated by using the minified version at the cost of less meaningful debugging messages. See P5Wrapper.js

npm i
npm run build
npm run serve

then navigate to the link provided.

This experiment began after completing the Natural Simulations in Processing course on Khan Academy. Originally I used the in-browser editor but I wanted to use ES6 so I moved onto codepen. See attempt 1

At this time I discovered P5.js, a modernised version of Processing.js built for the web and I decided to port over to it. It comes with numerous libraries, one of which is the P5 DOM library that lets your sketches interact with DOM elements. Sounded useful as I have a GUI that I wanted to bring outside actually rendering the animation.

The P5 DOM library is still in early experimental stages and unfortunately, I found it quite clunky to use. Creating elements is akin to the DOM API. Yuck. See attempt 2

Finally I looked into using React to render the GUI and found React-p5-wrapper, a component that lets you pass props to sketches. See attempt 3

As a free user, one of the annoying things with codepen projects is the 10 file limit, so I had to cram a whole bunch of classes in there which is why this repo exists. The sketch classes have beene moved into separate files and each React component has its own css file.