2.2: Variables in p5.js (Make your own) – p5.js Tutorial

2.2: Variables in p5.js (Make your own) – p5.js Tutorial

OK, so I’m back here, and
I’m talking about variables, I hope, if I can keep my brain
working and churning and making sense with the language and the
speaking thing this will work. OK, so what did we– we looked
at in the previous video, we made this kind of big leap
in our programming lives, right? We established the fact that
there is a flow to a program. What is that flow? Well, there’s, at least for
p5.js which is the environment that I’m looking
at in these videos, the flow is defined by two
functions, setup function– which happens once
and only once– draw function which loops
over and over again. Typically, a thing that
you might do in Setup is create your canvas. That happens just once
when the program starts. Typically, what you might do
with draw– which loops over and over again– is draw stuff. And we establish the fact that
if, instead of using a number, a hard-coded number,
we put in a variable– a word that stands
in for a number– then each time draw executes,
if that number changes, something different
might happen. And that’s how animation
happens on the screen. The ellipse is drawn
where the mouse is. Then the mouse moves, and
it’s drawn where the mouse is. Then the mouse moves. So this was an
exciting first step into the world of variables,
but here’s the thing. There’s going to be
a lot more that you want to do besides just
move things with the mouse. And even if there’s
other built-in variables, like you could know how many
times this draw executed. There’s a built in
variable called FrameCount. But ultimately,
what you will need is your own variables,
variables that you make up, that you define, that you
bring into this world. You’re going to bring
variables into this world, and that’s going to open
up a lot of possibilities that you didn’t have before. So, for example,
right, this circle is moving across the screen
according to the mouse. What if you want
that circle, like, I’m not even touching the mouse. I’m not even touching it. I just opened my
program and that circle just moves on its own. Magic, right? So this is our first step. This is what we want to do. Instead of using a built-in
variable, we want– I want to use our own variables. So how do we do that? So we need a couple steps. Step one is to
declare the variable. I have to declare. I declare. I do declare,
solemnly, on this day, the 3rd of September,
2015, that I declare that this variable will exist. Number two is, we
need to initialize. We need to say, a-ha. In addition to the fact that
I declare this variable, I will give it an initial value. And then the third step is– I guess this is optional
to use the variable, although it wouldn’t
make a lot of sense to declare and initialize
a variable if you didn’t intend to use it. So how do we do this? Declare is actually
something quite simple. All you have to do is
write the term var, V-A-R, which stands for variable. This is how you do
it in JavaScript. Other languages
it’s different, var. So this means I am now
about to declare a variable. The next thing I have to do
is give that variable a name, and that name can be
absolutely anything I choose. Rainbow is a nice
name for a variable. But ultimately,
what you want to do is you probably name
it with something that is a term that is
associated with what you might intend the variable to do. So what I intend to do with
this variable that I’m declaring is use it as the x
position of this circle. So I might say circleX is
the name of my variable. I’m just going to
use the word circleX. And typically, I’m just
kind of being long-winded. You could even just name it x. There’s a bunch of rules, like
you can’t start a variable name with a number and you can’t
use strange characters in a variable. But you’ll sort of figure that
out through trial and error. Mostly, you just
want to use words and you can have any spaces. So declare and name. Our declare is saying
var and the name. So now I could say
circleX instead of mouseX. So actually X, that’s
used, so I’ve done step 1 and I’ve done step 3. Use the variable. But if you think about it,
I need a semicolon here. If you think about it, there’s a
huge missing piece here, right? Because what’s the
value of circleX? I mean, it could be anything. Right now, it’s actually
technically in JavaScript, the value is undefined. I think I’m right about that. Someone will correct
me if I’m wrong, but it’s undefined because I
never gave it an initial value. This is important. It’s not going to be able
to draw a circleX anywhere unless we give it
an initial value. And so I could
right here in setup, I could say circleX equals 50. So this is giving
it, initializing it. And look at this statement. This is called, this is
something totally new. The only thing, if you’ve only
been watching these videos and this is all you’ve
picked up in programming, all we had were function calls,
createCanvas, background, ellipse. Now we have something new. This is what’s known as
an assignment operation. We are assigning the value
50 to the variable circleX, and we would not have
been able to do this if we hadn’t declared our
intention to use circleX. And notice our
declaration is at the top of our code and our
initialization is in Setup. The truth of the matter is, even
though I showed you as these, as two separate steps,
I’m kind of showing this to you because it’s
kind of interesting. Like, look, that’s
something else that you might do in Setup. At the beginning
of my program, I want to have this variable value
equal to some initial value. But the truth of the
matter is most of the time, and in all of the examples
you’re going to see, step 1 and 2 will be combined. And so, I’m now going to
rewrite this chicken scratch sprawl as one line of code. So I can both declare and
initialize the variable instantly by saying var
circleX equals 50, OK? So we’ve done something. We’ve declared a variable,
saying var, given it the name. We’ve given an initial value. We’re using it to stand in
for something in our code. Let’s go take a look at this
actually work over here. OK, so here’s a little program. If I run it, you can see
what exactly what we have. We have a ellipse being drawn
only ever at location 50, so it doesn’t move. So now let’s add that
stuff to our program. So at the top I’m going to say
var circleX, and by the way, you can declare– we’re going to see later that
you can declare variables in other places. But for right now, I
think as a constraint, I would like to say
like all the variables, they all get
declared at the top. Let’s just use that as
a constraint right now. Then, I’m going to give it
an initial value equal to 50. And right here, instead
of saying ellipse 50, I’m going to say
ellipse circleX. And I’m going to run it. Look at that. Same exact program, only instead
of just typing hard coding 50 there, I have 50s up here. OK, now. Let’s just prove that
this is actually working. I’m going to say 150,
and stop and start it. Look, that circle is
a little bit further. Now I’m going to
say 250, and look. That circle is even a
little bit further over. So whatever the
value of circleX is, that’s where that
ellipse will be drawn. OK, so at the beginning
of this video– I didn’t actually say this,
but the beginning this video in my mind was, I would like to
make that circle move by itself across the screen. You’re watching
all these videos, and all you get is
a little circle that moves across the screen. But it’ll lead, hopefully,
to bigger and better things. How are we going to do that? So let’s come back
over here for a second. OK. What I want to do
is the following. I want the circle first to be
drawn at circleX equals 50. So remember, draw,
which is this function, is looping over and over again. It’s over and over again. It happens once, it
happens another time, it happens another time. So first I want
to draw it at 50. Then, maybe, I want
to draw it at 51. The next time maybe I
want to draw it at 52. The next time I maybe
want to draw it at 53. Right? Each time draw loops– executes it again– I want the circle to
be drawn one pixel over from the previous time. So if you had to
write an instruction to do that, each time to
redraw, what would you say? You might say increment
circleX by one. At take 1, and 1 to circleX. You might say add 5 to circleX
and it’ll move from 0 to 5, to 10, to 15, to 20. Right? So how do we write
that with code? Here is a way. Remember we had an assignment
operation? circleX equals 50. There’s something
weird you can do. It’s like the most common
thing in programming, but at first it might
seem a little weird. circleX equals circleX plus 1. Look at that statement. For a moment, you might
look at that and think, that’s like a paradox. That’s impossible. Like a number can’t
equal itself plus 1. 5 does not equal 6. 7 does not equal 8. 20 does not equal 21. But this is not
what we’re doing. I am not testing
for equality here. This is an assignment operation. What I’m saying is,
take circleX and set it equal to the value
of itself plus 1. So if circle x is equal to
50, 50 plus 1 equals 51. Now assign that
value to circleX. circleX is now 51. Now run through draw again. Take the value of circleX,
51, add 1 to it, 52. Assign that value
back to circleX. So in an assignment
operation, the right-hand side of the equation is always
evaluated and then assigned to the left-hand side. This is an
incrementation operation. We’re just taking a
variable and adding 1 to it over and over and over
again because draw loops. So let’s go over here, and see. First, let’s start circleX at 0. So I just changed
circleX to starting at 0. And you can see,
there it is at 0, and now I’m going to
add that line of code. circleX equals circleX plus 1. Now the circleX
equals circleX plus 1. Every time through draw,
circleX will go up by 1. Yeah. It’s moving. OK. So that really worked. So, you know, I know
this is like incredibly simplistic and basic
in terms of the result. But this is the foundation
upon which you can build lots of interesting things. Because there’s a lot more math. There’s a lot more ways you can
change a variable besides just adding 1 to it. There’s a lot more places
you could put variables besides just in the x spot. So what I would say
to you right now is, why don’t you try making a
variable for the y position? Why don’t you try
making a variable for the size of the circle? Can you make the circle grow? Can you make it shrink? Can you make a color change? See if you can make
up more variables, declare more
variables at the top, and put them in different places
and try to do stuff to them. The truth of the
matter is, in order to get kind of more
interesting results, you’re going to need
something that I’m going to talk about in a future
video, conditional logic. Because, you know, here’s the
next logical thing, right? That circle– in
the first place, let’s make it go
a little faster. Like circleX equals
circleX plus 10. Like, oh, where’s that circle? No, no, no, don’t go away. Come back, come back,
back, back, back. It’s never going to come back. But if I made some
conditional logic like, if it gets to the end, then turn
around and come back, you know, that’s something I’m going
to do in a future video. But for now, just try to
add a bunch of variables and see what you can get. OK? That’s good, but I’m going to– there’s going to be
another video in a moment where I’m going to show you
a different way of organizing your variables. I’m a little skeptical about
whether this is a good idea or not, but I’m going to do it. OK, this was a 12-minute video
and I’m done recording it.

78 thoughts to “2.2: Variables in p5.js (Make your own) – p5.js Tutorial”

  1. Thank you for making your videos, I started on khan academy and am doing the natural simulations as well as the kadenze course and I seem to understand programming better from a animation point of view maybe it's how my head works lol anyway thank you again for releasing this material

  2. try this program /

    function setup() {
    //create canvas
    createCanvas (1200,800);

    function draw() {
    background (75,40,0);
    noStroke ();
    fill (50,50,200);
    rect (105,100,15,80,10);
    fill (250,0,50);
    rect (118,170,5,50,15);
    rect (102,170,5,50,15);
    fill (150);
    rect (118,220,15,10);
    rect (92,220,15,10);
    fill (0);
    stroke (0,250,250);
    line (120,130,130,170);
    line (104,130,69,120);
    noStroke ();
    fill (250,150,0);
    ellipse (130,170,10,10);
    ellipse (69,120,10,10);
    fill (200,250,50);
    ellipse (mouseX,mouseY,50,50);
    fill (250);
    ellipse (mouseX-10,mouseY,15,15);
    ellipse (mouseX+10,mouseY,15,15);
    fill (0,0,250);
    ellipse (mouseX-10,mouseY,5,5);
    ellipse (mouseX+10,mouseY,5,5);
    fill (250);
    noStroke ();
    text ("put his head back on",1080,790);
    //lock in head
    if (mouseY>97){
    if (mouseY<103) {
    if (mouseX>109) {
    if (mouseX<115) {
    fill (75,40,0);
    noStroke ();
    rect (1080,770,135,25)
    fill (250);
    text ("Thank you for putting my head back on!",10,50);

  3. A probably poorly optimized but functioning Cylon red eye scrolling 😀

    var circleX;
    var dir = 1;
    function setup() {
    createCanvas(600, 400);
    circleX = width/2;

    function draw() {

    rect(0, 180, 600, 40);
    fill(255, 0, 0);
    ellipse(circleX, height/2, 160, 40);

    if(dir == 1)
    if(circleX < 600)
    circleX += 3;
    else if(circleX == 600)
    dir = 0;
    circleX -= 3;
    else if(dir == 0)
    if(circleX > 0)
    circleX -= 3;
    else if(circleX == 0)
    dir = 1;
    circleX += 3;

  4. Dont you have to declare a variable inside a function in order to have it recognized? Or bring it in as a parameter when calling it?

  5. Tnx you are the best teacher ever ! I create a race game 😀 !
    var vankataX = 0;
    var robotX = 0;
    var robot2X = 0;
    var robot3X = 0;

    function setup() {
    createCanvas(600, 400);
    function draw() {
    background(250, 250, 100);

    // Robot
    fill(200, 0, 0);
    ellipse(robotX, 50, 50, 50)
    robotX = robotX +2

    // Human
    rect(vankataX, 100, 50, 50);

    // Robot 2
    fill(0, 100, 0);
    rect(robot2X, 150, 50, 50)
    robot2X = robot2X +1.2

    // Robot 3
    fill(0, 0, 100)
    ellipse(robot3X, 200, 50, 50)
    robot3X = robot3X + 1.5


    function mousePressed () {
    vankataX = vankataX +20


  6. why is that if follow your code in the p5js, at the end if want to run the program it will always say "Uncaught SyntaxError: unexpected token" i will verified with your video but no mistake, but still have this problem

  7. I didn't know what happened but I somehow can't assign variables outside the functions. I was able to do it before. Can anyone help?

  8. try this code //hold mouse button to draw & hit the space-bar to clear canvas

    function setup() {
    createCanvas(600, 400);
    background(250, 250, 100);

    function mouseDragged() {
    fill(255, 0, 0, 20);
    ellipse(mouseX, mouseY, 50, 50);
    function keyPressed() {
    if (keyCode == 32)
    background(250, 250, 100);

  9. Is the behavior of the function draw() the same when used in all javascript applications? Or is the behavior defined by a library or something related to P5 specifically?

  10. try this : 

    var i = 0;
    var j = 0;
    var sign_i = 1;
    var sign_j = 1;
    var circleX = 0;
    var circleY = 0;

    function setup() {
    createCanvas(windowWidth, windowHeight);
    background(30, 55, 80);

    function draw() {

    circleX = i;
    circleY = j ** 2 / 100;

    fill(255, 255, 255);
    ellipse(circleX, circleY, 20);

    if (circleX >= windowWidth || circleX < 0) {
    sign_i *= -1;
    if (circleY >= windowHeight || circleY < 0) {
    sign_j *= -1;

    i += 3 * sign_i;
    j += 3 * sign_j;

  11. function setup() { 
      createCanvas(600, 550);
    //baby blue

    var r=0,g=0,b=0,a=255,s=10
    function draw() {
    //change setting
    function mouseClicked(){
    if (mouseX>0 && mouseX<50 && mouseY>0 && mouseY<50){
    }else if (mouseX>0 && mouseX<50 && mouseY>50 && mouseY<100){
    }else if (mouseX>0 && mouseX<50 && mouseY>100 && mouseY<150){
    }else if (mouseX>0 && mouseX<50 && mouseY>150 && mouseY<200){
    }else if (mouseX>0 && mouseX<50 && mouseY>200 && mouseY<250){
    }else if (mouseX>0 && mouseX<50 && mouseY>250 && mouseY<300){
    }else if (mouseX>0 && mouseX<50 && mouseY>300 && mouseY<350){
    }else if (mouseX>0 && mouseX<50 && mouseY>350 && mouseY<400){
    if (mouseX>50 && mouseX<80 && mouseY>0 && mouseY<30){
    }else if (mouseX>50 && mouseX<80 && mouseY>30 && mouseY<60){
    }else if (mouseX>50 && mouseX<80 && mouseY>60 && mouseY<90){
    if (mouseX>80 && mouseX<110 && mouseY>0 && mouseY<30){
    }else if (mouseX>85 && mouseX<105 && mouseY>30 && mouseY<50){
    }else if (mouseX>90 && mouseX<100 && mouseY>50 && mouseY<60){
    //apply color
    function mouseDragged(){

  12. my youtube comments are finally showing for me to input this.. thank you for existing and caring so much about this.. i really was lost until now

  13. Maybe someone can help me, I am using brackets with p5.js library. I keep getting error talking about background, draw, creatcanvas, are not initilized(sp*). I know it has something to do with JSlint and ESlint. all the code runs fine, its just really irritating trying to find actual code errors when every line has a "error". If anyone has a fix I will be forever grateful. I can post screenshots if anyone needs to see the issue. PS I've been following the beginners series and have done the empty folders using cmd (I am using windows 10), and I have set up the locahost server and it all works great. PSS these videos are amazing thank you for taking the time to show us all of these.

  14. Thought of applying this in all of the elllipses' aspects and I got this:
    function setup() {
    createCanvas(500, 500);
    function draw() {
    background(255, 255,255);

    ellipse(160, 160, circleX, circleY);
    ellipse(circleX, circleY, circleX, circleY);
    ellipse(circleX, 60, 60, 60);
    ellipse(60, circleY, 60, 60);
    ellipse(circleX, circleY, 60, 60);
    ellipse(60, 60, circleX, 60);
    ellipse(60, 60, 60, circleY);

    circleX=circleX + 5;
    circleY=circleY + 5;

  15. Hey! you may not read this but I went to the CC fest and saw you there, and a lady referred me to your channel. Great content by the way!

  16. Sir.Daniel, why does mine says in the console "Did you just try to use p5.js's mouseY variable? If so, you may want to move it into your sketch's setup() function.

    For more details, see: https://github.com/processing/p5.js/wiki/p5.js-overview#why-cant-i-assign-variables-using-p5-functions-and-variables-before-setup" im only 10 years old but can understand and read critically

  17. something simple I made after watching this video
    Coding Train is such a good teacher

Leave a Reply

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