Sei sulla pagina 1di 5

HTML5 + CSS3 + PROCESSING.

JS (testo) (formato) linguaggio javascript layout foglio di stile PROCESSING void setup () { } void draw () { } STEP2 void setup() { size(500, 500); dimensione nestra applicazione } void draw() { if (mousePressed) { ll(0); } else { ll(255); } ellipse(mouseX, mouseY, 80, 80); } STEP3 void setup() { size(500, 500); } void draw() { background(255) ; // Colore di sfondo bianco -> Vedi range modalit colore if (mousePressed) { ll(0); } else { ll(255); } ellipse(mouseX, mouseY, 80, 80); }

STEP4 void setup() { size(500, 500); } void draw() { background(255) ; // Colore di sfondo bianco -> Vedi range modalit colore QDraw(); } void QDraw() { //Non riempire di colore il quadrante noFill(); //Disegna il contorno del quadrante con il nero stroke(0); //Quadrante arc(0, 0, 150, 150, 0, TWO_PI); } STEP5 void setup() { size(500, 500); } void draw() { background(255) ; //Colore di sfondo bianco -> Vedi range modalit colore QDraw(); } void QDraw() { //Non riempire di colore il quadrante noFill(); //Disegna il contorno del quadrante con il nero stroke(0); //Quadrante arc(250, 250, 150, 150, 0, TWO_PI); } STEP6 void setup() { size(500, 500); } void draw() { translate(width/2, height/2); //Traslazione origine de

background(255) ; //Colore di sfondo bianco -> Vedi range modalit colore QDraw(); } void QDraw() { //Non riempire di colore il quadrante noFill(); //Disegna il contorno del quadrante con il nero stroke(0); //Quadrante arc(0, 0, 150, 150, 0, TWO_PI); } STEP7 //Dichiarazioni pubbliche //Incremento redianti per ogni scatto di ora e minuto // 2PI/12ore e 2PI/60minuti = PI/6 e PI/30 oat oIncr = PI/6; //Incremento radianti per ore void setup() { size(500, 500); } void draw() { translate(width/2, height/2); //Traslazione origine de background(255) ; //Colore di sfondo bianco -> Vedi range modalit colore QDraw(); } void QDraw() { //Non riempire di colore il quadrante noFill(); //Disegna il contorno del quadrante con il nero stroke(0); //Quadrante arc(0, 0, 150, 150, 0, TWO_PI); ll(0); //Colore nero //Dichiarazione variabile per le coordinate x, y, di inserimento testo int tx; int ty;

//Ciclo per disegnare tutte le ore for (int i = 0; i < 12; i = i+1) { // tx=int(65*cos(oIncr*i-PI/2)); ty=int(65*sin(oIncr*i-PI/2)); if(i == 0) { text("12", tx, ty ); } else { text(i,tx ,ty ); } } } LAST STEP //Dichiarazioni pubbliche //Incremento redianti per ogni scatto di ora e minuto // 2PI/12ore e 2PI/60minuti = PI/6 e PI/30 oat oIncr = PI/6; //Incremento radianti per ore oat smIncr = PI/30; //Incremento radianti per minuti void setup() { size(400, 400); } void draw() { translate(width/2, height/2); //Traslazione origine de background(255) ; //Colore di sfondo bianco -> Vedi range modalit colore QDraw(); int s = second(); int m = minute(); int h = hour(); if(h > 11) { h = h -12;} LDraw(s,m,h) ; }

void QDraw() { //Non riempire di colore il quadrante noFill(); //Disegna il contorno del quadrante con il nero stroke(0); //Quadrante arc(0, 0, 150, 150, 0, TWO_PI); ll(0); //Colore nero //Dichiarazione variabile per le coordinate x, y, di inserimento testo int tx; int ty; //Ciclo per disegnare tutte le ore for (int i = 0; i < 12; i = i+1) { // tx=int(60*cos(oIncr*i-PI/2)); ty=int(60*sin(oIncr*i-PI/2)); if(i == 0) { text("12", tx, ty ); } else { text(i,tx ,ty ); } } } //Disegnare le lancette void LDraw(int s, int m, int h) { //Disegnare le lancette ll(0); //Nero //Lancetta secondi //line(x1,y1,x2,y2); line(0, 0, 70*cos(smIncr*s-PI/2), 70*sin(smIncr*s-PI/2)); //70=dimensione lancetta in pixel || -PI/2 per partire dalle 12 e non dalle 3 //Lancetta minuti line(0, 0, 60*cos(smIncr*m-PI/2), 60*sin(smIncr*m-PI/2)); //Lancetta ore line(0, 0, 50*cos(oIncr*(h+ m/60.0)-PI/2), 50*sin(oIncr*(h+ m/60.0)-PI/2));