1.1: Introduction – p5.js Tutorial

1.1: Introduction – p5.js Tutorial


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.

100 thoughts on “1.1: Introduction – p5.js Tutorial”

  1. Lucius Cornelius Scipio

    to anyone having trouble with the download, on the http://p5js.org/download/ page, scroll down to the bottom, where is says Older releases / changelog p5, editor, and click editor, then click p5-win.zip to download the windows version of p5.js

  2. Great lecture, thank you !;..and first small problem is p5 site is permanently down, cant make Visual Code run Processing and p5, eventhough its about Java.

  3. i get an error saying make sure index.HTML is in project but when i do that it doesn't execute the code, it just displays the text in the webpage please help thanks in advance!

  4. hello, hope you are doing well. Can you please suggest me the best book to learn javascript, node js and angular js?

  5. Hello , i am a junior front end developer, I really like your all the tutorials, I watched first one which is about neural network and decided to watch all your videos from the start, really addicted to it. omg!!!! Please keep doing those code challenge and all of those are so fkn interesting! really like it. Great teacher !

  6. Philip DiPatrizio

    after watching countless videos of yours over the past 6 months, I feel like watching this video is like watching the birth of a star.

  7. hi, i have a question,

    i'm doing a Demo Quiz with javaScript, but i stuck in one place i don't know what to do.

    i made just 3 questions and i made all the functions and everything works very well, BUT i want to add to each question a value, for example, the first question = 5 the second = 2 the third = 8 etc.

    now my problem is that i couldn't do that, i want every time the user clicks on the correct answer he will get the value of the question if it's correct then he will get +5 if not he will get -5 (for example).

    in the end, he will has the scour of the correct questions and anther scour of the Wrong answers.

    i feel i tried every thing and i couldn't do it!

    thank you in advance.

  8. Thank you so much sir.. For keeping up the energy level constant throughout the video…. Learnt a lot from you sir…. God bless you

  9. Thanks for creating this video, love your style. I want to teach coding and make it applicable without having to learn lots of new languages.

  10. HI! Since those rectangles could be made with Processing and P5.js , what is the difference between the two and which one should I start learning? I am very interested in Computational Science and Chemical Engineering. For my future projects I want to showcase my experiments in simulations (like fluid flow in tubes in respect to surface area, heat transfer in different materials, etc…) just like I see in those really cool sci-fi movies lol. I wonder which program, between Processing and P5.js, can help me achieve that in the future?

  11. Can you please make a video on how to use this library with angular app. I am trying to use p5 sound lib for recording speech with microphone

  12. Nathalie Diane R.

    Please teach everything related to programming!!! I can't find anyone as good at teaching coding as you. 🙁

  13. This is what I was looking for. Explanation what is p5 and Processing + a bit of information on its history and ideas.
    One might call it offtopic, but I call it good way of teaching.
    I would like to have fun with p5 right now… But the offtop was me looking at stuff related to processing when I was supposed to work on ASP.NET and/or angular.js right now… I guess I will save this channel for later…

  14. I found the Renato Russo (https://en.wikipedia.org/wiki/Renato_Russo), in a programmer version. Look for the picture of the channel!

  15. You're so goofy. You make me laugh. I love that.

    "I'm not going to download that now. I'm going to click 'ok.' Oh. I want to download that now…"
    For a split second, I thought, "Then what was the cancel button for?"

  16. Damn, you're the greatest teacher for lifeless creatures like me.
    I never had a clue such a thing (p5.js) existed.
    ~Thank you so much.

  17. Sir..your way of Explaining js stuff is like a very well experienced coder..which is umm .Super cool ..what are you really?? a coder or a lecturer???

  18. @The Coding Train
    If you run an application in the web, everyone can copy your code.
    If you use java or other languages instead, the can't (not as easy)

  19. 1:45
    You can learn how to play the violin
    that is a wonderful thing.
    How genius, it rhymes. You are a great teacher!! 🙂

  20. So this is not an introduction, this is a history. And it's a mess. It is implied it is about p5.js. But there is something about JavaScript. Yet it is more about Java.

  21. I enjoyed watching this video sir 😀 Not so Serious, but still informative. Want to learn p5 with you. Thanks!

  22. Manas Ranjan Acharya

    Hello.I am new to p5.js..so which videos or which playlist i should see or learn ??please share or please give i cant find which videos…

  23. What kind of programming language should I use to create a program where I can animate the lines in 2d pictures with shape keys?

  24. a lil code just to see a couple of shapes

    function setup() {
    createCanvas(400, 400);
    }

    function draw() {
    background(100);

    rectMode(CENTER);
    strokeWeight(4);
    stroke(0, 0, 255);
    fill(0, 255, 0);
    rect(200, 150, 150, 150);

    noStroke();
    fill(255, 0, 0, 175);
    ellipse(150, 250, 100, 75);
    }

Leave a Reply

Your email address will not be published. Required fields are marked *