updated tutorials, examples, and generally polishing and cleaning up loose ends

Author: aceslowman

i18n-tracking.yml

@@ -12,7 +12,7 @@
       padding: 0;
       margin: 0;
       font-family: monospace;
-      font-size: 16px;
+      font-size: 14px;
       background-color: #dcdcdc
     }
 
@@ -27,7 +27,7 @@
       flex-direction: column;
       text-align: center;
       justify-content: space-evenly;
-      margin: 0px 10px;
+      margin: 0px 5px;
     }
 
     #controlsContainer {
@@ -36,7 +36,7 @@
     }
 
     #controlsContainer label {
-      padding: 15px;
+      padding: 10px;
     }
   </style>
 </head>
@@ -45,9 +45,13 @@
   <div id="pageContainer">
     <div id="sketchContainer"></div>
     <div id="controlsContainer">
-      <label>Ortho?:
-        <input id="cameraType" type="checkbox" />          
+      <label>Ortho:
+        <input id="cameraTypeOrtho" name="cameraType" type="radio" />          
       </label>
+      <label>Perspective:
+        <input id="cameraTypePerspective" name="cameraType" type="radio" checked/>          
+      </label>
+
       <label>camera fov: <input id="cameraFov" type="range" step="0.001" min="69" max="72.5" value="70"/></label>    
 
       <label>x position: <input id="cameraPosX" type="range" step="0.1" min="-500" max="500" value="200"/></label>    

src/assets/learn/basic3d/cameraExample.html

@@ -1,40 +1,53 @@
 let fovSlider;
 let camPosX, camPosY, camPosZ;
-let selectCameraType;
-let cameraType;
+let cameraTypeOrtho, cameraTypePerspective;
 let methodText;
 
 function setup() {
   let canvas = createCanvas(350, 350, WEBGL);
-  canvas.parent("sketchContainer")
+  canvas.parent('sketchContainer');
 
   debugMode();
-  
-  fovSlider = document.querySelector('#cameraFov')
-  selectCameraType = document.querySelector('#cameraType')
 
-  camPosX = document.querySelector('#cameraPosX')
-  camPosY = document.querySelector('#cameraPosY')
-  camPosZ = document.querySelector('#cameraPosZ')
+  fovSlider = document.querySelector('#cameraFov');
+  cameraTypeOrtho = document.querySelector('#cameraTypeOrtho');
+  cameraTypePerspective = document.querySelector('#cameraTypePerspective');
 
-  methodText = document.querySelector('#methodText')
+  camPosX = document.querySelector('#cameraPosX');
+  camPosY = document.querySelector('#cameraPosY');
+  camPosZ = document.querySelector('#cameraPosZ');
+
+  methodText = document.querySelector('#methodText');
+
+  describe(
+    'an interactive sketch that allows you to move either an ortho camera or a perspective camera in 3D, as well as change the perspective camera FOV'
+  );
 }
 
 function draw() {
   background(220);
-  
-  // orbitControl()
 
-  if(selectCameraType.checked) {
-    camera(camPosX.value,camPosY.value,camPosZ.value)
-    ortho(-width / 2, width / 2, -height / 2, height / 2, 0, 500);
-  } else {
-    camera(camPosX.value,camPosY.value,camPosZ.value)
-    perspective(fovSlider.value)
-  } 
+  if (cameraTypeOrtho.checked) {
+    camera(camPosX.value, camPosY.value, camPosZ.value);
+    ortho(-width / 2, width / 2, -height / 2, height / 2, 0, 800);
+  } else if (cameraTypePerspective.checked) {
+    camera(camPosX.value, camPosY.value, camPosZ.value);
+    perspective(fovSlider.value);
+  }
 
   box(50);
 
-  methodText.innerHTML = selectCameraType.checked ? 'ortho(); </br>' : 'perspective('+parseFloat(fovSlider.value).toFixed(1)+'); </br>'
-  methodText.innerHTML += '<br />camera('+parseFloat(camPosX.value).toFixed(1)+','+parseFloat(camPosY.value).toFixed(1)+','+parseFloat(camPosZ.value).toFixed(1)+');'
-}
+  methodText.innerHTML = cameraTypeOrtho.checked
+    ? 'ortho(); </br>'
+    : 'perspective(' + parseFloat(fovSlider.value).toFixed(1) + '); </br>';
+  methodText.innerHTML +=
+    '<br />camera(' +
+    parseFloat(camPosX.value).toFixed(1) +
+    ',' +
+    parseFloat(camPosY.value).toFixed(1) +
+    ',' +
+    parseFloat(camPosZ.value).toFixed(1) +
+    ');';
+
+  fovSlider.disabled = cameraTypeOrtho.checked;
+}

src/assets/learn/basic3d/cameraExample.js

@@ -14,6 +14,10 @@ function setup() {
   toggleDirectional = document.querySelector("#toggleDirectional");
   toggleSpotlight = document.querySelector("#toggleSpotlight");
   togglePoint = document.querySelector("#togglePoint");
+
+  describe(
+    'an interactive sketch that allows you to toggle on and off a number of different lights with indicators on a box shape.'
+  );
 }
 
 function draw() {

src/assets/learn/basic3d/lightingExample.js

@@ -50,19 +50,19 @@
       </label>
 
       <label style="color:black;">
-        normalMaterial: <input id="toggleNormalMaterial" type="checkbox" checked/>
+        normalMaterial: <input id="toggleNormalMaterial" name="materialSelect" type="radio" checked/>
       </label>
 
       <label style="color:red;">
-        ambientMaterial: <input id="toggleAmbientMaterial" type="checkbox"/>
+        ambientMaterial: <input id="toggleAmbientMaterial" name="materialSelect" type="radio"/>
       </label>
 
-      <label style="color:green;">
-        emissiveMaterial: <input id="toggleEmissiveMaterial" type="checkbox"/>
+      <label style="color:blue;">
+        emissiveMaterial: <input id="toggleEmissiveMaterial" name="materialSelect" type="radio"/>
       </label>
 
-      <label style="color:blue;">
-        specularMaterial: <input id="toggleSpecularMaterial" type="checkbox"/>
+      <label style="color:green;">
+        specularMaterial: <input id="toggleSpecularMaterial" name="materialSelect" type="radio"/>
       </label>
     </div>
   </div>

src/assets/learn/basic3d/materialsExample.html

@@ -7,16 +7,18 @@ toggleSpecularMaterial;
 
 function setup() {
   let canvas = createCanvas(350, 350, WEBGL);
-  canvas.parent("sketchContainer")
+  canvas.parent("sketchContainer");
 
   debugMode();
 
-  shapeType = document.querySelector('#shapeType')
+  shapeType = document.querySelector('#shapeType');
 
-  toggleNormalMaterial = document.querySelector('#toggleNormalMaterial')
-  toggleAmbientMaterial = document.querySelector('#toggleAmbientMaterial')
-  toggleEmissiveMaterial = document.querySelector('#toggleEmissiveMaterial')
-  toggleSpecularMaterial = document.querySelector('#toggleSpecularMaterial')
+  toggleNormalMaterial = document.querySelector('#toggleNormalMaterial');
+  toggleAmbientMaterial = document.querySelector('#toggleAmbientMaterial');
+  toggleEmissiveMaterial = document.querySelector('#toggleEmissiveMaterial');
+  toggleSpecularMaterial = document.querySelector('#toggleSpecularMaterial');
+
+  describe('an interactive example that allows you to toggle different materials on either a box or sphere shape');
 }
 
 function draw() {
@@ -25,29 +27,31 @@ function draw() {
 
   let locX = mouseX - width / 2;
   let locY = mouseY - height / 2;
-  pointLight(255, 255, 255, locX, locY, 50);
+  specularColor(255);
+  directionalLight(127, 127, 127, 1.0-locX, 1.0-locY, -1);
+  ambientLight(64);  
 
   if(toggleNormalMaterial.checked) {
     normalMaterial();
   }
 
   if(toggleAmbientMaterial.checked) {
-    ambientMaterial(255, 0, 0);
+    ambientMaterial(128, 0, 0);
   }
 
   if(toggleEmissiveMaterial.checked) {
-    emissiveMaterial(0, 255, 0);
+    emissiveMaterial(0, 0, 128);
   }
 
   if(toggleSpecularMaterial.checked) {
-    specularMaterial(0, 0, 255);
+    specularMaterial(0, 128, 0);
   }
 
   if(shapeType.checked) {
     sphere(50);
   } else {
     push();
-    rotateY(PI/4)
+    rotateY(PI/4);
     box(50);
     pop();
   }  
@@ -56,7 +60,7 @@ function draw() {
   push();
   translate(locX, locY, 50);
   scale(0.2);
-  noLights()
+  noLights();
   fill('blue');
   sphere();
   pop();

src/assets/learn/basic3d/materialsExample.js

@@ -4,11 +4,8 @@ let p;
 function setup() {
   let canvas = createCanvas(350, 350, WEBGL);
   canvas.parent("sketchContainer")
-  
   camera(0,-200,200,0,0,0)
 
-  //angleSlider = createSlider(0, PI * 2, 0, 0.001);
-
   // note these are all angle ranges:
   xAxisSlider = document.querySelector('#xAxis');
   yAxisSlider = document.querySelector('#yAxis');
@@ -17,36 +14,27 @@ function setup() {
   debugMode();
 
   p = document.querySelector('#axisText');
+
+  describe('an interactive example that visualizes different axes of rotation on a torus shape');
 }
 
 function draw() {
   background(220);
-  // orbitControl();
-
-  // let rotateVector = createVector(
-  //   xAxisSlider.value(),
-  //   yAxisSlider.value(),
-  //   zAxisSlider.value()
-  // );
-  
+
   push();
-  // rotateVector.normalize()
-  // rotate(angleSlider.value(), rotateVector);
-  
-  // added:
   rotateX(xAxisSlider.value);
   rotateY(yAxisSlider.value);
   rotateZ(zAxisSlider.value);
-  
-  // also added: draw lines along x, y, z axes in rotated space
+
+  // draw lines along x, y, z axes in rotated space
   strokeWeight(4);
   stroke('red');
   line(0, 0, 0, 100, 0, 0);
   stroke('green');
   line(0, 0, 0, 0, 100, 0);
   stroke('blue');
   line(0, 0, 0, 0, 0, 100);
-  
+
   normalMaterial();
   torus(30, 20);
   pop();
@@ -56,5 +44,5 @@ function draw() {
   p.innerHTML = 'angleMode(DEGREES) <br /><br />';
   p.innerHTML += 'rotateX('+parseFloat(degrees(xAxisSlider.value)).toFixed(1)+') <br />';
   p.innerHTML += 'rotateY('+parseFloat(degrees(yAxisSlider.value)).toFixed(1)+') <br />';
-  p.innerHTML += 'rotateZ('+parseFloat(degrees(zAxisSlider.value)).toFixed(1)+') <br />'
+  p.innerHTML += 'rotateZ('+parseFloat(degrees(zAxisSlider.value)).toFixed(1)+') <br />';
 }

src/assets/learn/basic3d/rotateExample.js

@@ -3,41 +3,43 @@ let p;
 
 function setup() {
   let canvas = createCanvas(350, 350, WEBGL);
-  canvas.parent("sketchContainer")
+  canvas.parent("sketchContainer");
 
   debugMode();
 
   xSlider = document.querySelector('#xAxis');
   ySlider = document.querySelector('#yAxis');
   zSlider = document.querySelector('#zAxis');
 
-  p = document.querySelector('#axisText')
+  p = document.querySelector('#axisText');
+
+  describe('an interactive example that visualizes how scale works on a box shape')
 }
 
 function draw() {
   background(220);
-  camera(0,-200,200,0,0,0)
+  camera(0,-200,200,0,0,0);
 
-  push()
-  scale(xSlider.value,ySlider.value,zSlider.value)
+  push();
+  scale(xSlider.value,ySlider.value,zSlider.value);
   box(50);
 
-  strokeWeight(5)
-  stroke(255,0,0)
-  line(-25,0,25, 25,0,25)
+  strokeWeight(5);
+  stroke(255,0,0);
+  line(-25,0,25, 25,0,25);
 
-  stroke(0,255,0)
-  line(0,-25,25, 0,25,25)
+  stroke(0,255,0);
+  line(0,-25,25, 0,25,25);
 
-  stroke(0,0,255)
-  line(0,-25,-25, 0,-25,25)
+  stroke(0,0,255);
+  line(0,-25,-25, 0,-25,25);
 
-  pop()
+  pop();
 
   // draw axes
-  push()
+  push();
 
-  pop()
+  pop();
 
   p.innerHTML = 'scale('+parseFloat(xSlider.value).toFixed(2)+', '+parseFloat(ySlider.value).toFixed(2)+', '+parseFloat(zSlider.value).toFixed(2)+')';
 }

src/assets/learn/basic3d/scaleExample.js

@@ -63,6 +63,5 @@ function draw() {
 }
 
 function windowResized() {
-  resizeCanvas(windowWidth, windowHeight)
-  console.log('check')
+  resizeCanvas(windowWidth, windowHeight);
 }