edited page titles, added examples and updated text to custom geometry tutorial

Author: aceslowman

i18n-tracking.yml

@@ -1,5 +1,6 @@
 es:
   src/data/en.yml:
+    line 368: '  getting-started-in-webgl-coords-and-transform-title'
     line 369: ''
     line 370: '  getting-started-in-webgl-title'
     line 374: '  getting-started-in-webgl-custom-geometry'
@@ -285,7 +286,6 @@ es:
     line 365: '  project-a-3-1-chung'
     line 366: '  project-a-3-2-chung'
     line 367: '  project-a-4-1-chung'
-    line 368: '  project-a-4-2-chung'
     line 380: '  project-a-2-2-casey-louise'
     line 381: '  project-a-3-1-casey-louise'
     line 382: '  project-a-3-2-casey-louise'
@@ -1905,8 +1905,10 @@ hi:
     line 377: '  getting-started-in-webgl-shaders-title'
     line 378: '  getting-started-in-webgl-shaders'
     line 379: ''
+    line 368: '  getting-started-in-webgl-coords-and-transform-title'
 ko:
   src/data/en.yml:
+    line 368: '  getting-started-in-webgl-coords-and-transform-title'
     line 369: ''
     line 370: '  getting-started-in-webgl-title'
     line 374: '  getting-started-in-webgl-custom-geometry'
@@ -2192,7 +2194,6 @@ ko:
     line 365: '  project-a-3-1-chung'
     line 366: '  project-a-3-2-chung'
     line 367: '  project-a-4-1-chung'
-    line 368: '  project-a-4-2-chung'
     line 380: '  project-a-2-2-casey-louise'
     line 381: '  project-a-3-1-casey-louise'
     line 382: '  project-a-3-2-casey-louise'
@@ -3746,6 +3747,7 @@ ko:
     line 84: '  copyright1'
 zh-Hans:
   src/data/en.yml:
+    line 368: '  getting-started-in-webgl-coords-and-transform-title'
     line 369: ''
     line 370: '  getting-started-in-webgl-title'
     line 374: '  getting-started-in-webgl-custom-geometry'
@@ -4030,7 +4032,6 @@ zh-Hans:
     line 365: '  project-a-3-1-chung'
     line 366: '  project-a-3-2-chung'
     line 367: '  project-a-4-1-chung'
-    line 368: '  project-a-4-2-chung'
     line 380: '  project-a-2-2-casey-louise'
     line 381: '  project-a-3-1-casey-louise'
     line 382: '  project-a-3-2-casey-louise'

src/data/en.yml

@@ -364,7 +364,7 @@ learn:
   beyond-the-canvas: Creating and manipulating elements on the page beyond the canvas.
 
   getting-started-in-webgl-title: Getting Started in WebGL
-  getting-started-in-webgl-coords-and-transform-title: Getting Started in 3D
+  getting-started-in-webgl-coords-and-transform-title: Coordinates and Transformations
   getting-started-in-webgl-coords-and-transform: Basics of 3D setup, coordinates, and transformations
   getting-started-in-webgl-custom-geometry-title: Creating Custom Geometry
   getting-started-in-webgl-custom-geometry: Creating custom geometry in WebGL

src/data/learn/learn.json

@@ -31,24 +31,6 @@
       "url": "https://github.com/processing/p5.js/wiki/p5.js,-node.js,-socket.io"
     }
   ],
-  "getting-started-in-webgl-title": [
-    {
-      "name": "getting-started-in-webgl-coords-and-transform",
-      "url": "getting-started-in-webgl-coords-and-transform.html"
-    },
-    {
-      "name": "getting-started-in-webgl-custom-geometry",
-      "url": "getting-started-in-webgl-custom-geometry.html"
-    },
-    {
-      "name": "getting-started-in-webgl-appearance",
-      "url": "getting-started-in-webgl-appearance.html"
-    },    
-    {
-      "name": "getting-started-in-webgl-shaders",
-      "url": "getting-started-in-webgl-shaders.html"
-    }
-  ],
   "programming-topics-title": [
     {
       "name": "beyond-the-canvas",
@@ -74,6 +56,24 @@
       "name": "program-flow",
       "url": "program-flow.html"
     }
+  ],
+    "getting-started-in-webgl-title": [
+    {
+      "name": "getting-started-in-webgl-coords-and-transform",
+      "url": "getting-started-in-webgl-coords-and-transform.html"
+    },
+    {
+      "name": "getting-started-in-webgl-custom-geometry",
+      "url": "getting-started-in-webgl-custom-geometry.html"
+    },
+    {
+      "name": "getting-started-in-webgl-appearance",
+      "url": "getting-started-in-webgl-appearance.html"
+    },    
+    {
+      "name": "getting-started-in-webgl-shaders",
+      "url": "getting-started-in-webgl-shaders.html"
+    }
   ],
   "becoming-a-better-programmer-title": [
     {

src/templates/pages/learn/getting-started-in-webgl-appearance.hbs

@@ -63,7 +63,7 @@ slug: learn/
 
       <p>The camera is an important piece to the 3D scene; it gives us the sense of space and dimension that we are
         often looking for in 3D. In p5.js, the WebGL mode provides us with a perspective camera by default, but we can
-        change this using <a class="code">perspective()</a> or <a class="code">ortho()</a>.</p>
+        change this using <a class="code" href="{{root}}/reference/#/p5/perspective">perspective()</a> or <a class="code" href="{{root}}/reference/#/p5/ortho">ortho()</a>.</p>
 
       <img style="padding:60px;" src='{{assets}}/learn/basic3D/images/cameraTypeIllustration.png'
         alt="an illustration showing the difference between perspective and orthographic camera types">
@@ -73,7 +73,7 @@ slug: learn/
         size as it gets further away and has no vanishing point. </p>
 
       <p>Constantly moving and adjusting the camera in code can be tedious, especially when you are experimenting with
-        ideas. p5.js has a special camera method, <a class="code">orbitControl()</a>, that can be used to zoom, pan,
+        ideas. p5.js has a special camera method, <a class="code" href="{{root}}/reference/#/p5/orbitControl">orbitControl()</a>, that can be used to zoom, pan,
         and position the camera using the mouse.</p>
 
       <ul>

src/templates/pages/learn/getting-started-in-webgl-coords-and-transform.hbs

@@ -43,7 +43,7 @@ slug: learn/
       <iframe src="{{assets}}/learn/basic3D/titleExample.html" width="720" height="350">
       </iframe>
 
-      <h1>Getting Started with 3D in p5.js</h1>
+      <h1>Coordinates and Transformations</h1>
 
       <p>p5.js is a powerful tool for creating 2D graphics but it's also capable of 3D graphics.
         Before we can get started in 3D there are some new concepts to learn and this document will introduce some ideas

src/templates/pages/learn/getting-started-in-webgl-custom-geometry.hbs

@@ -50,8 +50,9 @@ slug: learn/
         (like Blender) or from code. This tutorial will walk through how to import 3D models into p5.js, as well as how
         to create a basic geometry from scratch. </p>
 
-      <div class="additionalInformation">If you are new to 3D it's recommended that you check out the <a href="{{root}}/learn/getting-started-in-webgl-coords-and-transform.html">Getting Started
-        With 3D</a> tutorial before continuing with this tutorial. </div>
+      <div class="additionalInformation">If you are new to 3D it's recommended that you check out the <a
+          href="{{root}}/learn/getting-started-in-webgl-coords-and-transform.html">Getting Started
+          With 3D</a> tutorial before continuing with this tutorial. </div>
 
       <div class="toc">
         <h3>Table of Contents</h3>
@@ -73,7 +74,7 @@ slug: learn/
         loadModel() method includes a normalize parameter that will resize the model to something that works better in
         p5.js.</p>
 
-      Widget example of teapot model and loadModel
+      {{!-- Widget example of teapot model and loadModel --}}
       <script type="text/p5" data-autoplay data-p5-version="{{ version }}">
 var teapotModel;
 
@@ -102,8 +103,8 @@ function draw(){
         formed using your own set of rules. There are a number of methods that can be used to create 3D geometry in a
         way that is similar to 2D drawing in p5.js.</p>
 
-      Example using triangle and quad
-            {{!-- TODO push and pop example --}}
+
+      {{!-- Example using triangle and quad --}}
       <script type="text/p5" data-autoplay data-p5-version="{{ version }}">
       function setup() {
         createCanvas(windowWidth, windowHeight, WEBGL);
@@ -123,51 +124,95 @@ function draw(){
       }
       </script>
 
-      <p>There are also methods that offer greater control of the geometry</p>
+      <p>There are also methods that offer greater control of the geometry. A shape can be defined point-by-point using
+        <a class="code" href="{{root}}/reference/#/p5/beginShape">beginShape()</a>, <a class="code"
+          href="{{root}}/reference/#/p5/vertex">vertex()</a>, and <a class="code"
+          href="{{root}}/reference/#/p5/endShape">endShape()</a></p>
 
-      Example using beginShape and endShape
-            {{!-- TODO push and pop example --}}
+      {{!-- Example using beginShape and endShape --}}
       <script type="text/p5" data-autoplay data-p5-version="{{ version }}">
-      function setup() {
-        createCanvas(windowWidth, windowHeight, WEBGL);
-      }
-
-      function draw(){
-        background(255);
-        // 
-        push(); // detach our coordinate system
-        // draw a box 100 units to the right
-        translate(100,0,0);
-        box();
-        pop(); // return to our original coordinate system
+function setup() {
+  createCanvas(windowWidth, windowHeight, WEBGL);
+}
 
-        translate(-100,0,0);
-        box();    
-      }
+function draw(){
+  background(220);
+  
+  // click+drag on canvas to look around the shape
+  orbitControl();
+  
+  fill(255,0,0,128)
+    
+  var numVertices = 100;
+  translate(0,numVertices,0)
+  rotateY(millis()/1000)
+  scale(20)
+  beginShape();
+  // a simple spiral shape
+  for(let i = 0; i < numVertices; i++) {
+    vertex(
+      sin((i/numVertices*TWO_PI)*5)*sin(i/numVertices*PI)*2,
+      -i/10, 
+      cos((i/numVertices*TWO_PI)*5)*sin(i/numVertices*PI)*2,
+    );
+  }
+  endShape();
+}
       </script>
 
       <p>There is also a powerful class, p5.Geometry, which p5 uses internally for loadModel() but can also be used to
         define custom geometry, offering tools that can be helpful in calculating faces and normals. </p>
 
-      Example using p5.Geometry
-            {{!-- TODO push and pop example --}}
+
+      {{!-- Example using p5.Geometry --}}
       <script type="text/p5" data-autoplay data-p5-version="{{ version }}">
-      function setup() {
-        createCanvas(windowWidth, windowHeight, WEBGL);
+var myGeometry
+
+function setup() {
+  createCanvas(400, 400, WEBGL);
+  
+  // debugMode()
+  
+  let detailX = 20;
+  let detailY = 20;
+  myGeometry = new p5.Geometry(detailX,detailY, function() {
+    
+    // must be detailX + 1, detailY + 1
+    for(let x = 0; x <= detailX; x++) {
+      for(let y = 0; y <= detailY; y++) {
+        this.vertices.push(new p5.Vector(
+          x/detailX,
+          y/detailY,
+          (sin(x/detailX*TWO_PI*4) + cos(y/detailY*TWO_PI)) / 10
+          // random()/10
+        ))
       }
+    }
 
-      function draw(){
-        background(255);
-        // 
-        push(); // detach our coordinate system
-        // draw a box 100 units to the right
-        translate(100,0,0);
-        box();
-        pop(); // return to our original coordinate system
+    // this will attach all our vertices and create faces automatically
+    this.computeFaces()
+    // this will calculate the normals to help with lighting
+    this.computeNormals()
+  })
+}
 
-        translate(-100,0,0);
-        box();    
-      }
+function draw() {
+  background(220);
+  
+  orbitControl()
+  
+  //set a basic light
+  pointLight(255,255,0,0,50,-50)
+  
+  push();
+  stroke(128)
+  var geoSize = width/2
+  rotateY(cos(millis() / 1000)*PI/4)
+  translate(-geoSize/2,-geoSize/2)
+  scale(geoSize)
+  model(myGeometry)
+  pop()
+}
       </script>
 
       <h2 id="glossary">Glossary</h2>
@@ -194,7 +239,7 @@ function draw(){
         materials. </p>
 
       <h3>Normalization</h3>
-      <p>Taking something in changing its size so that it fits within a standard range.</p>
+      <p>Changing something so that it fits within a standard range.</p>
 
     </main>