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



Your browser does not support the HTML5 canvas element.


Drag mouse to navigate.

Navigation





17.Aug.2010, Martin Wengenmayer