studioijeoma/pjs_cube_pyramid_light_test

## pjs_cube_pyramid_light_test
<html>
	<head>
		<title>Cube vs Pyramid Lighting Test</title>
		<script type="text/javascript" src="http://processingjs.org/content/download/processing-js-1.3.0/processing-1.3.0.js"></script>
	</head>
	<body>
		<canvas id="pjsCanvas"></canvas>
		<script type="text/javascript">
			(function() {
				var canvas = document.getElementById('pjsCanvas');
				var pjs = new Processing(canvas);

				var rotateX = Math.PI / 4;
				var rotateY = Math.PI / 4;

				pjs.setup = function() {
					pjs.size(800, 600, pjs.P3D);
					pjs.loop();
				}

				pjs.draw = function() {
					this.background(255);
					this.lights();
					this.translate(this.width / 2, this.height / 2, 0);
					this.rotateX(rotateX);
					this.rotateY(rotateY);
					this.translate(-this.width / 2, -this.height / 2, 50);
					this.drawPyramid(this.width / 2, this.height / 2, 100, 100, 100);

					this.pushMatrix();
					this.translate(this.width / 2, this.height / 2, -50);
					this.box(100, 100, 100);
					this.popMatrix();
				}

				pjs.drawPyramid = function(_x, _y, _w, _h, _size) {
					this.fill(255, 0, 0);
					this.beginShape(this.TRIANGLES);
					// top
					this.vertex(_x, _y, 0);
					this.vertex(_x + _w, _y, 0);
					this.vertex(_x + _w / 2, _y + _h / 2, _size);
					// right
					this.vertex(_x + _w, _y, 0);
					this.vertex(_x + _w, _y + _h, 0);
					this.vertex(_x + _w / 2, _y + _h / 2, _size);
					// bottom
					this.vertex(_x, _y + _h, 0);
					this.vertex(_x + _w, _y + _h, 0);
					this.vertex(_x + _w / 2, _y + _h / 2, _size);
					// left
					this.vertex(_x, _y, 0);
					this.vertex(_x, _y + _h, 0);
					this.vertex(_x + _w / 2, _y + _h / 2, _size);
					this.endShape();
				}

				pjs.mouseDragged = function() {
					var rate = 0.01;
					rotateX += (pjs.pmouseY - pjs.mouseY) * rate;
					rotateY += (pjs.mouseX - pjs.pmouseX) * rate;
				}

				pjs.setup();
			})();

		</script>
	</body>
</html>
	<html>
	<head>
	<title>Cube vs Pyramid Lighting Test</title>
	<script type="text/javascript" src="http://processingjs.org/content/download/processing-js-1.3.0/processing-1.3.0.js"></script>
	</head>
	<body>
	<canvas id="pjsCanvas"></canvas>
	<script type="text/javascript">
	(function() {
	var canvas = document.getElementById('pjsCanvas');
	var pjs = new Processing(canvas);

	var rotateX = Math.PI / 4;
	var rotateY = Math.PI / 4;

	pjs.setup = function() {
	pjs.size(800, 600, pjs.P3D);
	pjs.loop();
	}

	pjs.draw = function() {
	this.background(255);
	this.lights();
	this.translate(this.width / 2, this.height / 2, 0);
	this.rotateX(rotateX);
	this.rotateY(rotateY);
	this.translate(-this.width / 2, -this.height / 2, 50);
	this.drawPyramid(this.width / 2, this.height / 2, 100, 100, 100);

	this.pushMatrix();
	this.translate(this.width / 2, this.height / 2, -50);
	this.box(100, 100, 100);
	this.popMatrix();
	}

	pjs.drawPyramid = function(_x, _y, _w, _h, _size) {
	this.fill(255, 0, 0);
	this.beginShape(this.TRIANGLES);
	// top
	this.vertex(_x, _y, 0);
	this.vertex(_x + _w, _y, 0);
	this.vertex(_x + _w / 2, _y + _h / 2, _size);
	// right
	this.vertex(_x + _w, _y, 0);
	this.vertex(_x + _w, _y + _h, 0);
	this.vertex(_x + _w / 2, _y + _h / 2, _size);
	// bottom
	this.vertex(_x, _y + _h, 0);
	this.vertex(_x + _w, _y + _h, 0);
	this.vertex(_x + _w / 2, _y + _h / 2, _size);
	// left
	this.vertex(_x, _y, 0);
	this.vertex(_x, _y + _h, 0);
	this.vertex(_x + _w / 2, _y + _h / 2, _size);
	this.endShape();
	}

	pjs.mouseDragged = function() {
	var rate = 0.01;
	rotateX += (pjs.pmouseY - pjs.mouseY) * rate;
	rotateY += (pjs.mouseX - pjs.pmouseX) * rate;
	}

	pjs.setup();
	})();

	</script>
	</body>
	</html>