russellbeattie/A-Pen-by-Russell-Beattie.markdown

## A-Pen-by-Russell-Beattie.markdown

      
    Raw
  

              A-Pen-by-Russell-Beattie.markdown
            
          
    A Pen by Russell Beattie

A Pen by Russell Beattie on CodePen.
License.

  
## index.html
<html>
    <head>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
</head>

  <body>
  </body>
</html>

## script.js
var gui = new dat.GUI();


var renderer = new THREE.WebGLRenderer({
  antialias: false
});


renderer.setSize(document.body.clientWidth, document.body.clientHeight);

document.body.appendChild(renderer.domElement);

renderer.setClearColor(0x000000, 1.0);

renderer.clear();


var fov = 45;
var width = renderer.domElement.width;
var height = renderer.domElement.height;
var aspect = width / height;
var near = 1;
var far = 3000;

var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);


camera.position.y = -175;
camera.position.z = 20;
camera.lookAt(new THREE.Vector3(0,0,0));

var f1 = gui.addFolder('camera position');
f1.add(camera.position, 'x', -500, 500).listen();
f1.add(camera.position, 'z', 1, 300);
f1.open();

var f2 = gui.addFolder('camera rotation');
f2.add(camera.rotation, 'x', -Math.PI, Math.PI);
f2.add(camera.rotation, 'y', -Math.PI, Math.PI);
f2.add(camera.rotation, 'z', -Math.PI, Math.PI);
f2.open();

var scene = new THREE.Scene();
scene.fog = new THREE.Fog( 0x000000, 1, far );

var darkMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, transparent: true, opacity: 0.5 } );
var polys = [];


//Polygons

var cube = THREE.SceneUtils.createMultiMaterialObject(
  new THREE.CubeGeometry(30, 30, 30),
  [darkMaterial, new THREE.MeshBasicMaterial( { color: 0xCF0505, wireframe: true, wireframeLinewidth: 3} )]
);

var tetra = THREE.SceneUtils.createMultiMaterialObject(
  new THREE.TetrahedronGeometry( 15, 0),
  [darkMaterial, new THREE.MeshBasicMaterial( { color: 0xF6790B, wireframe: true, wireframeLinewidth: 3} )]
);

var octa = THREE.SceneUtils.createMultiMaterialObject(
  new THREE.OctahedronGeometry( 10, 0),
  [darkMaterial, new THREE.MeshBasicMaterial( { color: 0x17C2EA, wireframe: true, wireframeLinewidth: 3} )]
);

var totalPolys = 100;

for(var i = 0; i < totalPolys; i++){
  var poly;
  if(i < (totalPolys * 0.6)){
    poly = octa.clone();
  } else if(i >= totalPolys * 0.6 && i < totalPolys * 0.9){
    poly = tetra.clone();
  } else {
    poly = cube.clone();
  }
  poly.position.set(Math.random() * 1000 - 500, (Math.random() * 1500) + 1500, 20);
  poly.spinX = (Math.random() * 20 - 10) / 1000;
  poly.spinY = (Math.random() * 4 - 2) /100;
  poly.modX = (Math.random() * 3 - 2)/10;
  poly.modY = (Math.random() * 10 - 5)/10;
  polys.push(poly);
  scene.add( poly );
}

for(var i = 0; i < 10; i++){

  poly = THREE.SceneUtils.createMultiMaterialObject(
    new THREE.CylinderGeometry( 0, 30, 100, 20, 4 ),
    [darkMaterial, new THREE.MeshBasicMaterial( { color: 0xCDF346, wireframe: true, wireframeLinewidth: 3} )]
  );

  poly.position.set(Math.random() * 1000 - 500, (Math.random() * 1500) + 1500, 20);
  poly.rotation.x = Math.PI /2;

  poly.spinX = 0;
  poly.spinY = 0;
  poly.modX = 0;
  poly.modY = 0;

  polys.push(poly);
  scene.add( poly );

}


var planeSize = far * 2;
var planeSegments = 60;

var plane = new THREE.Mesh(
  new THREE.PlaneGeometry(planeSize/2, planeSize, planeSegments, planeSegments),
  new THREE.MeshBasicMaterial({ color:0x00FF00, wireframe:true, transparent:true })
);
plane.position.z = -20;

var plane2 = plane.clone();
plane2.position.y = plane.position.y + planeSize;

scene.add(plane);
scene.add(plane2);

renderer.render(scene, camera);

var paused = false;
gui.add(this, 'paused');
var speed = 4;

gui.add(this, 'speed', 0, 50);

var turnMod = 0;

function animate(t) {

  renderer.clear();
  //camera.lookAt(scene.position);
  renderer.render(scene, camera);

  if (!paused) {

    for(var i = 0; i < polys.length; i++){
      var poly = polys[i];
      poly.rotation.x += poly.spinX;
      poly.rotation.y += poly.spinY;
      poly.position.x += poly.modX + turnMod;
      poly.position.y += - speed  - poly.modY;

      if(poly.position.y < -200){
        polys[i].position.y = 1200;
      }

    }


    if(plane.position.y < - far * 1.5){
      plane.position.y = plane2.position.y + planeSize;
    }
    if(plane2.position.y < -far * 1.5){
      plane2.position.y = plane.position.y + planeSize;
    }

    if(cube.position.y < -far * 1.5){
      cube.position.y = far;
    }


    plane.position.y +=- speed ;
    plane2.position.y  += - speed ;

    plane.position.x += turnMod;
    plane2.position.x += turnMod;

  }


   window.requestAnimationFrame(animate);
}

animate(new Date().getTime());


window.onresize = start;
window.onload = start;

function start(event) {
  width = window.innerWidth;
  height = window.innerHeight;
  camera.aspect = width / height;
  camera.updateProjectionMatrix();
  renderer.setSize(width, height);
  renderer.clear();
};

## style.css
body {
  margin: 0px;
  padding: 0px;
}
	<html>
	<head>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
	</head>

	<body>
	</body>
	</html>
	var gui = new dat.GUI();


	var renderer = new THREE.WebGLRenderer({
	antialias: false
	});


	renderer.setSize(document.body.clientWidth, document.body.clientHeight);

	document.body.appendChild(renderer.domElement);

	renderer.setClearColor(0x000000, 1.0);

	renderer.clear();


	var fov = 45;
	var width = renderer.domElement.width;
	var height = renderer.domElement.height;
	var aspect = width / height;
	var near = 1;
	var far = 3000;

	var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);


	camera.position.y = -175;
	camera.position.z = 20;
	camera.lookAt(new THREE.Vector3(0,0,0));

	var f1 = gui.addFolder('camera position');
	f1.add(camera.position, 'x', -500, 500).listen();
	f1.add(camera.position, 'z', 1, 300);
	f1.open();

	var f2 = gui.addFolder('camera rotation');
	f2.add(camera.rotation, 'x', -Math.PI, Math.PI);
	f2.add(camera.rotation, 'y', -Math.PI, Math.PI);
	f2.add(camera.rotation, 'z', -Math.PI, Math.PI);
	f2.open();

	var scene = new THREE.Scene();
	scene.fog = new THREE.Fog( 0x000000, 1, far );

	var darkMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, transparent: true, opacity: 0.5 } );
	var polys = [];


	//Polygons

	var cube = THREE.SceneUtils.createMultiMaterialObject(
	new THREE.CubeGeometry(30, 30, 30),
	[darkMaterial, new THREE.MeshBasicMaterial( { color: 0xCF0505, wireframe: true, wireframeLinewidth: 3} )]
	);

	var tetra = THREE.SceneUtils.createMultiMaterialObject(
	new THREE.TetrahedronGeometry( 15, 0),
	[darkMaterial, new THREE.MeshBasicMaterial( { color: 0xF6790B, wireframe: true, wireframeLinewidth: 3} )]
	);

	var octa = THREE.SceneUtils.createMultiMaterialObject(
	new THREE.OctahedronGeometry( 10, 0),
	[darkMaterial, new THREE.MeshBasicMaterial( { color: 0x17C2EA, wireframe: true, wireframeLinewidth: 3} )]
	);

	var totalPolys = 100;

	for(var i = 0; i < totalPolys; i++){
	var poly;
	if(i < (totalPolys * 0.6)){
	poly = octa.clone();
	} else if(i >= totalPolys * 0.6 && i < totalPolys * 0.9){
	poly = tetra.clone();
	} else {
	poly = cube.clone();
	}
	poly.position.set(Math.random() * 1000 - 500, (Math.random() * 1500) + 1500, 20);
	poly.spinX = (Math.random() * 20 - 10) / 1000;
	poly.spinY = (Math.random() * 4 - 2) /100;
	poly.modX = (Math.random() * 3 - 2)/10;
	poly.modY = (Math.random() * 10 - 5)/10;
	polys.push(poly);
	scene.add( poly );
	}

	for(var i = 0; i < 10; i++){

	poly = THREE.SceneUtils.createMultiMaterialObject(
	new THREE.CylinderGeometry( 0, 30, 100, 20, 4 ),
	[darkMaterial, new THREE.MeshBasicMaterial( { color: 0xCDF346, wireframe: true, wireframeLinewidth: 3} )]
	);

	poly.position.set(Math.random() * 1000 - 500, (Math.random() * 1500) + 1500, 20);
	poly.rotation.x = Math.PI /2;

	poly.spinX = 0;
	poly.spinY = 0;
	poly.modX = 0;
	poly.modY = 0;

	polys.push(poly);
	scene.add( poly );

	}



	var planeSize = far * 2;
	var planeSegments = 60;

	var plane = new THREE.Mesh(
	new THREE.PlaneGeometry(planeSize/2, planeSize, planeSegments, planeSegments),
	new THREE.MeshBasicMaterial({ color:0x00FF00, wireframe:true, transparent:true })
	);
	plane.position.z = -20;

	var plane2 = plane.clone();
	plane2.position.y = plane.position.y + planeSize;

	scene.add(plane);
	scene.add(plane2);

	renderer.render(scene, camera);

	var paused = false;
	gui.add(this, 'paused');
	var speed = 4;

	gui.add(this, 'speed', 0, 50);

	var turnMod = 0;

	function animate(t) {

	renderer.clear();
	//camera.lookAt(scene.position);
	renderer.render(scene, camera);

	if (!paused) {

	for(var i = 0; i < polys.length; i++){
	var poly = polys[i];
	poly.rotation.x += poly.spinX;
	poly.rotation.y += poly.spinY;
	poly.position.x += poly.modX + turnMod;
	poly.position.y += - speed - poly.modY;

	if(poly.position.y < -200){
	polys[i].position.y = 1200;
	}

	}


	if(plane.position.y < - far * 1.5){
	plane.position.y = plane2.position.y + planeSize;
	}
	if(plane2.position.y < -far * 1.5){
	plane2.position.y = plane.position.y + planeSize;
	}

	if(cube.position.y < -far * 1.5){
	cube.position.y = far;
	}


	plane.position.y +=- speed ;
	plane2.position.y += - speed ;

	plane.position.x += turnMod;
	plane2.position.x += turnMod;

	}


	window.requestAnimationFrame(animate);
	}

	animate(new Date().getTime());



	window.onresize = start;
	window.onload = start;

	function start(event) {
	width = window.innerWidth;
	height = window.innerHeight;
	camera.aspect = width / height;
	camera.updateProjectionMatrix();
	renderer.setSize(width, height);
	renderer.clear();
	};