Variables in p5.js (mouseX, mouseY)
Code! Programming with p5.js Lesson #2.1
In this video, I introduce the concept of variables in p5.js. The setup() and draw() functions are covered as well as mouseX and mouseY.
Topics
- 0:00 - Introduction
- 0:35 - What is program flow? How does it work in p5.js?
- 2:22 - Let's simplify!
- 3:16 - What is a variable?
- 4:47 - What's happening here?
- 5:26 - What could we do? Let's make a simple painting program!
- 6:05 - Let's move background into setup. What do you think is gonna happen?
- 6:34 - Why does that happen?
- 7:31 - Let's talk about events! We can add a mousePressed function.
- 8:41 - Let's add mousePressed and put background in it!
- 9:07 - You might have this question. Why isn't it flickering?
- 10:10 - What can you try? Can't wait to see what you create!
Community Contributions
- Moving objects by Godeta (Source Code)
- Moving objects - digital segment numbers by Serup (Source Code)
- pixel to cm converter 0.01 version by Laszlo Nesztorov (Source Code)
- Doodler with Color Options by Kartikey Singh (Source Code)
- Growing circle and changing colours by Abukar Abukar (Source Code)
- Suck in this green hallway by Heinrich XIAO (Source Code)
- Moving ball animation by Or Shemesh (Source Code)
- Growing Circle by MarcuOrSomething (Source Code)
You can also add your own version! (See how)