# rose learns.to('code');

## Types

Numbers

• whole numbers or floating point
• positive or negative (or zero)
• arithmetic with numbers
• * multiplication
• / division
• – 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

## 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;

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

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

}

function draw()
{
background(255);

if (frameCount / 30 == parseInt(frameCount / 30))
{
//		{
//		}
//		else
//		{
//		}
}

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

{
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;

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

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

}

function draw()
{
background(255);

if (frameCount / 30 == parseInt(frameCount / 30))
{
//		{
//		}
//		else
//		{
//		}
}

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

{
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;
//    }
}