termat/clock.markdown

## clock.markdown

      
    Raw
  

              clock.markdown
            
          
    Clock

A Pen by termat on CodePen.
License.

  
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clock</title>
</head>
<body>
<table border="1"><tr><td>
<canvas id="canvas" width="480" height="480"></canvas>
</td></tr></table>
<script id="processing-code" type="application/processing">
IKLine[] ik;
int tmp;

void setup() {
  size(440,440);
  ik=new IKLine[15];
  ik[0]=new IKLine(25,220,220,20);
  ik[0].alpha=64;
  ik[0].rad=180;
  ik[1]=new IKLine(20,220,220,18);
  ik[1].rad=165;
  ik[2]=new IKLine(18,220,220,15);
  ik[2].rad=150;
  frameRate(30);
  tmp=second()*1000;

  for(int i=3;i<15;i++){
    float r=(i-3)*30.0/180.0*PI;
    float xx=180*cos(r)+220;
    float yy=180*sin(r)+220;
    ik[i]=new IKLine(30,xx,yy,20);
    ik[i].alpha=8;
    ik[i].rad=180;
  }
}

void draw() {
  background(255);
        drawback();
  int mm=millis()%60000+tmp;
  float s = (mm*0.006-90)*0.01745;
  ik[0].draw(s);
  float m = ((minute()+second()/60.0)*6.0-90)*0.01745;
  ik[1].draw(m);
  float h = ((hour()+minute()/60.0)*30.0-90)*0.01745;
  ik[2].draw(h);

  float sx=180*cos(s)+220;
  float sy=180*sin(s)+220;
  for(int i=3;i<ik.length;i++){
    ik[i].draw(sx,sy);
  }

}

void drawback(){
  for(int i=0;i<12;i++){
    pushMatrix();
    float r=i*30.0/180.0*PI;
    float xx=180*cos(r)+220;
    float yy=180*sin(r)+220;
    translate(xx, yy);
    fill(#cccccc);
    rect(-5,-5,10,10);
    popMatrix();
  }
}

class IKLine{
  int maxNum;
  float[] xx;
  float[] yy;
  float[] aa;
  float length = 20;
  float tx;
  float ty;
  float rad=180;
  int centerX;
  int centerY;
  int[] rgb=new int[3];
  int alpha=126;

  public IKLine(int n,int cx,int cy,int l){
    maxNum=n;
    centerX=cx;
    centerY=cy;
    length=l;
    xx= new float[maxNum];
    yy= new float[maxNum];
    aa= new float[maxNum];
    for(int i=0; i<maxNum; i++){
    xx[i]=centerX;
    yy[i]=centerY;
    aa[i]=0;
    }
    yy[maxNum-1] = centerY;
    rgb[0]=0;
    rgb[1]=0;
    rgb[2]=0;
  }

  void draw(float radian) {
    float sx=rad*cos(radian)+centerX;
    float sy=rad*sin(radian)+centerY;
    draw(sx,sy);
  }

  void draw(float sx,float sy) {
    angle(0,sx,sy);
    for(int i=1;i<maxNum;i++)angle(i,tx,ty);
    for(int i=maxNum-1;i>=1;i--)position(i,i-1);
    for(int i=0;i<maxNum;i++)drawElem(xx[i],yy[i],aa[i],(i+1)*1.5,i);
  }

  void angle(int i,float _x,float _y){
    float dx = _x - xx[i];
    float dy = _y - yy[i];
    aa[i] = atan2(dy,dx);
    tx = _x - cos(aa[i]) * length;
    ty = _y - sin(aa[i]) * length;
  }

  void position(int a,int b){
    xx[b] = xx[a] + cos(aa[a]) * length;
    yy[b] = yy[a] + sin(aa[a]) * length;
  }

  void drawElem(float _x,float _y,float _a,int _s,int i){
    color c = color(rgb[0],rgb[1],rgb[2],alpha);
    stroke(c);
    strokeWeight(_s);
    float dx=length*cos(_a);
    float dy=length*sin(_a);
    line(_x,_y,_x+dx,_y+dy);
  }
}
</script>


<script type="text/javascript" src="http://jsdo.it/lib/processingjs-0.9.4/js"></script>

<script type="text/javascript" src="http://jsdo.it/lib/jquery-1.4.2.min/js"></script>

<script type="text/javascript" src="index.js"></script>
</body>
</html>

## script.js
$(document).ready(function() {
  var canvas = document.getElementById('canvas');
  var codeElm = document.getElementById('processing-code');
  var code = codeElm.textContent || codeElm.innerText;
  Processing(canvas, code);
});
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Clock</title>
	</head>
	<body>
	<table border="1"><tr><td>
	<canvas id="canvas" width="480" height="480"></canvas>
	</td></tr></table>
	<script id="processing-code" type="application/processing">
	IKLine[] ik;
	int tmp;

	void setup() {
	size(440,440);
	ik=new IKLine[15];
	ik[0]=new IKLine(25,220,220,20);
	ik[0].alpha=64;
	ik[0].rad=180;
	ik[1]=new IKLine(20,220,220,18);
	ik[1].rad=165;
	ik[2]=new IKLine(18,220,220,15);
	ik[2].rad=150;
	frameRate(30);
	tmp=second()*1000;

	for(int i=3;i<15;i++){
	float r=(i-3)30.0/180.0PI;
	float xx=180*cos(r)+220;
	float yy=180*sin(r)+220;
	ik[i]=new IKLine(30,xx,yy,20);
	ik[i].alpha=8;
	ik[i].rad=180;
	}
	}

	void draw() {
	background(255);
	drawback();
	int mm=millis()%60000+tmp;
	float s = (mm0.006-90)0.01745;
	ik[0].draw(s);
	float m = ((minute()+second()/60.0)6.0-90)0.01745;
	ik[1].draw(m);
	float h = ((hour()+minute()/60.0)30.0-90)0.01745;
	ik[2].draw(h);

	float sx=180*cos(s)+220;
	float sy=180*sin(s)+220;
	for(int i=3;i<ik.length;i++){
	ik[i].draw(sx,sy);
	}

	}

	void drawback(){
	for(int i=0;i<12;i++){
	pushMatrix();
	float r=i30.0/180.0PI;
	float xx=180*cos(r)+220;
	float yy=180*sin(r)+220;
	translate(xx, yy);
	fill(#cccccc);
	rect(-5,-5,10,10);
	popMatrix();
	}
	}

	class IKLine{
	int maxNum;
	float[] xx;
	float[] yy;
	float[] aa;
	float length = 20;
	float tx;
	float ty;
	float rad=180;
	int centerX;
	int centerY;
	int[] rgb=new int[3];
	int alpha=126;

	public IKLine(int n,int cx,int cy,int l){
	maxNum=n;
	centerX=cx;
	centerY=cy;
	length=l;
	xx= new float[maxNum];
	yy= new float[maxNum];
	aa= new float[maxNum];
	for(int i=0; i<maxNum; i++){
	xx[i]=centerX;
	yy[i]=centerY;
	aa[i]=0;
	}
	yy[maxNum-1] = centerY;
	rgb[0]=0;
	rgb[1]=0;
	rgb[2]=0;
	}

	void draw(float radian) {
	float sx=rad*cos(radian)+centerX;
	float sy=rad*sin(radian)+centerY;
	draw(sx,sy);
	}

	void draw(float sx,float sy) {
	angle(0,sx,sy);
	for(int i=1;i<maxNum;i++)angle(i,tx,ty);
	for(int i=maxNum-1;i>=1;i--)position(i,i-1);
	for(int i=0;i<maxNum;i++)drawElem(xx[i],yy[i],aa[i],(i+1)*1.5,i);
	}

	void angle(int i,float _x,float _y){
	float dx = _x - xx[i];
	float dy = _y - yy[i];
	aa[i] = atan2(dy,dx);
	tx = _x - cos(aa[i]) * length;
	ty = _y - sin(aa[i]) * length;
	}

	void position(int a,int b){
	xx[b] = xx[a] + cos(aa[a]) * length;
	yy[b] = yy[a] + sin(aa[a]) * length;
	}

	void drawElem(float _x,float _y,float _a,int _s,int i){
	color c = color(rgb[0],rgb[1],rgb[2],alpha);
	stroke(c);
	strokeWeight(_s);
	float dx=length*cos(_a);
	float dy=length*sin(_a);
	line(_x,_y,_x+dx,_y+dy);
	}
	}
	</script>



	<script type="text/javascript" src="http://jsdo.it/lib/processingjs-0.9.4/js"></script>

	<script type="text/javascript" src="http://jsdo.it/lib/jquery-1.4.2.min/js"></script>

	<script type="text/javascript" src="index.js"></script>
	</body>
	</html>
	$(document).ready(function() {
	var canvas = document.getElementById('canvas');
	var codeElm = document.getElementById('processing-code');
	var code = codeElm.textContent \|\| codeElm.innerText;
	Processing(canvas, code);
	});