Analog klokke

Hva

På siden Push og Pop introduserte vi de to funksjoene push() og pop() for å holde styr på transformasjoner og stilsetting. Her skal vi se på et eksempel på bruk: en analog klokke.

De viktigste begrepene vi bruker, se Reference

translate(),  rotate()
strokeWeight()
push(),  pop() 
second(),  minute(), hour()

Løsningen er slik:

Websiden er minimalistisk:

<!DOCTYPE html>
<html>
  <head>
    <title>index</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>
  <div id="canvasHer"></div>
  </body>
</html>

og scriptet er slik:

/* En analog kokke
   anta kvadratisk tegneflate
*/
var senterX,senterY;
var radius;
function setup(){
    var canvas = createCanvas(200, 200);
    canvas.parent("canvasHer");
    senterX=width/2;
    senterY=height/2;
    radius=min(width,height)/2-10;
    // hvert sekund
    frameRate(1);
}
function draw(){
    background(255);
    tegnKlokke();
}
function tegnKlokke(){
  var sekund=second();
  var minutt=minute();
  var time=hour();
  push();
  smooth();
    translate(senterX,senterY);
    tegnSkive();
    // tegn sekundviseren
    push();      
      strokeWeight(1);
      rotate((1.0*sekund/60)*TWO_PI);
      line(0,0,0,-radius);
    pop();
    // tegn minuttviseren
    push();      
      strokeWeight(3);
      rotate((1.0*minutt/60)*TWO_PI);
      line(0,0,0,-radius*0.8);
    pop();
    // tegn timeviseren
    push();
      strokeWeight(5);
      rotate((1.0*time/12)*TWO_PI);
      // pluss litt av en time
      rotate((TWO_PI/12)*(1.0*minutt/60));
      line(0,0,0,-radius*0.5);
    pop();
   pop();
}
function tegnSkive(){
  push();
    strokeWeight(1);
    fill(220,220,255);
    ellipseMode(RADIUS);
    ellipse(0,0,radius,radius);
    fill(0);
    for(var ix=0; ix < 12; ix++){
      push();
        rotate((1.0*ix/12)*TWO_PI);
        translate(0,radius);
        ellipse(0,0,3,3);
      pop();
    }
  pop();
}

En utvidelse

Hvis du er interessert i en liten javascript anvendelse, kan du jo kikke på dette. Vi lager oss et javascript for å vise datoen på norsk. Merk at denne koden ikke har noe med p5js å gjøre.

function norskDato(){
  var dt=new Date();
  var ukeDag=new Array("Søndag","Mandag","Tirsdag",
                        "Onsdag","Torsdag","Fredag","Lørdag");
  var manedsNavn=new Array("Januar","Februar","Mars","April",
                          "Mai","Juni","Juli","August",
                          "September","Oktober","November","Desember");
  var S= ukeDag[dt.getDay()]+' '+dt.getDate()+
         '. '+manedsNavn[dt.getMonth()]+' '+dt.getFullYear();
  
  document.getElementById("datoHer").innerHTML=S;
  // endres en gang i døgnet, sjekker hvert minutt
  setTimeout(norskDato,60000);
}

Vi kopler dette til websiden slik:

<!DOCTYPE html>
<html>
  <head>
    <title>index</title>
    <meta charset="UTF-8"/>
    <script src="https://borres.hiof.no/resources/p5js/p5.min.js"> 
    </script>
    <script src="sketch.js"> </script>
     <script src="dato.js"> </script>
    <style>canvas{border:solid thin blue}</style>
  </head>
  <body>
  <div id="canvasHer"></div>
   <div id="datoHer"></div>
   <!-- vis datoen -->
   <script> norskDato();</script>
  </body>
</html>

Sketch.js er uforandret, og vi får følgende;

Denne utvidelsen demonstrerer to ting. For det første viser den hvordan vi kan kombinere p5js-koding med generell javascript programmering og bruk av andre HTML-elementer enn canvss. For det andre demonstrerer det hvor vanskelig det er for forfatteren å la være (!),