Analog klokke
Det er to pde-filer som beskriver sketchen.
_clock2.pde
/* Drawing an analog clock Assuming width of sketch is same as height */ Clock myClock; void setup(){ size(300,300); //myClock=new Clock(200,200,100); myClock=new Clock(); frameRate(1); } void draw(){ background(255); myClock.draw(); } void setDate(String S){ myClock.setDateString(S); }
og
_Clock.pde
class Clock{ PVector position; float radius; PFont bigF; String dateString=""; Clock(float x, float y, float r){ position=new PVector(x,y); radius=r; bigF=createFont("Arial bold",14); } Clock(){ position=new PVector(width/2,height/2); radius=width/2-10; bigF=createFont("Arial bold",14); } void draw(){ pushStyle(); smooth(); pushMatrix(); translate(position.x,position.y); drawClockFace(); drawDate(); //resetMatrix(); // draw seconds pushMatrix(); int s=second(); strokeWeight(1); rotate((1.0*s/60)*TWO_PI); line(0,0,0,-radius); popMatrix(); // draw minute pushMatrix(); int m=minute(); strokeWeight(3); rotate((1.0*m/60)*TWO_PI); line(0,0,0,-radius*0.8); popMatrix(); // draw hour pushMatrix(); int h=hour(); strokeWeight(5); rotate((1.0*h/12)*TWO_PI); // pluss part of hour float dv=(TWO_PI/12)*(1.0*m/60); rotate(dv); line(0,0,0,-radius*0.5); popMatrix(); popMatrix(); popStyle(); } void drawClockFace(){ pushStyle(); strokeWeight(1); fill(#EFF029); ellipseMode(RADIUS); ellipse(0,0,radius,radius); fill(0); for(int ix=0; ix < 12; ix++){ pushMatrix(); rotate((1.0*ix/12)*TWO_PI); translate(0,radius); ellipse(0,0,3,3); popMatrix(); } popStyle(); } void drawDate(){ pushStyle(); fill(0); textFont(bigF); pushMatrix(); translate(0,radius/2); textAlign(CENTER,CENTER); if(dateString.length()==0) text(""+day()+"."+month()+"."+year(),0,0); else text(dateString,0,0); popMatrix(); popStyle(); } void setDateString(String S){ dateString=S; } }
Disse kopler vi til et canvas-element slik:
<canvas id="draw1" data-processing-sources="clock2.pde Clock.pde"> </canvas>
Javascriptet som kommuniserer med processing-koden og setter norsk datoformat ser slik ut:
_index.js
function norwegianDate(){ var dt=new Date(); var weekday=new Array("Søndag","Mandag","Tirsdag", "Onsdag","Torsdag","Fredag","Lørdag"); var monthName=new Array("Januar","Februar","Mars","April", "Mai","Juni","Juli","August", "September","Oktober","November","Desember"); S= weekday[dt.getDay()]+' '+dt.getDate()+ '. '+monthName[dt.getMonth()]+' '+dt.getFullYear(); // only actual by change of day, give it a minute setTimeout(norwegianDate,60000); var pjs=Processing.getInstanceById("draw1"); pjs.setDate(S); }