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