Unit 4: Day 1
Tasks
40.1 Stand Up Sit Down
- Review the IF statements used in past examples, expanding to include Else and Else If...
- See the activity below
- Walk through If/Else and then If/ElseIf/Else on paper including all the operators
- Conditional statements or “if-statements” affect the sequential flow of control by executing different statements based on the value of a Boolean expression
- Conditionals are also known as Selection statements
- Selection determines which parts of an algorithm are executed based on a condition being true or false.
- begin to get them to consider their values for the following variables:
- age, grade, credits earned (approximately)
- have them stand or sit based on random if statements
Stand Up Sit Down Discussion
Example 1
if ( age!=15.5 ) {
Stand up
}
Example 2
if ( grade<11 ) {
Hands up
} else {
Hands on head
}
Example 3
if ( grade<13 ) {
Hands on head
} else if ( grade<12 ){
Hands up
} else {
Stand up
}
Example 4
if ( grade<13 ) {
Hands on head
}
if ( grade<12 ){
Hands up
}
40.2 BOOLEAN Logic
- Discuss the term BOOLEAN logic or use Code.org videos to help they use block based coding but do a nice job of explaining the concepts
- Boolean logic produces true or false values
- Boolean variables store true or false
- Watch CS Principles: Conditionals - Part 1 Boolean Expressions [2:40]
- And watch CS Principles: Conditionals - Part 2 If/Else Statements [4:18]
- Choosing a direction for a program to flow based on an IF statement is known as Selection in programming
40.3 Advanced Boolean Logic
- Concepts include using the AND , OR and NOT operators in a Boolean expression
- Watch CS Principles: Conditionals - Part 3 "And & Or" Operators [4:08]
- Using Boolean variables can also be considered an Advanced Boolean Logic concept
40.4 Introduction to P5.js in replit.com
- Provide them the link to access the Start Project
- Walk them through the flow of how it works.
- Show them example 1, pointing out the image and font code
- Remind them that they can add images and fonts as they wish.
- Change to try out the 3 included fonts
- Demonstrate how to use control/command-slash to comment out the different examples
40.5 Review Unit 1 with the Code in Example 1
- Make some minor changes to the code and encourage a bit of experimentation with the fonts and images.
- Note the custom function drawText. This is a quick introduction to writing functions. Functions will become more important as the course progresses.
- The words “Spring is Coming” become a variable called message within the function. This is called ‘parameter passing’.
40.6 More Extensive Review Unit 1 with the Ex2 - Sun/Moon
- Show the final version of the example
- Create a V2 file to show the differences between them
- Add a font and explain/experiment with the 3 included fonts, textSize, etc.
- Add the house.png image
- Change the sun’s y-coordinate to: 100-mouseX/5
- Add the sky background
- Add the tint code
Unit 4 - Example 2 - Sun & Moon (end code)
This example requires fonts and images to be uploaded separately.
//Global Variables
let sky = 255;
let house, sun, moon;
let big = 1;
let font1;
function preload(){
house= loadImage("images/house.png"); //not in start file
sun= loadImage("images/sun.gif");
moon= loadImage("images/moon.png");
font1 = loadFont( "fonts/Anton_Bold.ttf" );
}//end preloading of images and fonts
function setup() {
let sketch = createCanvas(500, 600);
sketch.parent("mycanvas");
}//end setup
function draw() {
sky = mouseX/2;
background(sky);
tint(sky, 255);
image(house, 20, 245);
tint(255);
//draw the sun & moon
if(mouseX > 125){
image(sun, mouseX, 100-mouseX/5 , 100, 100);
} else {
image(moon, mouseX, 100-mouseX/5 , 100, 100);
}
//draw the snow
fill(200);
noStroke();
rect(0,550,500,50);
fill(255,0,0);
//draw caption
if( big < 40 ){
big++;
} else {
//big = 5;
}
textSize(big);
textFont(font1);
textAlign(CENTER);
text("A fine winter's day!", width/2,590);
}//end draw
Continue to Unit 4: Day 2 »
