Et hjul

Hva

Tema er å lese og forstå kode og gjøre noen endringer.

Jeg har laget en skisse med et hjul som roterer alt for fort, det spinner. Det må rettes.

Det vi lager blir slik:

Selve hovedskissen, test1.js, er slik.

// lag en jevn og naturlig rulling
var radius=50;
var omkrets;
var centerX,centerY;
var vinkel;
function setup(){
  createCanvas(472,110);
  omkrets=2*PI*radius;
  centerX=radius;
  centerY=height-radius;  
  vinkel=0;
  frameRate(20);// kanskje du vil sette frameRate
}
function draw(){
  background(255);
  vinkel+=0.2;  //her må det endres
  centerX+=2;   //her må det endres
  if(centerX > width){
    centerX=radius;
    vinkel=0;
  }
  tegnHjul();
}
function tegnHjul(){
  push();
    translate(centerX,centerY);
    rotate(vinkel);
    noFill();
     strokeWeight(1);
    ellipse(0,0,2*radius,2*radius);
    strokeWeight(4);
    line(0,0,0,radius);
    line(0,0,0,-radius);
  pop();
}

Selve websiden er minimalstisk:

<!DOCTYPE HTML>
<html lang="no">
<head>
    <meta charset="UTF-8"/>    
    <title>test1</title> 
      <script src="https://borres.hiof.no/resources/p5js/p5.min.js">  </script>
     <script src="test1.js"> </script>
    <style>
        canvas{border:solid thin blue}
    </style>
</head>
<body> 

</body>
</html>

Oppgaverforslag

Riktig hastighet

Endre skissen slik at hjulets bevegelse er naturlig, ingen spoling eller skrensing.

Merk helst skisssen slik at vi blir overbevist om at det er riktig.