Every day you probably use a sink or shower to get water at a certain temperature. You're probably even pretty good at getting exactly the temperature you want. You may know, for example, that a 1/4 turn of the left knob and 1/2 turn of the right knob produces the perfect temperature, not too hot and not too cold.
Even though you do this every day you may not really know anything about plumbing or how water-heating systems work. In fact, you totally do not need to know how those things work to use them in your daily routine.
That's pretty cool!
To summarize, knowing how to use something:
Can sometimes be very different from knowing all about how it works or how it is wired up behind the scenes:
(what's even going on here ¯\_(ツ)_/¯)
In your future as a programmer you will be doing both of these things. Sometimes you will be defining the blueprints and inner-workings of how something will work. Other times you will be using code the way you use a sink: There may be a whole complicated system behind that code but you only need to know how to properly turn the knobs to be a great and proficient user of that sink and get the water temperature you desire.
p5.js is a code library. A library is just a bunch of code someone else
wrote that we get to use. p5.js is written in the JavaScript programming language-- that's what
the .js stands for. When you're working on your p5.js projects you will be writing
programs with JavaScript. You've probably heard the term program before.
It simply means a collection of code that is meant to be run by a computer to perform
a specific task.
You'll be writing your first program very soon!
p5 is a great way to introduce the fundamentals of JavaScript, or really any programming language, because it provides an easy-to-use interface (you could say the knobs on a sink are the interface for a water-heating system, it's through them that we use and interact with the system) backed by a powerful library that we can use to make really cool things surprisingly quickly.
To continue with the sink analogy, p5 sets up the whole plumbing and heating system and makes certain code available that will allow us to use and change that system.
With p5.js:
-
You can write code that will draw shapes and colors on the screen in a web browser like Google Chrome.
-
You can write code that will animate your shapes and make them move over time.
-
You can write code that will make the things you draw respond to events. An event is something like the user of our program clicking or moving the mouse.
By combining different pieces of code that do these things you can build up programs that can be simple or complex, interactive games or works of art, and you'll be able to share your programs with your friends and family on the internet!
We are going to start by drawing some shapes on the screen! Doing this will require just a little bit of setup. Since we'll use the p5.js library in a web browser, we'll have to look at a little HTML. Luckily, that should be no big deal to all of you :)
We'll cover this in the next lesson.
Many more examples of what you can do with p5 can be found at these links: