Embedded Files
JavaScript Beginner
Welcome! Today is Wednesday, 12th of July, 2023.
Welcome! Today is Wednesday, 12th of July, 2023.
Today's Agenda
1:30 - 1:45: Log on, recap & Ice breakers
1:45 - 2:30: Mini-Project - Taijutu Symbol
2:30- 2:35: Bio Break
2:35 -2:45: Activity with Social Worker
2:45 - 3:30: <that activity>
3:30- 4:00: Export & Share!
Activity Title
Activity Title
Students will attempt to remake the taijutu symbol as well as creating their own variables to set the position, size and grey scale color of their shapes without repeating code.
Step 1: Recreate Taijutu symbol
Step 2: Center elements with built-in variables: width and height
Mini-Project - Taijutu Symbol
Taijitu
Taijitu
The Taijitu symbol consists of two (one black and one white) swirling 'teardrop' shapes that fit within each other to form a perfect circle. Each figure contains a part of the other so that there is a black dot in the white half of the circle and a white dot in the black portion. These seemingly opposing, but complementary halves make a whole and thus, are incomplete without each other.
Create a taijutu symbol in p5.js
Directions:
Directions:
Use shapes that we covered in this unit
Add comments to the different shapes
Use fill and stroke the change the colors of the shape
Center it in the middle of the canvas.
Solution -
Solution.
Solution.
Great attempt!
----------------------------------------------------------------------------------------------------------------------------------------------------------------------
Center elements with built-in variables: width and height
Ellipse Variable Intro
Code
Code
Results
Results
Center elements with built-in variables: width and height
We have already used two built-in variables in the previous learning activity: mouseX and mouseY. Variables are placeholder names for values that change over time. We type mouseX knowing that p5 will replace that name with a number that represents the latest X position of the mouse. This number will change as the user moves the mouse across the canvas.
Next we will use two other variables built into p5: width and height. In the following example, their values are 600 and 240 ––the dimensions we gave our canvas when we created it in the setup function.
Code
Code
Results
Results
Place an ellipse in the center of the screen using key words width and height
Code
Code
Result
Result
The advantage of using these variables to place our ellipse is that, if we change the size of our sketch later, the ellipse will still be centered. To prove this, try changing the width and height of the canvas to 500 and 200, and run the sketch again.
width and height can also be use to place shapes in positions like "a third of the screen across", or "two thirds of the screen across", or "two thirds of the screen down".
Try drawing these:
Try...
Try...
ellipse(width/3, height/2, 60, 60);
ellipse(2*width/3, height/2, 60, 60);
ellipse(width/3, 2*height/3, 60, 60);
Well done!
Page updated
Report abuse