Recently I stumbled onto a content library in JavaScript that allows coders to get their creative beaks wet. Currently, I'm a bootcamp student that just made the jump from the backend intensive part of the course to the javascript frontend. The questions: "Well what can we do with javascript?" and "how exactly does the language and libraries in JS differ from other languages like Ruby or Python?" Some youtube perusing later, I found P5.js. It's an offshoot from a library in Java called "Processing" created by programming duo in the MIT media lab. Sometime later in the 2010's, Lauren McCarthy released the revamped JavaScript version of Processing, which is P5.js.
Some pretty cool projects are possible that are entirely run in your browser. Things like rendering falling snowflakes, a visualized recursive tree, or a simulated spring. The library can draw shapes, do typography, mess with sound and video input. Basically, anything
So, like any good budding anything, I tried to set myself the task of learning the library to do some projects on my own.
The Basics
Outside of the P5.js download (found here), there's an empty example directory that gets right down to it. A fresh template for a project right out the gate looks like this:
function setup() {
}
function draw() {
}
Essentially, the setup function allows for the canvas creation and draw is a function that is called on a loop to display any shapes, graphics, etc. that you want it.
To get settled into how this library functions, I chose to follow along with an online tutorial that was extremely helpful by the Coding Train. Specifically this one that looked particularly interesting.
Getting Down to It
What ended up happening over the course of following along with the wacky (understatement) guide glossed over some really interesting topics. The first thing that the project has you create is a flow field where the canvas is segmented and each segment points in a specific direction. Now getting each grid to point in a random direction works in theory if you just use the good ol' Math.random() function to generate grid directions. However, we want randomness that isn't a large jump from previous numbers. Queue, Perlin Noise.
Perlin Noise and Math.random
Perline Noise doesn't just generate random values but produces a smooth random curve that gradually changes from output to output. As you can see:
This shows the directions that each grid points in generated with Math.random().
This, instead, shows how the change in direction from grid to grid is gradual rather than hasty. Then, to top it all off, we generate new grid values over time since the draw function is itself a loop. This allows us to have our grids gradually changing as well as successive grids gradually changing over time. ...Crazy.
After this, the lesson had me create a particle object that would accelerate according to the grid direction and draw a line between it and it's last potion to give that nice trailing pattern in the final product.
Final
Although my foray into JS is only recent, it's a library like this that makes me incredibly excited. I'm certainly not comfortable in all the different function calls and shape drawing that P5.js gives you. But, I'm really looking forward to diving further in and mess with some of the other cool libraries that js has to offer.
Top comments (0)