M1D27 – Conditionals – rose learns.to('code');

Types

Numbers

whole numbers or floating point
positive or negative (or zero)
arithmetic with numbers
- * multiplication
- / division
- + addition
- – minus
- () brackets

Boolean

can be either true or flase
can’t perform arithmetic with booleans

var play = true //declaration and assignment on the same line

var pause; //declaration
pause = false; //assignment

Strings

a sequence of characters
enclosed with “” or ”

var greeting = "hello World';
var leaving = 'hello earth';

string concatenation
- can’t do arithmetic with strings but we can combine them using the + operator

var string1 = "hello";
var string2 = "world!';
var string3 = string1 + string2; //string3 = "hello world!"
var string4 = string1 + "earth"; //string4 = "hello earth"

Mixing Types and Performing Operations

JavaScript makes confusing assumptions
Unexpected behaviours
We can check the type of a variable using the typeof() function
Changing from one type to another is called casting

Working with Booleans

if(frameCount / 100 == parseInt(frameCount / 100)) //parseInt will give you the integer value
{
antennaOn = !antennaOn;
}

frameCount – https://p5js.org/reference/#/p5/frameCount

parseInt – https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/parseInt

`dist` function

https://p5js.org/reference/#/p5/dist

tells us how far we are from the particular point in the screen

var point = {
  x: 100,
  y: 100
}

//dist - tells us how far we are from the particular point in the screen

if(dist(mouseX, mouseY,/*mouseX and mouseY where the click happens*/ point.x, point.y/* reference point*/) <=15)
}
//if the button has been clicked
{

Buttons

https://p5js.org/reference/#/p5/createButton

var button =
{
  X: 200,
  Y: 200,
  Width: 100,
  Height: 50,
}

//reference
//mouseX > button.X
//mouseX < button.X + button.Width
//mouseY > button.Y
//mouseY < button.Y + buttton.Height

if(mouseX > button.X && mouseX < button.X + button.Width && mouseY > button.Y && mouseY < button.Y + buttton.Height) {
//action here
}

IMPORTANT NOTE FROM THIS LESSON:

showX = !showX;

is similar with:

showX = false // or true

if(showX) // is similar with showX = true //or false

//showX is a variable

"42" == 42 in JavaScript

Sample nesting from the lesson:

//button click
if(mouseX > button.X && mouseX < button.X + button.Width && mouseY > button.Y && mouseY < button.Y + buttton.Height) {
  if(showX){
    showX = false;
    button.text = "reveal";
  }else{
    showX = true;
    button.text = "hide";
  }
}

Debugging Exercise

var redButton;
var alertFlash;

function setup()
{
	createCanvas(600, 700);

	redButton = {
		x: width / 2,
		y: height / 2,
		dia: 200,
		activated: false
	}
    alertFlash: true;

}

function draw()
{
	background(255);

	if (frameCount / 30 == parseInt(frameCount / 30))
	{
//		if (alertFlash)
//		{
////			alertFlash = true;
            alertFlash = !alertFlash;
//		}
//		else
//		{
//			alertFlash;
//		} 
	}

//	if (redButton.activated == true)
    if (redButton.activated == true)
	{
		background(250, 250, 0);

		if (alertFlash)
		{
			textSize(35);
			text("Meltdown Sequence Initiated!!!", width / 2, height / 2 - redButton.dia);
		}

	}


	fill(255, 0, 0);
	stroke(200, 30, 30);
	strokeWeight(20);
	ellipse(redButton.x, redButton.y, redButton.dia);
	noFill();
	stroke(255, 100, 100);
	arc(redButton.x, redButton.y, redButton.dia, redButton.dia, PI, PI * 2);


	textAlign(CENTER);
	textSize(40);
	strokeWeight(1);
	stroke(0);
	fill(0);
	text("DO NOT PRESS", width / 2, height / 2 + redButton.dia);

}

function mousePressed()
{
	if(dist(mouseX, mouseY, redButton.x, redButton.y) < redButton.dia)
	{
//        console.log("working buttons");
//		if (redButton.activated = true)
//		{
//			redButton.activated = false;
//		}
//		else
//		{
//			redButton.activated = true;
//		}
        if(redButton.activated == false){
			redButton.activated = true;
		}else{
			redButton.activated = false;
		}
	}
    else{
//        redButton.activated = false;
    }
}

Note: I am still confused when to use = and == However, I got this one correct.

Another version

var redButton;
var alertFlash;

function setup()
{
	createCanvas(600, 700);

	redButton = {
		x: width / 2,
		y: height / 2,
		dia: 200,
		activated: false
	}
    alertFlash: true;

}

function draw()
{
	background(255);

	if (frameCount / 30 == parseInt(frameCount / 30))
	{
//		if (alertFlash)
//		{
////			alertFlash = true;
            alertFlash = !alertFlash;
//		}
//		else
//		{
//			alertFlash;
//		} 
	}

//	if (redButton.activated == true)
    if (redButton.activated)
	{
		background(250, 250, 0);

		if (alertFlash)
		{
			textSize(35);
			text("Meltdown Sequence Initiated!!!", width / 2, height / 2 - redButton.dia);
		}

	}


	fill(255, 0, 0);
	stroke(200, 30, 30);
	strokeWeight(20);
	ellipse(redButton.x, redButton.y, redButton.dia);
	noFill();
	stroke(255, 100, 100);
	arc(redButton.x, redButton.y, redButton.dia, redButton.dia, PI, PI * 2);


	textAlign(CENTER);
	textSize(40);
	strokeWeight(1);
	stroke(0);
	fill(0);
	text("DO NOT PRESS", width / 2, height / 2 + redButton.dia);

}

function mousePressed()
{
	if(dist(mouseX, mouseY, redButton.x, redButton.y) < redButton.dia)
	{
//        console.log("working buttons");
//		if (redButton.activated = true)
//		{
//			redButton.activated = false;
//		}
//		else
//		{
//			redButton.activated = true;
//		}
        if(redButton.activated == false){
			redButton.activated = true;
		}else{
			redButton.activated = false;
		}
	}
//    else{
////        redButton.activated = false;
//    }
}

M1D27 – Conditionals