Hello! I'm making a video!
You are watching a video, I think ...
The goal of this video is to talk about something called p5.js
What is p5.js?
Who should you or might you be thinking about learning
this thing called p5.js from the very, very beginner stage
without any experience with anything else whatsoever
and what might you use it for and what's going to happen?
Am I making more videos? less videos? That sort of thing.
So, first let me give you a little context.
There is this thing called Processing.
Processing is a project that started in 2001
by Casey Reas and Benjamin Fry
The two of them were students together at the MIT media lab -
designers, artists, programmers - trying to make a tool
that could help them with their own work.
Since then, since 2001, this idea of 'creative coding' - it's a complex term,
but - 'creative applications through programming'
I like to think of it as 'creative expression through programming' -
how do you communicate and express your ideas
while making computational tools -
It's also like - if you know how to learn to program -
There's a lot of like, "Learn to program! Learn to program! Everyone's gotta
learn to program! Aah!" kind of stuff going on these days -
Take a deep breath, relax, you don't need to know how to program.
There's lots of great stuff in the world -
you could learn how to play the violin, that's a wonderful thing,
but there is an aspect of learning to program that is very powerful in that
that software is something that drives so much of what we use.
And if you want to not be stuck just, kind of using whatever software
other people - large corporations -
if you want to be able to express yourself in new and different ways,
learning to program is a great way to do that.
Also, and this is gonna kind of come around full circle here,
learning to program and have the results of what you program go in a browser
on the web, so that other people can see those things -
that you can share and distribute easily - this is a very powerful thing.
So, interestingly enough, when Processing was first created, it was built on top of
a programming language called 'Java', which was all the rage back in 2001
and one of the reasons why Processing used Java is that
you can make these things called applets and applets would run in the web browser!
So you could program your thing in Processing, upload it to the web,
distribute it, all the world would see it, you'd become rich and famous
or, even better, you don't become rich and famous
but you do something good for the world - or both, perhaps!
then, that made a lot of sense.
Fast-forward 14 years later, 2015,
when was the last time you saw a java applet on the web?
If you saw it, it was just basically an experience with a giant error message
that told that your browser crashed and nothing worked.
The language these days of the browser is something called JavaScript.
And I'll say a bit more about that in a minute
JavaScript allows you to program and create all sorts of exciting things
that happen in a web browser. If you're interested in creating unique
and animated and creative web content, learning JavaScript, learning p5.js, is
something you might be interested in.
Now, [...] some time in the last couple of years, a bunch of us were talking
and we asked the question:
"What language would you pick if Processing were being invented today?"
And somebody that answered that question in an interesting way,
her name is Lauren McCarthy.
So, Lauren McCarthy began a project, in collaboration with the Processing f...
Processing is a not for profit foundation, so I was about to say Processing foundation -
[...ramble...]
So Lauren said, "Ok, well, what if Processing was being invented today
and the language, instead of Java, was JavaScript?"
So this is what p5.js is, as a project.
I should just briefly mention, there's another wonderful project
called processing.js.
I know this is crazily confusing, I just want to briefly mention it.
processing.js is a project started by John Resig and many other people
have worked on it since then.
processing.js sort of tries to solve this other problem:
your java code can't run on the web as an applet anymore,
what if we could behind-the-scenes translate it to JavaScript
so that it ran there?
But this project, p5.js, is different in that it is a new project.
We can now think wonderfully and happily about
that thing called Processing that I briefly spoke about,
but mostly right now, for the purpose of these videos,
we can now ignore this.
p5.js is an environment, a simple - hopefully simple -
and beginner-friendly environment
to help you learn JavaScript,
to make applications, computational, creative, interesting -
hopefully interesting- things happen in the browser.
And eventually, you could go in a lot of routes with this.
You might make art, you might make data visualization,
you might make websites, as like a web designer,
there's lots of paths that you might take
from this basic set of videos that I hope to make.
I think that's just about the full context.
There's some other pieces to
"how do you make something happen in the web browser",
you need more than JavaScript, you need these other things called
HTML, CSS, and JavaScript,
but I think what I wanna do now, very briefly,
and I'm gonna pick this up in the next video,
is just look at, open p5.js and do a few things with it,
just so you get a sense of what kinds of things it can do.
What would be great is if I had a video that showed you like
"Here are a bunch of awesome projects that are made with these kinds of tools."
Don't get me wrong, there's a lot of really amazing JavaScript framework.
So I think a missing piece here --
Just like Processing was built on top of Java,
it's a little bit different here
p5.js is not really built on top of JavaScript, it is a set of...
boy, this is a hard one ... and I was doing so well! [...]
What I think is useful to think of here for a moment is p5.js is two things:
One of these things is it's a library of functions.
So, here's a great way of thinking about it.
Let's say you want to learn JavaScript. And you go to Google and you type,
"JavaScipt" - boom. Whoa! There's a lot of stuff out there.
There's like a million Stack Overflow posts, which is like
a place where people ask questions,
there's 15 million "this.js" things you could learn
and there's something called jQuery and there's so much.
So, one of the goals, I think, of p5.js is to give you a little bit of a sandbox,
a walled garden, to learn some of the basics, and for that,
you get a library of functions,
to draw a circle, or draw a rectangle, or set a color
so you can just use some basic drawing functions to learn some of these
beginner steps of programming.
The other thing it is, and I think I need to move over to the computer here,
The other thing it is is this thing here
Sam Lavigne has created something called the p5.js editor
What this means is an application, a program on your computer that
you can launch and just start typing some code in and get your feet wet
and start to experiment and learn a bit about code, without having to worry about
all of the larger pieces of things that you need in order to make something happen
on a web page. We're gonna do it very simply here.
So let's look at that for a second. So I'm going to launch this.
By the way, I just downloaded it. I haven't -- I've used it...
but, I haven't on this computer. So, look:
"p5 is an application downloaded from the internet. Are you sure you want to open it?"
So now's the time when you could say, "Eh, I'm just going to play the violin."
Or, "I'm going to go play frisbee - football - soccer."
But I'm going to open it. [...]
A newer version of p5 is available. I don't want to download it right now -
just hit ok. Oops, I do want to download it right now. Ok.
So this here ... [getting things opened]
this here is the p5.js editor.
And if you look at it, it's already filled in a little bit of code for you.
So you can start to see, "Ah, I have to learn to program, I have to learn
some strange new language and syntax."
function. draw. parentheses. curly bracket. curly bracket.
These are some things that will come to light if you're for the first time
watching this video and looking at programming.
So I'm gonna do a couple things here real quick.
One thing I'm gonna do is I'm gonna type in CreateCanvas and down here under draw
I'm gonna type rectangle and I'm gonna type some other numbers
and I'm going to zoom back out and hit play.
And we can see here,
look what's happened.
I wrote something that says, "createCanvas!"
and what did that do? It made a canvas.
That's the canvas.
Then, down here, I wrote something that said rect, short for rectangle.
What did it do? It made a rectangle.
So these are the first pieces, the first things, that I'm going to show you
in the next video.
What lines of code do you start to write, and what do those lines of code do?
With ps.js here, the first things we're gonna learn is how to, like, draw a picture.
And, by the way, this canvas is actually a little mini web browser that's opened.
So as more and more videos come to pass, we can peel back some of these layers
and see how you might take this and put it on the web somewhere,
share it, allow people to interact with it, that sort of thing.
So, this video's ok. B+.
I think I'm going to keep it though and upload it and
someday there will be a better one... probably never...
This is the end. I'm gonna make another video and then upload that too
and you can watch many of them.
And I'm keeping a list - maybe I'll try to put a link in the description or something
maybe a list of all the videos I'm going to make.
I'm gonna make a lot of intro ones and then some project-based ones like
how to take a Google Spreadsheet and visualize it as a graph in JavaScript and
try to do that in a short 10 minutes.
That's sort of my plan for this semester.