Tutorials Keuzeopdracht

Om deze keuze opdracht te maken heb ik maar 3 tutorials gekeken en de rest zelf gedaan, de eerste 2 die ik heb gekeken waren al ingelinkt:

De bovenste video legde vooral de basis van een API uit waardoor ik snapte wat het was, de tweede video heeft geholpen met gebruik maken van een API in p5js.

Deze video heb ik zelf erbij gepakt:

Deze video heb ik gebruikt omdat ik een ‘extra functie’ wilde hebben in mijn keuze project, in dit geval een input van de plaats naar keuze.

Onze zelf gemaakte tutorial:

In deze tutorial willen wij uitleggen hoe je de windrichting kan bepalen en laten zien door middel van een API.

Eerst moeten we 2 vaiabeles aanmaken, deze kunnen elke naam hebben zolang de informatie die je de variabele geeft maar gelijk blijft:

  // Cirkel start in midden
  position = createVector(width/2, height/2);
  // wind start bij (0,0)
  wind = createVector();

Nu gaan we eerst met de API de benodigde informatie ophalen, als je nog geen API hebt verbonden aan je sketch raad in aan om bovenstaande tutorials te volgen om dit te doen en daarna terug te komen naar deze stap om deze tutorial af te maken!

  //windsnelheid via API aanvragen
  windspeed= data.wind.speed

  // hoek van graden naar radians om de pijl gemakkelijker te tekenen
  let angle = radians(Number(data.wind.deg));
  
  // Een vector maken voor de windrichting
  wind = p5.Vector.fromAngle(angle);

Vervolgens gaan we naar de function draw om de pijl zelf af te maken en de stijl ervan mooi te maken.

  // Pijl 'translaten' naar de goede positie toe
  push();
  translate(32, height - 32);
  // de pijl draaien bij de hoek die de wind heeft met rotate
  rotate(wind.heading() + PI/2);
  noStroke();
  fill(255);
  ellipse(0, 0, 48, 48);

  //de lijn van de pijl
  stroke(45, 123, 182);
  strokeWeight(3);
  line(0, -16, 0, 16);

  //de kop van de pijl
  noStroke();
  fill(45, 123, 182);
  triangle(0, -18, -6, -10, 6, -10);
  pop();