ワープ前。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>円の放出</title>
  </head>
  <body>
  <h1>円の放出</h1>
<input type="button" id="btnStart" value="Start" onclick="StartSimu()">

<canvas width="600" height="350"></canvas>
 
<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 = ['#eeb900', '#6DD0A5', '#f799db'];
    var baseSize = 3;//大きさを変える
    var baseSpeed = 5;//スピードを変える


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();
  }
}




    
    var Dot = function () {
        this.size = Math.floor( Math.random() * 6 ) + baseSize; //大きさ
        this.color = colors[~~(Math.random() * 3)]; //色
        this.speed = this.size / baseSpeed; // 大きさによって速度変更

        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() {//円を描く
            ctx.fillStyle = this.color;
            ctx.beginPath();
            ctx.arc(this.pos.x, this.pos.y, this.size, 0, 2 * Math.PI, false);
            ctx.fill();
        }
    };


</script>
  </body>
</html>

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング >　第5時限：理科：ワープ前

画面の中央から円が放出されるプログラムがある。

次はそれらを取り入れたワープ理論の構築をやってみよう

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング > 第5時限：理科：ワープ前

画面の中央から円が放出されるプログラムがある。

次はそれらを取り入れたワープ理論の構築をやってみよう

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング

プログラミング・トップ > 化学,薬学系の親子で楽しみながらプログラミング >　第5時限：理科：ワープ前