Vindmølle

Hva

To vriante av en vindmølle. Den siste styres fra websiden.

De viktigste begrepene vi bruker, se Reference

translate(),  rotate()
strokeWeight()
push(),  pop()

Versjon1

Løsningen er slik:

Websiden er minimalistisk:

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

Hovedcriptet er slik:

/*en vindmølle*/
var mill; // mølla
var v=0;  //aktuell rotasjonsvinkel
function setup() {
    var canvas = createCanvas(300, 300);
    canvas.parent('canvasHere');
    mill=new windMill(100);    
}
function draw() {
  background(255,255,255);
  line(0,height/2,width,height/2);
  line(width/2,0,width/2,height);
  mill.roter(v);
  mill.tegn(width/2,height/2);
  v+=TWO_PI/100.0;
 }

Selve vindmølla er beskrevt slik, som et objekt

 // en vindmølle
function windMill(arm) {
    this.arm=arm;
    this.vinkel=0;
    
    // roter
    this.roter=function(v){
        this.vinkel=v;
    }
  // tegn det 
  this.tegn=function(xpos,ypos) {
   push();
        // midt i rotasjonspunktet
        translate(xpos,ypos);
        fill(0);
        ellipse(0,0,10,10);
        // bladene
        rotate(this.vinkel);
        strokeWeight(6);
        for(var i=0; i< 3; i++){            
            rotate(TWO_PI/3);
            line(0,0,arm,0);            
        }    
    pop();     
  }
}

Versjon2

Vi gjør to endringer. Vi fester vindmølle bladne på en "bygning" og vi introduserer en range-kontroll på websiden for å kunne endre rotasjonen.

<!DOCTYPE HTML>
<html lang="no">
<head>
    <meta charset="UTF-8"/>    
    <title>windmill3</title> 
      <script src="https://borres.hiof.no/resources/p5js/p5.min.js">  </script>
     <script src="sketch3.js"> </script>
     <script src="windMill3.js"> </script>
</head>
<body> 
<div id="canvasHere">     </div>
<div>
<input id="vind" onchange="endreVind()" 
       style="width:270px" value="0"  
         type="range" min="-10" max="10"/>
</div>
</body>
</html>

Hovedcriptet er slik:

/*en vindmølle*/
var mill; // mølla
var v=0;  // rotasjonsvinkel
var dv=0; // ndring av rotasjonsvinkel
// starter med blankt ark
function setup() {
    var canvas = createCanvas(300, 300);
    canvas.parent('canvasHere');
    mill=new windMill(100);
    endreVind(); // start som angitt    
}
function draw() {
  background(255,255,255);
  mill.roter(v);
  mill.tegn(width/2,height/2);
  v+=dv;
 }
 function endreVind(){
     var val=document.getElementById("vind").value;
     dv=val*TWO_PI/700.0;     
 }

Selve vindmølla:

// en vindmølle
function windMill(arm) {
    this.arm=arm;  // lengden på en arm
    this.vinkel=0; // nåværende vinkel
    
    this.roter=function(v){
        this.vinkel=v;
    }
  // tegn det 
  this.tegn=function(xpos,ypos) {
   push();
        // midt i rotasjonspunktet
        translate(xpos,ypos);
        // huset
        fill(200,255,200);
        stroke(0);
        rect(-this.arm/3.0, -this.arm/3.0, 2*this.arm/3.0, 2*this.arm);
        fill(0);
        ellipse(0,0,10,10);
        // bladene
        rotate(this.vinkel);
        strokeWeight(6);
        noFill();
        for(var i=0; i< 3; i++){            
            rotate(TWO_PI/3);
            line(0,0,arm,0);            
        }    
    pop();     
  }
 }

Her er det lagt opp til at det kan introduseres flere vindmøller (translate og scale) og "huset" bør jo absolutt gjøres litt penere,