takanorip/index.html

## index.html
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Random animation</title>
    <script src="main.js"></script>
  </head>
  <body>
    <canvas id="cv" width="500" height="500"></canvas>
  </body>
</html>

## lzpgrm.markdown

      
                Raw

        
              lzpgrm.markdown
            
          
    LZpgrm
A Pen by takanorioki on CodePen.
License.

  
## script.js
window.onload = function(){

var cv = document.getElementById("cv");

if( cv && cv.getContext ) {
  var ctx = cv.getContext("2d");

  /*==================================
    Square Object
  ===================================*/
  var Square = function(){
    return this.set();
  }

  Square.prototype.set = function(){
    var radian = Math.random() * (Math.PI * 360);
    this.x = cv.width * Math.random();
    this.y = cv.height * Math.random();
    this.to_x = Math.cos( radian );
    this.to_y = Math.sin( radian );
    this.speed = Math.random() * 10 + 2;
    this.size = Math.random() * 4 + 1;
  }

  Square.prototype.move = function(){
    this.x += this.to_x * this.speed;
    this.y += this.to_y * this.speed;
    this.out_square_in();
  }

  Square.prototype.out_square_in = function(){
    if( this.x + this.size < 0 ) this.x = cv.width;
    if( cv.width < this.x ) this.x = 0 - this.size;
    if( this.y + this.size < 0 ) this.y = cv.height;
    if( cv.height < this.y ) this.y = 0 - this.size;
  }

/*==================================
    Main Process
  ===================================*/

  var instances = [];

  for( var i = 1; i <= 100; i++ ){
    instances.push( new Square() );
  }

  function draw(){

    var p;
    ctx.fillStyle = "#000"; // setting background color
    ctx.fillRect( 0, 0, cv.width, cv.height ); // drawing background

    for ( var i = 0; i < instances.length; i++) {
      p = instances[i];
      ctx.fillStyle = "#FFF"; // setting the color of an instance
      ctx.fillRect( p.x, p.y, p.size, p.size );
      p.move();
    }

  }


setInterval(draw, 30);
}
}
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>Random animation</title>
	<script src="main.js"></script>
	</head>
	<body>
	<canvas id="cv" width="500" height="500"></canvas>
	</body>
	</html>
	window.onload = function(){

	var cv = document.getElementById("cv");

	if( cv && cv.getContext ) {
	var ctx = cv.getContext("2d");

	/*==================================
	Square Object
	===================================*/
	var Square = function(){
	return this.set();
	}

	Square.prototype.set = function(){
	var radian = Math.random() * (Math.PI * 360);
	this.x = cv.width * Math.random();
	this.y = cv.height * Math.random();
	this.to_x = Math.cos( radian );
	this.to_y = Math.sin( radian );
	this.speed = Math.random() * 10 + 2;
	this.size = Math.random() * 4 + 1;
	}

	Square.prototype.move = function(){
	this.x += this.to_x * this.speed;
	this.y += this.to_y * this.speed;
	this.out_square_in();
	}

	Square.prototype.out_square_in = function(){
	if( this.x + this.size < 0 ) this.x = cv.width;
	if( cv.width < this.x ) this.x = 0 - this.size;
	if( this.y + this.size < 0 ) this.y = cv.height;
	if( cv.height < this.y ) this.y = 0 - this.size;
	}

	/*==================================
	Main Process
	===================================*/

	var instances = [];

	for( var i = 1; i <= 100; i++ ){
	instances.push( new Square() );
	}

	function draw(){

	var p;
	ctx.fillStyle = "#000"; // setting background color
	ctx.fillRect( 0, 0, cv.width, cv.height ); // drawing background

	for ( var i = 0; i < instances.length; i++) {
	p = instances[i];
	ctx.fillStyle = "#FFF"; // setting the color of an instance
	ctx.fillRect( p.x, p.y, p.size, p.size );
	p.move();
	}

	}


	setInterval(draw, 30);
	}
	}