Hi! I'm Lauren (cue), and I want to introduce you to p5.js (cue).
p5 is a library that takes the core ideas of Processing and brings them to the web. So you can do everything you've done with Processing, but do it with Javascript.
All of the examples you'll see here were created with p5 and at the end of the video you'll have a chance to see how they work.
To walk you through some specifics, here's Dan Shiffman.
Hi! Thanks Lauren and thanks for having me! I'm excited to talk more about p5 with you.
So how does p5.js work? What are some of the things you can do with it?
One of the first things you might want to do is draw to the screen, so let's start with something simple: a circle. (cue)
It doesn't have to be a circle, of course. It could be a square (cue) or a triangle (cue) or a flower (cue) or anything else, but we'll start with a circle (cue). The code for writing these elements (cue) is just like Processing but the language is JavaScript.
p5 is a great tool for drawing in the browser, but these drawings don't have to be static. We can interact with them. Now when we click our circle (cue) it will change colors. Go ahead, try it!
And since we're in the browser, we can create HTML elements and interact with them as well. So lets create a slider (cue) and as you move that slider back and forth, you can adjust the color of the circle. How was that slider created? With code as well (cue). Oh, how lovely and simple.
We don't have to just draw stationary shapes to the screen, though. We can animate, too. So let's send our little circle flying around (cue). Now let's add 100 more (cue) and simulate a flocking system so they'll all swarm around like birds or a school of fish.
Let's add another behavior (cue). Now the circles are avoiding my head. If you move your mouse around, they'll try to avoid it, too. Try it!
Since we're on the web, we can also interface with hundreds of other libraries and APIs. For example, lets grab the current weather in New York City (cue). There it is. Now let's have our flock of circles react to the wind direction and speed (cue).
Remember, all of this is happening in real time in your browser and after the video you'll have a chance to look at the code that makes it work.
You can do a lot of exciting things with p5.js. It doesn't have to be visual, either, you can play with sounds. For example, you can generate tones in realtime and play a little song. (cue) You can also let the user choose what to draw by creating a generative drawing tool. . . and combine that with sound! Try dragging your mouse around to draw a picture then release and see what happens. (cue)
Thanks for taking a look at p5 with me! I'm excited to see what you build! Now to give you some information on getting started with p5 or even helping with its development, let's go back to Lauren. Bye!
Thanks Dan! In a moment I'll leave you with links and resources to help you learn more about p5.js. For those new to programming, you'll find links to help you get started working with Javascript and p5, including the code used to create our examples here. For those familiar with Processing, you'll find resources to help you transition to working on the web. For experienced programmers, you'll find information on how you can help contribute to p5's development on GitHub.
Thanks for watching and I hope you have a great time with p5. Bye!