Les 5 - conditionelen

---

Les 5 ging over conditionelen, ofwel if else structuren.

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

In de syllabus staat een uitleg geschreven over if else structuren

En de code van deze les:

//maak hieronder de variabelen aan die we nodig hebben:
// de x- en y-positie van de bal
let posX;
let posY;

//de x- en y-positie van waar de bal heen moet.
let newXPos;
let newYPos;

function setup() {
  //plaats hier de code die maar één keer hoeft te worden uitgevoerd
  createCanvas(800,600);
  background(255);
  //bepaal hier de startpositie van de bal
  //dit kan niet buiten de setup, omdat dan de grootte van 
  //het canvas nog niet bekend is.
  posX = width*0.5;
  posY = height*0.5;

  //de grootte van de tekst in het scherm.
  textSize(48);
}

function draw() {

  //als de positie van de bal rechts is van de helft van het canvas
  //maak het scherm rood  
  if (posX > width/2) {
            // r   g b  a(lpha)
    background(255,0,0,10);
  }
  //Als de positie van de bal links is van de helft van het canvas
  //maak het scherm groen
  else if (posX < width/2) {
    background(0,255,0,10);
  }
  //als de bal exact in het midden is
  //maak het scherm blauw
  else {
    background(0,0,255,10);
  }

  //bepaal de dikte van de lijnen
  strokeWeight(10);

  //teken een verticale lijn midden in het scherm
  line(width*0.5,0,width*0.5,height);

  //teken de bal.
  ellipse(posX,posY,30);

  //beweeg de bal naar de opgeslagen muispositie toe

  //als de nieuwe x-positie kleiner is dan die van de bal
  //verschuif de x-positie 1 pixel naar links
  if (newXPos < posX) {
    posX -= 1;
  }

  //als de nieuwe x-positie groter is dan die van de bal
  //verschuif de x-positie 1 pixel naar rechts
  else if (newXPos > posX) {
   posX += 1; 
  }

  //doe hieronder hetzelfde voor de y-positie
  if (newYPos < posY) {
    posY -= 1;
  }
  else if (newYPos > posY) {
   posY += 1; 
  }

  //plaats hieronder de tekst met:
  //de afgeronde x-positie (tussen 0 - 799) / 4 - 100
  //om het van -100 tot 100 te krijgen.
  //1e argument is de te plaatsen tekst
  //2e argument is de x-positie van de tekst
  //3e argument is de y-positie van de tekst
  text(int(posX/4-100),20,50);

  //andere manieren om af te ronden:
  //round -> rondt af naar dichtstbijzijnde hele getal
  //floor -> rondt af naar beneden
  //ceil -> rondt af naar boven
  //trunc -> haalt kommagetal eraf.
}

//onderstaande functie wordt aangeroepen als je op de muis klikt:
function mousePressed() {
  //bepaal de positie waar het balletje naar toe moet:
  //aan de hand van de x- en y-positie van de muis op dat moment
  newXPos = mouseX;
  newYPos = mouseY;
}