オブジェクト指向JavaScript + Canvas

Result

See the Pen LZpgrm by takanorioki (@takanorioki4) on CodePen.

main.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() * 3 + 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);
}
}

index.html

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>Object Animation</title>
    <script src="main.js"></script>
  </head>
  <body>
    <canvas id="cv" width="300" height="300"></canvas>
  </body>
</html>

Three.js

Result

See the Pen rLOqdy by takanorioki (@takanorioki4) on CodePen.

main.js

var args = {
  w : window.innerWidth,
  h : window.innerHeight,
  cam : null,
  lt : null,
  scn : null,
  cube : null,
  renderer : null
}

function set_renderer(){

  args.renderer = new THREE.WebGLRenderer();
  args.renderer.setSize( args.w, args.h );
  args.renderer.setClearColor( 0x333333 );

  document.getElementById("cv").appendChild( args.renderer.domElement );

}

function camera(){
  args.cam = new THREE.PerspectiveCamera( 30,args.w/args.h);
  args.cam.position.x = 100;
  args.cam.position.y = 100;
  args.cam.position.z = 100;
  args.cam.lookAt({x:0, y:0, z:0});
}

function scene() {
  args.scn = new THREE.Scene();
}

function light() {
  args.lt = new THREE.DirectionalLight();
  args.lt.position.set( 300,200,100 );
  args.scn.add( args.lt );
}

function set_obj() {

  args.cube = new THREE.Mesh(
    new THREE.CubeGeometry(30, 30, 30),
    new THREE.MeshLambertMaterial({color:0x66FF66})
  );

  args.scn.add(args.cube);
  args.cube.position.set(0,0,0);

}

window.onload = function(){
  set_renderer();
  camera();
  scene();
  light();
  set_obj();

  args.renderer.render( args.scn, args.cam );

  setInterval(function(){
    args.cube.rotation.x += 
0.05
;
    args.cube.rotation.y += 
0.10
;
    args.renderer.render( args.scn, args.cam );
  }, 30);

}

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Three.js</title>
  <link rel="stylesheet" href="main.css">
  <script src="/assets/files/three.min.js"></script>
  <script src="main.js"></script>

</head>
<body id="cv">

</body>
</html>