Reactickles 3

Completing the p5.js tutorials

In my previous post, I completed the following tutorials from the p5.js website:

  1. Hello p5.js
  2. Get Started
  3. p5.js overview

First, I fixed smart quotes in said previous post, then got on with the next tutorial, p5.js and Processing aka Processing transition.

Several parts of the tutorial were particularly interesting or relevant to the Reactickles 3 project:

  1. The ability of p5.js to take multitouch input, rather than just from a single mouse or trackpad. To test this out, I created a multitouch demo, “TouchDemonstration“. Unfortunately, it didn’t work on my laptop, so to test it I wanted to put it on the web proper. I knew GitHub had a hosted pages capability, so I followed the tutorial and created pages for this project. I had to make the circles sufficiently large to be seen under my fingers, and scaled my canvas to the full size of the window, but even then they didn’t seem to be picked up as multi touches rather than single ones. I posted on the forum and am awaiting some tips. I noted that the developer of p5.js seems to be changing the things are working with multitouch in the next release.
  2. The difference between Global and Instance mode, and via that page:
  3. The concept of Closures, and why they are so powerful:

    A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created.

In order to stop the duplication of code from one folder from the other, something that is sure to create bugs, I moved all my source code into my GitHub pages (or docs) folder on the GitHub for the project, with one unified libraries folder for p5.js and other JavaScript libraries.