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

[ad_1]
In this video, I look at how to create your own variables and how to use them to animate elements of your p5.js sketches.

Next video:

Support this channel on Patreon:

Contact:

Send me your questions and coding challenges!:

Link to code on Github:

p5.js:

For More p5.js Videos:

Help us caption & translate this video!


Posted

in

by

Tags:

Comments

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

  1. Kinawi Avatar

    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() {
    noStroke();
    fill(255, 0, 0, 20);
    ellipse(mouseX, mouseY, 50, 50);
    }
    function keyPressed() {
    if (keyCode == 32)
    background(250, 250, 100);
    }

  2. Kinawi Avatar

    thank you so so so much i love you

  3. DerEddie LoL Avatar

    1,5x speed will save time unlucky u cant speed it more….

  4. Jiehan Aldicho Avatar

    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?

  5. CelsunYesWeCan Avatar

    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

  6. DAYA SHANKAR GUPTA Avatar

    great job ! and need help in random and map functions

  7. RocksDa RS Avatar

    its either null or undefined idk which

  8. Programming kitten Avatar

    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
    fill(200,250,200);
    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

    }

  9. Dameon sharysan Avatar

    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?

  10. Ansh Shah Avatar

    what is the speed of the draw

  11. Charlene Kuye Avatar

    why doesn't this work ?: circleX = circleX++;

  12. h4lyz0r 1337 Avatar

    You really know how to teach and its free lol finally i know how a variable works!! thanks man

  13. BOB WINSTAH Avatar

    On my Birthday!!!!

  14. Kenny Rodriguez Avatar

    I began watching solely to learn some things for a project. But, instead due to your amazing teaching ability. I am watching every single video for the sake of further cementing my knowledge. You're an amazing teacher and judging by your demeanor an amazing person. I hope one day I can show you my gratitude through the work I create thanks to your instruction!

  15. zwilliamsdev Avatar

    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() {
    //background
    background(100);

    //bar
    fill(0);
    rect(0, 180, 600, 40);
    //ellipse
    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;
    }
    }
    }

  16. Osama Sonbaty Avatar

    Thank you so much for the effort, I'm really enjoying your tutorials and applying them

  17. SilverFilms Avatar

    thank you a lot , buddy

  18. jiveturkeh Avatar

    dude these videos are amazingly helpful, cant thank you enough

  19. The WD Animation Station Avatar

    try this program /

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

    function draw() {
    //background
    background (75,40,0);
    //body
    noStroke ();
    fill (50,50,200);
    rect (105,100,15,80,10);
    //legs
    fill (250,0,50);
    rect (118,170,5,50,15);
    rect (102,170,5,50,15);
    //feet
    fill (150);
    rect (118,220,15,10);
    rect (92,220,15,10);
    //arms
    fill (0);
    stroke (0,250,250);
    line (120,130,130,170);
    line (104,130,69,120);
    //hands
    noStroke ();
    fill (250,150,0);
    ellipse (130,170,10,10);
    ellipse (69,120,10,10);
    //head
    fill (200,250,50);
    ellipse (mouseX,mouseY,50,50);
    //eyes
    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);
    //text
    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);
    noLoop();
    }
    }
    }
    }
    }

  20. Peter Schmitt Avatar

    Is it too early to include compound operators like += ?

  21. Crazy Green Avatar

    Thx for tutorials! You are the best teacher in the world!

  22. Johnny Avatar

    Loved the tutorial, i paused at 10:23, i did circleX++; does that do the exact same thing as what you did?

  23. tianmo lan Avatar

    Thank you for making such excellent tutorial

  24. Erick Moreno Avatar

    ta ta tan tan taaan tan 🙂

  25. Jonathan burnhill Avatar

    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

  26. deepank verma Avatar

    Can we also input or read information from microcontrollers through serial communication?

Leave a Reply

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