Month: April 2020

Hi Everyone, 

Today I am introducing p5.js. 

For those Javascript developers who don’t know p5.js, it’s basically an abstraction library for Canvas. 

(starts drawing lines on grey space.)

If you do any basic 2D Canvas interactions, p5.js makes it very simple. 

(points at script, then scribbles on grey space.)

Look at this here, it’s like, ten lines or so, and you have drawing going on. Doing this in a normal canvas without this abstraction is not fun. It just takes a long time. 

(selects Particle System, a starburst pattern repeats itself)

So let’s just check out a couple of examples really quickly. Let’s check out this particle system here. Cool! That’s cool. 

I learned about p5.js because it is based on processing. Processing is originally in Java, and it allows you to play around with Java essentially. It incorporates a really easy visualization layer. I learned about it back in the day at the Academy of Art, when we had a section on generative art. 

If I ever retire completely, I will probably become some sort of generative artist using code. 

(selects Multiple Particle Systems, the Particle System pattern repeats itself)

So let’s see here. Multiple Particle Systems! So that’s kind of neat. There is a lot of different things you can do. Imagine you put a background image off of say, your webcam in here and then you can add things and then you click a button and it saves it out. Or something like that, you know. There are a lot of possibilities. 

(selects the Mandelbrot Set, a basic fractal appears)

Pretty cool. Pretty cool.

(selects Snowflakes, a red background appears with white cascading snowflake pattern)

 We have snowflakes? Like, that’s awesome. That’s really great. I really enjoy the artistic aspect of coding. You know, it’s really nice when you can just create without having to worry about certain specs or the budget. 

(switches back to directory page, then brings up code for Collision detection in another window.)

Anyways, to get you started with p5.js, a long time ago I built a collision detection library here. Just basic ball bouncing. You know there’s the Hello World for most coding programs when you are learning. This ball bouncing is basically to me the Hello World of animation. 

So, a hundred lines, it’s es5. It’s old, but you’ll learn it. 

(plays Ball Bounce Script)

And in it, if we go over here for the ball bounce script…Let’s check it out. This p5.js has fantastic FPS. I actually tried to import this over to C++, so I could end up learning web assembly and I found out I really enjoy Javascript more so than C++, because in doing so I really hit less performance. 

I think it was either using vectors in C++ under the hood or just not performing in the way that I was trying to convert it, or the actual 2D rendering library was not optimized. There was actually a bug in that, in Github, issues we fixed. 

So yeah, this is the script. You can check it out. If you just want to learn a bit about p5.js, it’s a good little intro, and I have a two-step, two-stage on this, so I originally learned this and I thought alright, let me take up the complexity a little bit, and I will demo that video next video after this.

So check it out, p5.js. Generative art. Have a good day everybody. Bye.

Alright, This is my second stage video here, about p5.js. Originally, I had shown a video that was a simple ball bouncing script. You know, that’s kind of the Hello World of animation, as far as I’m concerned. If you missed video you can check it out on the company Facebook page or the website. This is about  p5.js here, so p5.js.org a 2D animation canvas library does some cool things makes it a lot faster for some simple canvas animations.

Now this was like I said, the second stage. I built this when I was working as the only developer for a company called Correlation One. Way back in the day I was working for Asham and Rasheed, both of them were just starting the company over there in New York and now it’s actually backed by Soft Bank and they’re changing the world.

So really amazing stuff.  I was inspired by the data science bit about it all. So I thought wow, it would be cool to create something where I could just take a screenshot with a plug-in and have a perfect background that’s generative. You know generative art here, data science style.

So in it, there are some different things you can do. If you hold down on the arrow key you reduce the overall count. So look, now there’s a lot less. If I go up I can really max it out. The interesting thing about this that I actually thought was clever in the implementation of this…this is 2D, but it looks a bit 3D because I’ve gone and done a bit of illusion work here with size and transparency. So if you see….

(unwanted window opens, he closes it out)

wow, hold on guys. Alright, so if you see it’s smaller, more transparent in the background you have the larger ones, and they only connect to the ones on the same plane, which is really an array.

So you have three different arrays, foreground, middle ground, background, typical art-style, but you can also change…

(changes color)

the color. So there are a couple of different presets that allow people to edit thighs differently in say Photoshop or Illustrator.

(cycling through effects)

So you take this as the base and you are able to use some cool effects later on. You can also remove the fill by going on the left arrow. The right arrow cycles through, the left arrow will cycle through in reverse but without fill. So you can see the triangles are not filled at all.

I had a really great time in doing this. It was really cool seeing the performance of p5.js., and this repo is available.

(changes screen to view code)

So if you want to check it out, you totally can. I would say, look at the ball bounce first. I had a lot of repos, but only a few are public. Very few are actually public, so you will be able to see both.

This is just a building off of the original one, it’s a good way to get creative in p5.js.

(highlights array)

You can see a little more things that I did with key code pressing and updating multi-dimensional arrays, a depth layer, and then then I, and this is drawing other layers, it’s broken out into a different function clause. This is ES5, this is a while ago, but it’s fairly straight forward and pretty clean to understand, I believe.

So check it out if you like p5.js and I hope this was helpful for you.

(switches to Stack Overflow website)

I’ve also answered some questions on stack overflow about p5.js, so you many in poking around online find me on there as well.

(switches back to generative art page)

I hope this was helpful guys, and once again, if you have any very cool animation projects or just Javascript orientated work I would love to come onto the project and see how I could help deliver those fantastic results for you.

Take care and be well. Bye.