ステレオ雪

ステレオ雪（改）

Seesaaブログだと記事領域の幅に制限があるので縦方向に視差をつけてみた

ので　OSの画面自動回転機能をオフにしてからスマホやタブレットを横にして見てね

現在はPC等には対応していないので　とりあえず諦めて

PCに詳しい人に聞けばオフラインで実行する方法も知っているはず

改造すれば横並びにもできるんだけど

オイラの知識は結構偏ってるので　あんま説明はしたくないのよね

オイラはPC持ってないし

PCだったらテキストエディタでHTMLファイル保存してブラウザから開けば動くはずなんだけど

ブログ同様に...タグ内にコピペすれば動くはず

今NetscapeComposerってあるのかしら　なくてもテキストエディタでナントカなるとは思う

拡張子 *.txt でしか保存できなくても 　ファイルマネージャー的なもので拡張子を *.html に書き換えれば良いだけ

のはず

ってか最近のPCって拡張子書き換えられんのかしら

書き換えられるとしても手順がめんどいのかも

知らんけど

いや　本当に知らないのよ　最近のPCのことは

ググった方が良いかも

出てくるかなぁ…

意外と出てこないことあるのよね…

 

Ende;

snow06s2 Backup

snow06s2

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

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

<script>
var canvas_r = document.getElementById('snow_06sr');
var canvas_l = document.getElementById('snow_06sl');
var context_r = canvas_r.getContext('2d');
var context_l = canvas_l.getContext('2d');
const PARTICLE = 400;
const rate = 1.005;
const center_x = canvas_r.width / 2;
const center_y = canvas_r.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_r.width;
    y[ti] = Math.random() * canvas_r.height;
    size[ti] = (Math.random() + 0.001) * 60 ;

var tmp;
}

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

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

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

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

 

Ende;