Embedded Files
JavaScript Beginner
Welcome! Today is Thursday, 13th of July, 2023.
Welcome! Today is Thursday, 13th of July, 2023.
Today's Agenda
1:30 - 1:45: Log on, recap & Ice breakers
1:45 - 2:30: Custom variables
2:30- 2:35: Bio Break
2:35 -2:45: Activity with Social Worker
2:45 - 3:30: Place elements at random positions
3:30- 4:00: Export & Share!
Create custom variables to hold values in your p5.js projects
Create custom variables to hold values in your p5.js projects
Students create their own variables to set the position, size and grey scale color of their shapes without repeating code.
Students will understand the concept of functions in a different way because unlike other functions we have been using (i.g. ellipse and rect) random will return a value. Rect() "returns" an image by generating it onto the canvas. The random() function will be one of many functions that will be used in future units in order to make sketches more complex and interactive.
Step 1: Identify repeated values in their code and use variables in their place.
Step 2: Create and implement custom variables
Step 3: Use random() to generate different positioning, sizing and grayscale fill.
Step 4: Assign random() to a function
Step 5: Use random() in the correct scope
Position Elements With Custom Variables
Code
Code
Results
Results
Challenge
Try:
Try:
Try moving the entire row 10 pixels down, we have to change all five y positions, setting them to be 70 instead of 60
This is a repetitive task, and error-prone. Instead, we can use variables. So far, we have used p5 built-in variables: mouseX, mouseY, width and height. We can read their values, but not change them. Our next step is to create our own variables! There are three steps to creating a variable:
Three steps to creating a variable:
Declare
Declare
Declaring our variable is basically just telling the program "hey! I'm creating a variable, and this is what it's going to be called." All you need to do when you want to declare a variable is write the term "var variableName".
Initialize
Initialize
Give variableName a value. This is called an assignment operation. We are assigning a value to our variable. If I write variableName = 50, every time I use my variable name, the program will replace it with the number 50
Use the variable
Use the variable
Your code won't break if you don't use the variable, but then what was the point? If we add an ellipse at ellipse(100,100,variableName,variableName), our ellipse will be 50px wide and 50px high.
Shortcuts
A shortcut to creating our own variables
A shortcut to creating our own variables
We can declare, and initialize a variable in one line of code. See the image below:
Draw a face
Code
Code
Results
Results
Let's make that code better by using variables
Now let's create and initialize variables for the x and y location of the face. We can keep the values the same and nothing will change.
Code
Code
Result
Result
Let's use the variables even more
Code
Code
Result
Result
Finally, we can change the values of x and y and all of the pieces will move together.
Well done
Place elements at random positions
Randomness
Randomness
We can also place our ellipse at a random position each time our program runs. To do this, we use p5's random function. This function is different from other functions we have been using (like ellipse and rect) in that it returns a value. Each time they are called:
random(50, 100) returns a number between 50 and 100
random(1, 5) returns a number between 1 and 5
When the first parameter is omitted, random assumes it is 0:
random(100) returns a number between 0 and 100
random(5) returns a number between 0 and 5
Try this...
Run this several times
Run this several times
In the p5 editor, try running the following piece of code several times:
function setup(){ ellipse(random(100), 60, 60, 60); }
Now try these, and play with their values:
ellipse(random(100),random(100), 60, 60);
ellipse(random(300, 400), 60, 60, 60);
ellipse(random(20, 60), random(60, 120), 60, 60);
What happens if we replace the last two parameters with calls to random?
Well done!
Page updated
Report abuse