les 5 - conditionelen

---

Les 5 ging over conditionelen, ofwel if else structuren.

De presentatie van deze les vind je hier: Javascript les 5.pdf

In de syllabus staat een uitleg geschreven over if else structuren

En de code van deze les:

let targetX = 0; //locatie waar we geklikt hebben
let targetY = 0;
let x = 0; //locatie van de bal
let y = 0;
//dit is extra om uit te rekenen waar het geluid gepanned zou moeten zijn
let panPos = 0; //-100 - 100

function setup() {
  //plaats hier de code die maar één keer hoeft te worden uitgevoerd
  createCanvas(800,600); 
  background(255);
  strokeWeight(5);
  x = width / 2; //x locatie van de bal, zet deze meteen in het midden
  y = height / 2; //y locatie van de bal
  targetX = x; //zorg ervoor dat het doel in eerste instantie ook in het midden is zodat de bal niet meteen zal bewegen
  targetY = y;
  textSize(48);

}

function draw() { 
  background(255);
  //bereken op welk percentage de bal van het scherm is 
  let xPerc = x / width;
  //map xPerc naar een bereik van -100 tot 100
  panPos = (xPerc - 0.5) * 200
  if (panPos < 0) { //rood als de bal links is
    background('red');
  } else { //anders groen
    background('green')
  }

    //lijn in midden van het scherm
  line(width / 2,0,width / 2 ,height);

  //als het doel rechts van de bal is 
  if (targetX > x) { 
    x = x + 1;//x+=1; x++;
  } else if (targetX < x) { //anders als het doel links van de bal is
    x = x - 1; //x-=1; x--;
  }
  if (targetY > y) { //als het doel lager is dan de bal
    y = y + 1;//x+=1; x++;
  } else if (targetY < y) { //als het doel hoger is dan de bal
    y = y - 1; //x-=1; x--;
  }

  text(round(panPos),20,50);

  circle(x,y,30);
}

function mousePressed() { 
  console.log("Ik heb op de muis geklikt");
  console.log(mouseX, mouseY);
  targetX = mouseX;
  targetY = mouseY;
}