ワープ理論を完成させよう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
  <h1></h1>
<div style="cursor:url(./images/Enterprize80.png), pointer"> 

<canvas width="600" height="350"></canvas>

</div>

<input type="button" id="btnStart" value="Start" onclick="StartSimu()">
 
<script type="text/javascript">



const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const width = canvas.width ;
const height = canvas.height ;

let MySimu = false;      // シミュレーション・フラグ

    var center={};

    var dots = [];
    var density = 40;  //パーティクルの数
    var colors = ['#ee0000', '#eeee00', '#0000db'];
    var baseSize = 5;
    var baseSpeed = 3;

    
    //マウスの位置を読み込む。
   var mousePos;
    
    canvas.addEventListener('mousemove', function (evt) {//マウスが動いていたら
          mousePos = getMousePosition(canvas, evt);//マウスの位置を読み取る。

          center.x = mousePos.x;//前のバージョンは画面の中央からドットが出てきた。
          center.y = mousePos.y;//centerにマウスの位置を入れるとマウスのところから

        }, false);
        
    function getMousePosition(canvas, evt) {//マウスの位置を読み取る。
        var rect = canvas.getBoundingClientRect();//キャンバスの位置の補正
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
      }

    
    var Dot = function () {
        this.size = Math.floor( Math.random() * 6 ) + baseSize; //大きさ
        this.color = colors[~~(Math.random() * 3)]; //色
        this.speed = this.size / baseSpeed; // 大きさによって速度変更
        //mousePos = getMousePosition(canvas, evt);
        this.pos = {   // 位置、初期値はキャンバスの中央
            x: canvas.width / 2,
            y: canvas.height / 2
        };

        var rot = Math.random() * 360;  // ランダムな角度
        var angle = rot * Math.PI / 180;

        this.vec = {    // 移動方向
            x: Math.cos(angle) * this.speed,
            y: Math.sin(angle) * this.speed
        };

        // ランダムに配置
        var startRandom = Math.random();
        this.pos.x += this.vec.x * (startRandom * center.x);//キャンバス中央+方向*乱数*マウスの位置
        this.pos.y += this.vec.y * (startRandom * center.y);

    };


    Dot.prototype = {
        update: function() {
            this.pos.x += this.vec.x;//方向分動く
            this.pos.y += this.vec.y;

            if(this.pos.x > canvas.width + baseSize
                  || this.pos.x < 0 - baseSize
                  || this.pos.y > canvas.height + baseSize
                  || this.pos.y < 0 - baseSize) {//壁に当たったら、マウスの位置から再開
                this.pos.x = center.x;
                this.pos.y = center.y;
            }
        },

        draw: function() {//円を球に
            var MyColor=this.color;
            var MyX=this.pos.x;
            var MyY=this.pos.y;
            var MyRad=this.size;
            var InitCx=MyX+MyRad*(204-175)/100;
            var InitCy=MyY+MyRad*(50-100)/100;
            var InitCr=0.1*MyRad;
            var EndCx=MyX+0.25*MyRad;
            var EndCy=MyY-0.25*MyRad;
            var EndCr=0.75*MyRad;
            ctx.beginPath(); 
            ctx.arc(MyX, MyY, MyRad, 0, Math.PI*2, true);
            var gradient2=ctx.createRadialGradient(InitCx,InitCy,InitCr,EndCx,EndCy,EndCr);
            gradient2.addColorStop(0.0,"#EEEEEE");
            gradient2.addColorStop(1.0,MyColor);
            ctx.fillStyle = gradient2; 
            ctx.fill();

        }
    };
  
function loop() {//アニメーションループ
    if(MySimu){
        ctx.fillStyle = 'rgb(255, 255, 255)';//白をセットして
        ctx.fillRect(0, 0,  width, height);//キャンバスを埋める

            for (var i = 0; i < density; i++) {
                    dots[i].update();
                    dots[i].draw();
            }
     

    requestAnimationFrame(loop);
   }
}


// 開始ボタンが押されたとき
function StartSimu() {
  if (MySimu) {
    MySimu = false;
    document.getElementById('btnStart').value = 'シミュレーション開始';
  } else {
    MySimu = true;
    document.getElementById('btnStart').value = 'シミュレーション停止';
    center.x = canvas.width / 2;//初期値、キャンバスの中央
    center.y = canvas.height / 2;

        for (var i = 0; i < density; i++) {
            dots.push(new Dot());//Dotを作って、dots配列に入れていく。
        }
    loop();
  }
}


</script>
  </body>
</html>
プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング >第5時限：理科：ワープ理論構築

5-1:ワープ理論の構築。

5-1-1 こんな改良はどうだろうか？
