Animasjon

Hva

I dette eksempelet skal vi animere er sirkel.

Begreper som du finner i dokumentasjonen til p5js Reference

ellipse(), fill(), frameRate()

Slik ser det ut:

Websiden er minimalistisk:

<!DOCTYPE html>
<html>
  <head>
    <title>animasjon</title>
    <meta charset="UTF-8"/>
    <script src="https://borres.hiof.no/resources/p5js/p5.min.js"> 
    </script>
    <script src="sketch.js"> </script>
    <style>
    canvas{border :solid thin blue}
    </style>
  </head>
  <body>
  <p>Animasjon av en kule</p>
  <div id="canvasHer"></div>
  </body>
</html>

og scriptet er slik:

/*
 Animasjon av en kule (sirkel)
*/
// senter og radius for kula
var xPos;
var yPos;
var radius;
// Hvor langt skal den gå mellom hver uttegning
var step;
function setup(){
  var canvas=createCanvas(400, 100);
  canvas.parent("canvasHer");
  stroke(0,0,0);
  radius=20;
  xPos=radius;
  yPos=height/2;
  step=2;
  // antall steg (frames) i sekundet
  frameRate(30);
}
function draw(){
  // fjern "gamle" sirkler
  fill(255,255,255);
  rect(0,0,width,height);
  
  // tegn kula
  fill(255,0,0);
  ellipse(xPos,yPos,2*radius,2*radius);
  
  // hvis den har nådd en av
  // kantene så må den snu
  if((xPos+radius > width)||(xPos-radius < 0)){
    step=-step;
  }
  // flytt den til neste uttegning
  xPos=xPos+step;
  
}

Du kan også løsningen på en egen side:
test.html https://borres.hiof.no/pisk/P5js/p5jsskisser/animasjon/test.html

Dette kan være et greitt eksempel der kan eksperimentere med hastighet og glatte bevegelser. Du kan endre frameRate() og du kan endre variabelen step. Du kan jo også se hvordan du kan endre hastigheten avhengig av avstanden til kanten på skissen (canvasen). Kanskje kula trenger litt tid for å aksellere ette en kollisjon ?