Variables in p5.js (Make your own) - Code! Programming with p5.js Lesson #2.2 · The Coding Train

Variables in p5.js (Make your own)

Code! Programming with p5.js Lesson #2.2

❰ Watch all videos ❱

In this video, I cover how to create your own variables and to use them to animate elements of your p5.js sketches.

Topics

0:00 - Hello! Let's talk more about variables!
0:18 - What are we trying to make?
0:52 - What are the steps to making a variable?
1:12 - Step 1: Declare
3:01 - Step 2: Initialize
4:21 - Step 3: Use
5:03 - Let's add the code!
5:49 - Combining declaration and initialization.
6:43 - What is a global variable?
7:31 - But the circle isn't moving! How can we fix that?
9:19 - How can we make it interactive?
9:50 - What's next?

Make Your Own Variable

Growing Circle Exercise

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)

Videos discussed in this lesson

let vs var - Topics of JavaScript/ES6 by The Coding Train