A Pen by takanorioki on CodePen.
Created
October 13, 2016 13:03
-
-
Save takanorip/4c6e32cad6c09d9b56cbfaa1be44eb32 to your computer and use it in GitHub Desktop.
LZpgrm
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment