processing · lmccart · Sep 4, 2015 · Aug 10, 2015 · Aug 10, 2015 · Aug 10, 2015
diff --git a/examples/3d/topleft_origin/index.html → examples/3d/camera/ortho/index.html b/examples/3d/topleft_origin/index.html → examples/3d/camera/ortho/index.html
@@ -5,17 +5,17 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title></title>
   <link rel="stylesheet" href="">
-  <script language="javascript" type="text/javascript" src="../../../lib/p5.js"></script>
+  <script language="javascript" type="text/javascript" src="../../../../lib/p5.js"></script>
   <script language="javascript" type="text/javascript" src="sketch.js"></script>
   <style>
     html, body {margin:0; padding:0;}
   </style> 
 </head>
 <body>
-<p style="position: absolute; width:300px; left:50%; margin-left: -150px; text-align: center; color:green;">[0, 0, 0] is in the top left corner now</p>
+<p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:white; text-align: center;">Orthographic camera</p>
 <script>
 (function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;left:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='http://rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()
 </script>
 
 </body>
-</html>
+</html>
diff --git a/examples/3d/camera/ortho/sketch.js b/examples/3d/camera/ortho/sketch.js
@@ -0,0 +1,19 @@
+function setup(){
+  createCanvas(windowWidth, windowHeight, WEBGL);
+  ortho(-width/2, width/2, height/2, -height/2, 0.1, 100);
+}
+
+function draw(){
+  background(0);
+  rotateX(map(mouseY, 0, height, 0, TWO_PI));
+  rotateY(map(mouseX, 0, width, 0, TWO_PI));
+
+  for(var i = -5; i < 6; i++){
+    for(var j = -5; j < 6; j++){
+      push();
+      translate(i*100, 0, j*100);
+      box(20);
+      pop();
+    }
+  }
+}
diff --git a/examples/3d/texture/index.html → examples/3d/camera/perspective/index.html b/examples/3d/texture/index.html → examples/3d/camera/perspective/index.html
@@ -5,14 +5,14 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title></title>
   <link rel="stylesheet" href="">
-  <script language="javascript" type="text/javascript" src="../../../lib/p5.js"></script>
+  <script language="javascript" type="text/javascript" src="../../../../lib/p5.js"></script>
   <script language="javascript" type="text/javascript" src="sketch.js"></script>
   <style>
     html, body {margin:0; padding:0;}
   </style> 
 </head>
 <body>
-<p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:black;">Move Mouse To Rotate The Geometries</p>
+<p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:white; text-align: center;">Perspective camera</p>
 <script>
 (function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;left:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='http://rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()
 </script>

diff --git a/examples/3d/camera/perspective/sketch.js b/examples/3d/camera/perspective/sketch.js
@@ -0,0 +1,18 @@
+function setup(){
+  createCanvas(windowWidth, windowHeight, WEBGL);
+  perspective(60 / 180 * PI, width/height, 0.1, 100);
+}
+
+function draw(){
+  background(0);
+  rotateX(map(mouseY, 0, height, 0, TWO_PI));
+  rotateY(map(mouseX, 0, width, 0, TWO_PI));
+  for(var i = -5; i < 6; i++){
+    for(var j = -5; j < 6; j++){
+      push();
+      translate(i*100, 0, j*100);
+      sphere(20);
+      pop();
+    }
+  }
+}
diff --git a/examples/3d/center_origin/sketch.js b/examples/3d/center_origin/sketch.js
diff --git a/examples/3d/directional_light/sketch.js b/examples/3d/directional_light/sketch.js
diff --git a/examples/3d/geometry/index.html b/examples/3d/geometry/index.html
@@ -12,7 +12,7 @@
   </style> 
 </head>
 <body>
-<p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:black;">Move Mouse To Rotate The Geometries</p>
+<p style="width:1000px; margin:10px auto; text-align: center; color:black;">Move mouse to spin geometries</p>
 <script>
 (function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;left:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='http://rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()
 </script>

diff --git a/examples/3d/geometry/sketch.js b/examples/3d/geometry/sketch.js
@@ -1,54 +1,53 @@
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 var theta = 0;
 
 function draw(){
   background(255, 255, 255, 255);
-
-  translate(-width/2, 0, -800);
+  translate(-width/2, 0, 0);
   normalMaterial();
   push();
   rotateZ(theta * mouseX * 0.001);
   rotateX(theta * mouseX * 0.001);
   rotateY(theta * mouseX * 0.001);
-  plane(80, 80);
+  plane(50);
   pop();
   translate(250, 0, 0);
   push();
   rotateZ(theta * mouseX * 0.001);
   rotateX(theta * mouseX * 0.001);
   rotateY(theta * mouseX * 0.001);
-  box(80, 80, 80);
+  box(50, 50, 50);
   pop();
   translate(250, 0, 0);
   push();
   rotateZ(theta * mouseX * 0.001);
   rotateX(theta * mouseX * 0.001);
   rotateY(theta * mouseX * 0.001);
-  cylinder(80, 80);
+  cylinder(50, 50);
   pop();
   translate(250, 0, 0);
   push();
   rotateZ(theta * mouseX * 0.001);
   rotateX(theta * mouseX * 0.001);
   rotateY(theta * mouseX * 0.001);
-  cone(80, 80);
+  cone(50, 50);
   pop();
   translate(250, 0, 0);
   push();
   rotateZ(theta * mouseX * 0.001);
   rotateX(theta * mouseX * 0.001);
   rotateY(theta * mouseX * 0.001);
-  torus(80, 20);
+  torus(50, 10);
   pop();
   translate(250, 0, 0);
   push();
   rotateZ(theta * mouseX * 0.001);
   rotateX(theta * mouseX * 0.001);
   rotateY(theta * mouseX * 0.001);
-  sphere(80, 80);
+  sphere(50);
   pop();
   theta += 0.05;
 }
diff --git a/examples/3d/immediateMode/index.html b/examples/3d/immediateMode/index.html
@@ -12,6 +12,7 @@
   </style> 
 </head>
 <body>
+<p style="position: absolute; width:300px; left:50%; margin-left: -150px; text-align: center; color:black;">Drag mouse to toggle the world</p>
 <script>
 (function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;left:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='http://rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()
 </script>

diff --git a/examples/3d/immediateMode/sketch.js b/examples/3d/immediateMode/sketch.js
@@ -1,58 +1,42 @@
 var theta = 0;
 
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
 
   background('white');
   colorMode(HSB);
 
-  translate(0, 0, -1000);
+  orbitControl();
 
-  rotateY(frameCount * 0.01);
+  translate(0, -height/2, 0);
 
-  //point
-  stroke(0, 200, 200);
-  point(0, 0, 0);
-
-  //lines
-  translate(100, 0, 0);
+  for(var i = 0; i < 500; i+=100){
   push();
-  rotateX(frameCount * 0.01);
-  for(var i = 0 ; i < 12; i++){
-    var offset = i * PI / 6;
-    fill(i * 20, 100, 100);
-    line(0, 0, 0, 200 * sin(offset + frameCount*0.01), 200 * cos(offset + frameCount*0.01), 0);
-  }
-  pop();
+  fill(i * 0.1, 100, 100);
 
+  //line
+  translate(0, 100, 0);
+  line(-100, 0, i, 100, 0, i);
 
   //triangles
-  translate(400, 0, 0);
-  push();
-  for(var i = 0; i < 3; i++){
-  fill(i * 30 + 200, 100, 100);
-  translate(100, 50, 0);
+  translate(0, 100, 0);
   triangle(
-    100, 0, 0, 
-    60 * sin(frameCount * 0.1 + i), 0, 0, 
-    0, 100, 0);
-  }
-  pop();
+    0, sin( i + frameCount * 0.1) * 10, i, 
+    60, 60, i, 
+    -60, 60, i);
+
+  //quad
+  translate(0, 200, 0);
+  quad(
+    -100, 0, i,
+    100, 0, i,
+    -100, 100, i,
+    100, 100, i
+    );
 
-
-  //triangle strip
-  translate(200, 0, 0);
-  for(var i = 0; i < 30; i++){
-    fill(i * 10, 120, 120);
-    translate(100, -50, 0);
-    beginShape('TRIANGLE_STRIP')
-    vertex(0, 0, (cos(frameCount * 0.1 + i) + 1) * 100);
-    vertex(0, 200, 100);  
-    vertex(100, 100, 100);  
-    vertex(100, 0, (sin(frameCount * 0.1 + i) + 1) * 100);
-    endShape();
+  pop();
   }
 }
diff --git a/examples/3d/interaction/index.html b/examples/3d/interaction/index.html
@@ -12,7 +12,7 @@
   </style> 
 </head>
 <body>
-<p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:green; text-align: center;">Press Mouse To Toggle The World</p>
+<p style="position: absolute; width:300px; left:50%; margin-left: -150px; color:black; text-align: center;">Press mouse to toggle the world</p>
 <script>
 (function(){var script=document.createElement('script');script.onload=function(){var stats=new Stats();stats.domElement.style.cssText='position:fixed;left:0;top:0;z-index:10000';document.body.appendChild(stats.domElement);requestAnimationFrame(function loop(){stats.update();requestAnimationFrame(loop)});};script.src='http://rawgit.com/mrdoob/stats.js/master/build/stats.min.js';document.head.appendChild(script);})()
 </script>

diff --git a/examples/3d/interaction/sketch.js b/examples/3d/interaction/sketch.js
@@ -1,30 +1,22 @@
 function setup(){
-  createCanvas(windowWidth, windowHeight, 'webgl');
+  createCanvas(windowWidth, windowHeight, WEBGL);
 }
 
 function draw(){
-  background(250, 250, 250, 255);
+  background(250);
   var radius = width;
-  translate(0, 0, -1600);
-  orbitControl();
 
-  if(!mouseIsPressed){
-    rotateY(frameCount * 0.001);
-  }
+  orbitControl();
 
   normalMaterial();
+  translate(0, 0, -1000);
   for(var i = 0; i <= 20; i++){
     for(var j = 0; j <= 20; j++){
       push();
       var a = j/20 * PI;
       var b = i/20 * PI
-      translate(sin(2 * a) * radius * sin(b), cos(b) * radius / 2 , cos(2 * a) * radius * sin(b));
-      if(j % 2 === 0) {
-        box(60, 60, 60);
-      }
-      else{
-        cone(60, 60);
-      }
+      translate(sin(2 * a) * radius * sin(b), cos(b) * radius / 2 , cos(2 * a) * radius * sin(b));    
+      cone();
       pop();
     }
   }

diff --git a/examples/3d/directional_light/index.html → examples/3d/lights/ambientLight/index.html b/examples/3d/directional_light/index.html → examples/3d/lights/ambientLight/index.html
@@ -5,7 +5,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <title></title>
   <link rel="stylesheet" href="">
-  <script language="javascript" type="text/javascript" src="../../../lib/p5.js"></script>
+  <script language="javascript" type="text/javascript" src="../../../../lib/p5.js"></script>
   <script language="javascript" type="text/javascript" src="sketch.js"></script>
   <style>
     html, body {margin:0; padding:0;}