【学習メモ】インタラクティブアートのコード【Javascriptの練習】

Technology
スポンサーリンク

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>Interactive Art</title>
</head>
<body>
   <canvas id="mycanvas" width="500" height="250">
   Canvasに対応したブラウザを使ってください。
  </canvas>
  <script>
  (function() {
    'use strict';

    var canvas;
    var ctx;
    var Ball;
    var balls = [];

    canvas = document.getElementById('mycanvas');
    if (!canvas || !canvas.getContext) return false;
    ctx = canvas.getContext('2d');

    function rand(min, max) {
      return min + Math.floor(Math.random() * (max - min + 1));
    }

    canvas.addEventListener('click', function(e) {
    	var x, y, r;
    	var rect;
    	rect = e.target.getBoundingClientRect();
    	x = e.clientX - rect.left;
    	y = e.clientY - rect.top;
    	r = rand(0, 100) < 20 ? rand(50, 80) : rand(10,35);
    	balls.push(new Ball(x, y, r));
    });

    Ball = function(x, y, r) {
      this.x = x;
      this.y = y;
      this.r = r;
      this.vx = rand(-10, 10);
      this.vy = rand(-10, 10);
      this.color = 'hsla(' + rand(50, 100) +', ' + rand(40, 80) + '%, ' + rand(50, 60) + '%, ' + Math.random() + ')';
       this.draw = function() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, this.r, 0, Math.PI*2);
        ctx.fillStyle = this.color;
        ctx.closePath();
        ctx.fill();
      };
      this.move = function() {
      	if (this.x + this.r > canvas.width || this.x - this.r < 0) {
      		this.vx *= -1;
      	}
      	if (this.y + this.r > canvas.height || this.y - this.r < 0) {
      		this.vy *= -1;
      	}
        this.x += this.vx;
        this.y += this.vy;
      }
    };
    function update() {
    	var i;
      ctx.fillStyle = '#ecf0f1';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      for (i = 0; i < balls.length; i++) {
      	balls[i].draw();
      	balls[i].move();
      }
      setTimeout(function() {
        update();
      }, 30);
    }

    update();
     })();
  </script>
</body>
</html>

 

【おさかなび-osakanav-】では、この記事の感想!おさかなへの応援メッセージ!おさかなに聞きたい事、質問!記事にしてほしい内容!などを大募集中!

「氏名」「メールアドレス」「内容」の3点をご記入の上「osakana1699@gmail.com」までご応募ください!

この記事は役に立ちましたか?

タイトルとURLをコピーしました