|
| 1 | +--- |
| 2 | +# This is the frontmatter |
| 3 | +title: "Mask Generator" # Title and Heading 1 |
| 4 | +permalink: /maskGenerator-lessons/1 # Give your page a permalink |
| 5 | +published: true |
| 6 | +--- |
| 7 | +## Variables |
| 8 | + |
| 9 | +### Grade 6~8 |
| 10 | + |
| 11 | +#### What is a Variable? |
| 12 | + |
| 13 | +A variable is a container used to store data. Picture a box that lets you store data. |
| 14 | + |
| 15 | +But what do we mean by data? These data can be numbers: |
| 16 | + |
| 17 | + ![Variable box that stores numbers]({{ "/assets/images/curriculum/Unit-2_Sample-3.png" | relative_url }}) |
| 18 | + |
| 19 | +Or words: |
| 20 | + |
| 21 | + ![Variable box that stores numbers]({{ "/assets/images/curriculum/Unit-2_Sample-4.png" | relative_url }}) |
| 22 | + |
| 23 | +Or your favorite images and songs: |
| 24 | + |
| 25 | + ![Variable box that stores numbers]({{ "/assets/images/curriculum/Unit-2_Sample-5.png" | relative_url }}) |
| 26 | + |
| 27 | + We store data in these boxes so that they can be used as resources while a computer program is running. |
| 28 | + |
| 29 | +#### Creating a Variable |
| 30 | + |
| 31 | +In order to create a variable, we need to give the variable a name. Think of this as the label you will be taping on the box to remind yourself what you've put inside the box. |
| 32 | + |
| 33 | + ![Variable box labeled tomatoes]({{ "/assets/images/curriculum/Unit-2_Sample-1.png" | relative_url }}) |
| 34 | + |
| 35 | +If we want to indicate that there are 3 items inside the `tomatoes` box, we would write it out like this: |
| 36 | + |
| 37 | +```js |
| 38 | +let tomatoes = 3; // assign 3 to the tomatoes variable |
| 39 | + |
| 40 | +function setup() { |
| 41 | + createCanvas(400, 400); |
| 42 | + console.log(tomatoes); // load tomatoes variable |
| 43 | +} |
| 44 | +``` |
| 45 | + |
| 46 | +**Tip:** Conventionally, the first letter of a variable name is written in lower-case. |
| 47 | +{: .notice--success} |
| 48 | + |
| 49 | +There are some funny things here. First, we're using a new word called `let`. What is `let`? You can think of `let` like a magic spell that lets us create variable to store data. |
| 50 | + |
| 51 | +> **🧠Teacher Trick:** |
| 52 | +> Think of yourself as creating a new world, declaring aloud **let** there be light! |
| 53 | +> By declaring with “let”, we’re proclaiming something (a variable) into existence in our world of code. |
| 54 | +
|
| 55 | +We're also using another JavaScript feature called `console.log()` to load the content of our `tomatoes` variable. `console.log()` helps us to keep track of what's inside a variable and debug code. We will be using it a lot to complete this project. |
| 56 | + |
| 57 | +Also, `let tomatoes = 3;` is being written above `function setup()`! That's right. Think about the computer program like a factory assembly line, and you need to have all of your boxes lined up before loading them into the machines. |
| 58 | + |
| 59 | +**Tip:** By default, you will be creating variables at the top of your program. Variables that are created outside of `function setup()` and `function draw()` are called global variables. |
| 60 | +{: .notice--success} |
| 61 | + |
| 62 | +Let's practice using variables by remixing the [lollipop example](https://editor.p5js.org/xinemata/sketches/reojWdPOp). Create variables that would store all the numbers we used to draw the lollipop: |
| 63 | + |
| 64 | +```js |
| 65 | +// Lollipop stick variables |
| 66 | +let stickX = 200; |
| 67 | +let stickY = 240; |
| 68 | +let stickWidth = 10; |
| 69 | +let stickHeight = 100; |
| 70 | +// Lollipop candy variables |
| 71 | +let candyX = 200; |
| 72 | +let candyY = 200; |
| 73 | +let candyWidth = 60; |
| 74 | +let candyHeight = 60; |
| 75 | + |
| 76 | +function setup() { |
| 77 | + createCanvas(400, 400); |
| 78 | + noStroke(); |
| 79 | + rectMode(CENTER); |
| 80 | +} |
| 81 | + |
| 82 | +function draw() { |
| 83 | + background(220); |
| 84 | + |
| 85 | + //Lollipop stick |
| 86 | + fill(255); |
| 87 | + rect(stickX, stickY, stickWidth, stickHeight); |
| 88 | + |
| 89 | + //Lollipop candy |
| 90 | + fill(180, 29, 159); |
| 91 | + ellipse(candyX, candyY, candyWidth, candyHeight); |
| 92 | +} |
| 93 | +``` |
| 94 | +When you click the play button, you should see the exact same lollipop sketch appearing in front of you. But instead of seeing a bunch of random numbers on the screen, we now have a better idea of what each number was created for. Amazing! |
| 95 | + |
| 96 | +**Tip:** When a variable name contains two words, there are two conventional ways to format the text. The first way, also known as camel case, capitalizes the second word, e.g. `candyWidth`. The second way, also known as snake case, uses an underscore symbol to connect the two words, e.g. `candy_x`. |
| 97 | +{: .notice--success} |
| 98 | + |
| 99 | +##### Applying Arithmetic to Variables |
| 100 | + |
| 101 | +You can apply arithmetic operators such as +, -, *, and / to variables! The following example shows how you can draw three circles with equal spacing in between: |
| 102 | + |
| 103 | +```js |
| 104 | +let x = 200; |
| 105 | +let y = 200; |
| 106 | +let d = 80; |
| 107 | + |
| 108 | +function setup() { |
| 109 | + createCanvas(400, 400); |
| 110 | +} |
| 111 | + |
| 112 | +function draw() { |
| 113 | + background(220); |
| 114 | + ellipse(x - 100, y, d, d); // left |
| 115 | + ellipse(x, y, d, d); // middle |
| 116 | + ellipse(x + 100, y, d, d); // right |
| 117 | +} |
| 118 | +``` |
| 119 | + |
| 120 | +Revisiting the [multiple rect() example](https://editor.p5js.org/xinemata/sketches/gWHc2OalC), where we were supposed to draw a row of rectangles diagonally across the screen, we could apply arithmetic to achieve the effect. |
| 121 | + |
| 122 | + |
| 123 | +```js |
| 124 | +let offset = 40; |
| 125 | +let boxD = 40; |
| 126 | + |
| 127 | +function setup() { |
| 128 | + createCanvas(400, 400); // w, h |
| 129 | +} |
| 130 | + |
| 131 | +function draw() { |
| 132 | + background(220); |
| 133 | + rect(offset*0, offset*0, boxD, boxD); // x, y, w, h |
| 134 | + rect(offset*1, offset*1, boxD, boxD); // x, y, w, h |
| 135 | + rect(offset*2, offset*2, boxD, boxD); // x, y, w, h |
| 136 | + rect(offset*3, offset*3, boxD, boxD); // x, y, w, h |
| 137 | + rect(offset*4, offset*4, boxD, boxD); // x, y, w, h |
| 138 | + rect(offset*5, offset*5, boxD, boxD); // x, y, w, h |
| 139 | + rect(offset*6, offset*6, boxD, boxD); // x, y, w, h |
| 140 | + rect(offset*7, offset*7, boxD, boxD); // x, y, w, h |
| 141 | + rect(offset*8, offset*8, boxD, boxD); // x, y, w, h |
| 142 | + rect(offset*9, offset*9, boxD, boxD); // x, y, w, h |
| 143 | +} |
| 144 | +``` |
| 145 | + |
| 146 | + ![Two diagonal lines]({{ "/assets/images/curriculum/Unit-2_Sample-8.png" | relative_url }}) |
| 147 | + |
| 148 | +#### System Variables |
| 149 | + |
| 150 | +The [p5.js contributors](https://github.com/processing/p5.js?tab=readme-ov-file#contributors) have created a couple of variables that are available for us to load and use. These system variables were created to bring joy and ease to the coding process. We will spend the rest of Art + Code to try them out. |
| 151 | + |
| 152 | +##### mouseX and mouseY |
| 153 | + |
| 154 | +The `mouseX` and `mouseY` variables load the X and Y positions of your cursor in real time, allowing you to interact with your drawing with your mouse. |
| 155 | + |
| 156 | +```js |
| 157 | +function draw() { |
| 158 | + background(220); |
| 159 | + ellipse(mouseX, mouseY, 20, 20); // x, y, w, h |
| 160 | + console.log(mouseX, mouseY); // displays mouseX and mouseY values in real time |
| 161 | +} |
| 162 | +``` |
| 163 | +Aside from using `mouseX` and `mouseY` to control the X and Y positions of an ellipse, we can also use those real time inputs to control the size of the ellipse: |
| 164 | + |
| 165 | +```js |
| 166 | +function draw() { |
| 167 | + background(220); |
| 168 | + ellipse(200, 200, mouseX, mouseY); // x, y, w, h |
| 169 | + console.log(mouseX, mouseY); // displays mouseX and mouseY values in real time |
| 170 | +} |
| 171 | +``` |
| 172 | +Or the color of the ellipse: |
| 173 | + |
| 174 | +```js |
| 175 | +function draw() { |
| 176 | + background(220); |
| 177 | + fill(mouseX, 100, 100); // r, g, b |
| 178 | + ellipse(mouseX, mouseY, 20, 20); // x, y, w, h |
| 179 | +} |
| 180 | +``` |
| 181 | + |
| 182 | +**Tip:** Similar to animation or a flip book, the modern browser has a framerate and refreshes 60 times per second! This illusion of real time can be interrupted when your browser slows down or crashes. |
| 183 | +{: .notice--success} |
| 184 | + |
| 185 | +##### width and height |
| 186 | + |
| 187 | +`width` and `height` variables loads the values of your canvas width and height, making it incredibly convenient to draw a shape in relation to the canvas. For example, if you'd like to draw two diagonal [line()](https://p5js.org/reference/p5/line/) across the canvas: |
| 188 | + |
| 189 | +```js |
| 190 | +function draw() { |
| 191 | + background(204); |
| 192 | + line(0, 0, width, height); // x1, y1, x2, y2 |
| 193 | + line(width, 0, 0, height); // x1, y1, x2, y2 |
| 194 | +} |
| 195 | +``` |
| 196 | + |
| 197 | + ![Two diagonal lines]({{ "/assets/images/curriculum/Unit-2_Sample-6.png" | relative_url }}) |
| 198 | + |
| 199 | + Or if you'd like to lay out your shapes with equal spaces in between: |
| 200 | + |
| 201 | + ```js |
| 202 | + let dieR = 60; |
| 203 | + |
| 204 | +function setup() { |
| 205 | + createCanvas(400, 400); |
| 206 | + noStroke(); |
| 207 | +} |
| 208 | + |
| 209 | +function draw() { |
| 210 | + background(227, 47, 2); |
| 211 | + fill(245, 237, 220); |
| 212 | + ellipse(width / 2, height / 2, dieR, dieR); // places the pip in the center |
| 213 | + ellipse(width / 4, height / 4, dieR, dieR); // places the pip in the upper left corner |
| 214 | + ellipse((width / 4) * 3, height / 4, dieR, dieR); // places the pip in the upper right corner |
| 215 | + ellipse(width / 4, (height / 4) * 3, dieR, dieR); // places the pip in the lower left corner |
| 216 | + ellipse((width / 4) * 3, (height / 4) * 3, dieR, dieR); |
| 217 | + // places the pip in the lower right corner |
| 218 | +} |
| 219 | + ``` |
| 220 | + ![A red die]({{ "/assets/images/curriculum/Unit-2_Sample-7.png" | relative_url }}) |
0 commit comments