DIR : /home/kozerus/public_html/jkwii/js/jsdoit/elctricity/index.js
/home/kozerus/public_html/jkwii/js/jsdoit/elctricity
var ctx,canvas,timer,isstart,count,step,bun,yrad,krad;
window.onload=function(){
var a;
canvas = document.getElementsByTagName('canvas')[0],
ctx = canvas.getContext('2d');
canvas.width=canvas.height=400;
ctx.fillRect(0,0,400,400);
gime=ctx.getImageData(0,0,400,400);
ctx.globalCompositeOperation = "lighter";
ctx.strokeStyle=a="hsla(222,70%,50%,0.5)";
ctx.fillStyle=a;
bun=["正方形を回転させます",
"時間を適当な値で割ったものをαとして各点のyにsin(α)をかけます",
"sin(α±円周率/2)でyを変化させる座標を用意します",
"用意した座標と各点を結びます",
"全体を座標回転させます",
"中心座標と各点を結びます 中心座標も周期的に動かします",
"線を三等分する中点をとり垂直方向にランダムにスライドさせます",
"再帰でスライドを繰り返し線の量も増やします 終"];
yrad=1.2;
krad=0.8;
count=230;
step=7;
cube();
};
function cube(){
var a,b,x,y,x1,y1,rad,p,ue,sita,yp,yp2,msin,mcos,size,tx,ty;
size=170;
ctx.lineWidth=2;
tx=ty=200;
b=0;
if(step>4)b=(step-4)*10;
a=count/47;
tx+=Math.cos(a)*b;
ty+=Math.sin(a)*b;
yp=Math.sin(yrad);
yp2=Math.sin(yrad-Math.PI/2);
msin=Math.sin(krad);
mcos=Math.cos(krad);
p=[];
rad=count/31;
b=Math.PI*2/4;
for(a=0;a<4;a++){
x=Math.sin(rad)*size;
y=Math.cos(rad)*size*yp;
x1=x*mcos-y*msin;
y1=x*msin+y*mcos;
p[a]=[x1+tx,y1+ty];
rad+=b;
}
y=size*yp2;
x1=-y*msin;
y1=y*mcos;
ue=[x1+tx,y1+ty];sita=[-x1+tx,-y1+ty];
if(step>1)maru(ue[0],ue[1]);
if(step>1)maru(sita[0],sita[1]);
for(a=0;a<4;a++){
maru(p[a][0],p[a][1]);
duma(p[a][0],p[a][1],p[(a+1)%4][0],p[(a+1)%4][1],3);
if(step>2)duma(ue[0],ue[1],p[a][0],p[a][1],3);
if(step>2)duma(sita[0],sita[1],p[a][0],p[a][1],3);
if(step>4)duma(tx,ty,p[a][0],p[a][1],2);
}
if(step>4)maru(tx,ty);
if(step>4)duma(sita[0],sita[1],tx,ty,2);
if(step>4)duma(ue[0],ue[1],tx,ty,2);
}
function maru(x,y){
ctx.beginPath();
ctx.arc(x,y,10,0,Math.PI*2,false);
ctx.fill();
ctx.beginPath();
ctx.arc(x,y,5,0,Math.PI*2,false);
ctx.fill();
}
function kaisi(){
var a;
a=document.location+"";
a=a.split("/")[3];
if(a!="jagarikin"){
window.open("http://jsdo.it/jagarikin/gw7C");
return;
}
if(isstart){
step++;
if(step==bun.length-1)document.getElementById("stb").value="おしまい";
if(step>bun.length-1){
isstart=0;
document.getElementById("stb").value="スタート";
return;
}
}else{
step=count=krad=0;
yrad=Math.PI/2;
document.getElementById("stb").value="次へ>>";
isstart=1;
timer=setTimeout(ruup,0);
}
document.getElementById("setu").innerHTML=(step+1)+":"+bun[step];
}
function ruup(){
var a,b;
clearTimeout(timer);
if(!isstart)return;
timer=setTimeout(ruup,30);
ctx.putImageData(gime,0,0);
cube();
count++;
if(step>0)yrad+=1/23;
if(step>3)krad+=1/43;
}
function duma(sx,sy,ex,ey,kai){
var a,b,c,d;
d=2.5;
if(step<6){
ctx.beginPath();
ctx.moveTo(sx,sy);
ctx.lineTo(ex,ey);
ctx.stroke();
return;
}
if(step==6)kai=0;
for(c=0;c<14;c++){
a=[];
ina(sx,sy,ex,ey,kai,a,0.5+c*0.1);
a.push(ex,ey);
ctx.beginPath();
ctx.moveTo(a[0],a[1]);
for(b=2;b<a.length;b+=2)ctx.lineTo(a[b],a[b+1]);
ctx.lineWidth=d;
ctx.stroke();
d*=0.8;
if(d<1)d=1;
if(step==6)break;
}
}
function ina(sx,sy,ex,ey,kai,hai,bai){
var a,rx,ry,x1,y1,x2,y2;
rx=(ex-sx)/3;ry=(ey-sy)/3;
a=(Math.random()-0.5)*bai;
x1=sx+rx-ry*a;y1=sy+ry+rx*a;
a=(Math.random()-0.5)*bai;
x2=sx+rx*2-ry*a;y2=sy+ry*2+rx*a;
if(kai){
ina(sx,sy,x1,y1,kai-1,hai,bai);
ina(x1,y1,x2,y2,kai-1,hai,bai);
ina(x2,y2,ex,ey,kai-1,hai,bai);
}else{
hai.push(sx,sy,x1,y1,x2,y2);
}
}
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer