Week 2 — Variables and Conditionals

// Declare variable using 'var' key word
// var NAME_OF_VARIABLE = Initial value of variable
// Here variable bgRed is initialized at 200
// Variable names are case sensitive
var bgRed = 200;

var xpos = 50;
var ypos = 50;
var side = 150;

function setup() {
  createCanvas(400, 400);

  /*
  Data types
  Numbers 
  Strings - usually in "" or ''
  Null
  Boolean - true or false
  */

  var myString = "Hello there!";
  // println key word is used for printing
  print(myString);

  var theBestNumberEver = 73;
  print(theBestNumberEver);

  var canYouHandleTheTruth = false;
  print(canYouHandleTheTruth);

  var whatcugot = null;
  print(whatcugot);
}

function draw() {
  background(bgRed, 24, 0);
  fill(bgRed/2, 24, 12);

  //Using varibales for function arguments
  rect(xpos,ypos,side,side);

  //side = side + 1;
}

/* Variables declared out side the scope
i.e., {} --> these thingys, are global variables*/ 

var bgRed = 200;
var bgGreen = 12;

// A varibale can be just declared with out assigning a value.
// But a value needs to be assigned later on
// bgBlue declared here
var bgBlue;

function setup() {
  createCanvas(400, 400);

  /* Variables declared in setup have scope with in setup
  -Meaning they are local variables not availabe to any functions
  outside setup 
  
  -*/
  /*
  If this not done, there is no error raised, but the
  sketch doesn't load
  A value assigned to bgBlue
  */
  
  bgBlue = 24;
  // These are local variables
  /*var bgRed = 200;
  var bgGreen = 12;
  var bgBlue = 24;*/
  
}

function draw() {
  /*
  When tried to access local varibale out side the scope,
  it gives "Uncaught ReferenceError: Variable is not defined"
  */
  background(bgRed,bgGreen,bgBlue);

  // Basic drawing with build-in mouse vaiables
  // mouseX and mouseY define the width and height of the shape here
  stroke(255);
  //RECTANGLE
  //rect(20,20,mouseX,mouseY);

  //ELLIPSE
  //ellipse(width/2, height/2, mouseX, mouseY);

  //SUGGESTED EXERCISE
  rect(mouseX, mouseY, 30,30);
}

/* PRE DEFINED VARIABLES

NUMBER
- width - Width (in pixels) of sketch window
- height - Height (in pixels) of sketch window
- frameCount - No. of frames displayed
- frameRate - FPS (Usually at 60 FPS)
- windowWidth - width of the browser window
- windowHeight - height of the browser window
- key - Most recent key pressed on the keyboard
- keyCode - Numeric code for the key pressed on keyboard in ASCII
- mouseX - x position of the mouse cursor
- mouseY - y position of the mouse cursor

BOOLEAN
- keyIsPressed - Is a key pressed? true/false
- mouseIsPressed - Is the mouse pressed? 

Misc
- mouseButton - Which mouse button is pressed?
                LEFT, CENTER or RIGHT?
*/

var xposTopLeft = 100;
var yposTopLeft = 100;
var xposBottomRight = 300;
var yposBottomRight = 300;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(100);

  fill(0,0,255);
  rect(100,100,200,200);
  //if mouse is in the rectangle then make a circle at the cursor

  if (mouseX > xposTopLeft && mouseY > yposTopLeft){
    if (mouseX < xposBottomRight && mouseY < yposBottomRight){
      fill(255);
      ellipse(mouseX,mouseY,25,25);
    }
  }
}

/*
Conditional expressions / Relational Operators
= - assignment
=== - comparison/ equality
!= - not equal to/ inequality (! - *bang* symbol)
< - less than
> - greater than
<= less then or equal to
>= greater than or equal to

Boolean Operators
true or false

if true
  do this
else if true
  do this
else
  do this

Logical Operators/ Expressions

&& - logicalAND - if A && B both or true
|| - logicalOR  - if A || B either one is true
! - NOT - if !A

-----------------------------
In javaScirpt "==" is loose equality and results in 
type coersion. Type coercion is the process of converting
value from one type to another (such as string to number,
object to boolean, and so on). Any type, be it primitive 
or an object, is a valid subject for type coercion.
[More on FreeCodeCamp: https://www.freecodecamp.org/news/js-type-coercion-explained-27ba3d9a2839/]

*/