バックアップ snow6s1

snow06s1

<div> <canvas width="500" height="500" id="snow_06" style="background-color:rgba(255, 255, 255, 1.0);"> </canvas> </div>

<script>
var canvas = document.getElementById('snow_06');
var context = canvas.getContext('2d');
const PARTICLE = 1000;
const rate = 1.005;
const center_x = canvas.width / 2;
const center_y = canvas.height / 2;

var x = new Array(PARTICLE);
var y = new Array(PARTICLE);
var size = new Array(PARTICLE);
for(let ti = 0 ; ti < PARTICLE ; ti++){<br />    x[ti] = Math.random() * canvas.width;
    y[ti] = Math.random() * canvas.height;
    size[ti] = (Math.random() + 0.001) * 60 ;

var tmp;
}

function draw(){
    context.globalCompositeOperation = "source-over";
    context.fillStyle = "rgb(15,15,31)";
    context.globalAlpha = 1.0;
    context.fillRect(0, 0, canvas.width, canvas.height);

    for( var i=0 ; i<PARTICLE ; i++ ){<br />        context.beginPath();
        context.globalCompositeOperation = "lighter";
        tmp = size[i] - 20.0;
        tmp=Math.abs(tmp);
        context.fillStyle = "white";
        context.globalAlpha = 1.0 / Math.pow(tmp+1.0, 1.7);
        
        context.arc(x[i], y[i], tmp + 1.0, 0, Math.PI*2, false);
        context.fill();

        x[i] += (x[i] - center_x) * size[i] * 0.0001;
        y[i] += (y[i] - center_y) * size[i] * 0.0001; 
        size[i] *= rate;

        if(x[i]<0 || x[i]>canvas.width || y[i]<0 || y[i]>canvas.height){
           x[i] = Math.random() * canvas.width;
           y[i] = Math.random() * canvas.height;
           size[i] = 0.5;
        }
    }
}
setInterval(draw,16);
</script>

 

Ende;

ソースコードのバックアップ

ゆらゆら

<canvas width="500" height="500" id="sumple" style="background-color:rgba(0, 42, 42, 1.0);"> </canvas>

<script>

var canvas = document.getElementById('sumple');
var context = canvas.getContext('2d');
var x = canvas.width/2;
var y=canvas.height/2;
var vect_x=0;
var vect_y=0;

function test() {
    (function circle_animation() {
        context.globalCompositeOperation = "source-over";
        context.fillStyle = "rgba(0, 0, 0,0.01)";
        context.fillRect(0,0,canvas.width,canvas.height);

        context.globalCompositeOperation = "lighter";
        context.beginPath();
        context.arc(x, y, 12, 0, 2*Math.PI, false);
        context.fillStyle = 'rgb(0,15,15)';
        context.fill();

        vect_x+=Math.random()-0.5;
        x+=vect_x;
        vect_x+=(canvas.width/2-x)/2048;
        vect_x*=0.97;

        vect_y+=Math.random()-0.5;
        y+=vect_y;
        vect_y+=(canvas.height/2-y)/2048;
        vect_y*=0.97;

        requestAnimationFrame(circle_animation);
    })();
}

test();

 

</script>

snow06

<canvas width="500" height="500" id="snow_06" style="background-color:rgba(255, 255, 255, 1.0);"> </canvas>

<script>

var canvas = document.getElementById('snow_06');
var context = canvas.getContext('2d');
const PARTICLE = 100;
const rate = 1.005;
const center_x = canvas.width / 2;
const center_y = canvas.height / 2;

var x = new Array(PARTICLE);
var y = new Array(PARTICLE);
var size = new Array(PARTICLE);
for(let ti = 0 ; ti < PARTICLE ; ti++){<br />    x[ti] = Math.random() * canvas.width;
    y[ti] = Math.random() * canvas.height;
    size[ti] = (Math.random() + 0.001)/20 ;

var tmp;
}

function draw(){
    context.globalCompositeOperation = "source-over";
    context.fillStyle = "black";
    context.globalAlpha = 1.0;
    context.fillRect(0, 0, canvas.width, canvas.height);

    for( var i=0 ; i<PARTICLE ; i++ ){<br />        context.beginPath();
        context.arc( x[i], y[i], size[i] + 0.3, 0, Math.PI*2, false);
        context.globalCompositeOperation = "lighter";
        context.globalAlpha = 1 / Math.pow(size[i] + 1.0, 0.2);
        //context.globalAlpha = 0.7;
        context.fillStyle = "white";
        context.fill();

        //x[i] += (x[i] - center_x) * size[i] * 0.0001;
        tmp = x[i] - center_x;
        tmp *= size[i];
        tmp *= 0.001;
        x[i] += tmp;
        
        //y[i] += (y[i] - center_y) * size[i] * 0.0001; 
        tmp = y[i] - center_y;
        tmp *= size[i];
        tmp *= 0.001;
        y[i] += tmp;

        size[i] *= rate;

        if(x[i]<0 || x[i]>canvas.width || y[i]<0 || y[i]>canvas.height){
           x[i] = Math.random() * canvas.width;
           y[i] = Math.random() * canvas.height;
           size[i] = 0.01;
        }
    }
}
setInterval(draw,16);

</script>

色残像錯視

<canvas id="w_Canvas" width="600" height="400"> </canvas>

<script>

var canvas = document.getElementById('w_Canvas');
var context = canvas.getContext("2d"); 
var img01 = new Image();
    img01.src = "https://...X_or.jpg";
var img02 = new Image();
    img02.src = "https://...BnW.jpg";
var counter=20;
var photo_number=0;

function draw(){
    if(counter < -10){
        counter=20;
    }
    if(counter>0){
        context.drawImage(img01, 0, 0);
        context.textAlign = "right";
        context.fillText(counter, 300, 200);
    }
    if(counter<=0){
        context.drawImage(img02, 0, 0);
    }
    counter--;
}
setInterval(draw, 1000);

</script>

雪

雪降らせてみた

　snow6 （Seesaa版）

今回は背景を真っ黒にした

表示される広告によってはCPUとられて動きにムラが出ることがある

ので　ソースコードからJavaScriptだけ抜き出してHTMLファイルこさえてオフラインで実行すれば動きのムラはなくなると思う

AndroidOSでできるのかはわからんが

5,000円くらいで中古Mac売ってねぇかな

何でも良いけど　オイラの環境（Android8.1 Chrome）だとタブが閉じられなくなる　右にスワイプすれば閉じられる　一瞬ビビるけどOS自体はちゃんと応答するので大丈夫だと思う

知らんけど

 

 

Ende;