updated and corrected text

Author: aceslowman

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

@@ -70,7 +70,7 @@ slug: learn/
       <p>Working in 3D introduces a lot of complexity, especially when a sketch involves motion, texture, lighting, and
         more.
 
-        Luckily for us computers have special hardware that is particularly
+        Luckily for us, computers have special hardware that is particularly
         well suited to performing those calculations, the graphics processing unit (GPU). The GPU is capable of
         processing many
         things simultaneously, which is especially important when we're dealing with pixels and many shapes in space.
@@ -193,60 +193,28 @@ slug: learn/
       ..
       </code></pre>
 
-      <div class="additionalInformation">
-        There's a lot more to rotation in 3d space. Check out this resource if you'd like to learn more about
-        transformation and rotation in 3D:
-        TODO: FIND LINK TO A RELIABLE RESOURCE
-      </div>
-
       <h3>scale(): Size in Space</h3>
 
       {{!-- sketch illustrating scaling of geometry --}}
       <iframe src="{{assets}}/learn/basic3D/scaleExample.html" width="720" height="350">
       </iframe>
 
       <p><a class="code" href="{{root}}/reference/#/p5/scale">scale()</a> changes the size of whatever is
-        drawn after it. </p>
+        drawn after it. Like the other methods described so far, it accepts arguments for x, y, and z values.</p>
 
       <h2 id="order">Order</h2>
 
       <p>Something that can feel unpredictable at first is the order of transformations. Each transformation can affect
-        the next one. For example if you call rotate(), followed by translate(), the direction of that translation will
-        be affected by the rotation. You can think of it as your entire coordinate system rotating and moving, not just
-        the object itself.</p>
-
-      <p>The order that you use will depend on what you’re trying to do, but a good place to start is to follow the
-        order of <strong>translate</strong>, <strong>rotate</strong>, and then <strong>scale</strong>. If you perform
-        these out of order you might find that your
-        transformations don’t act the way that you expect them to.
+        the next one. For example, if <a class="code">rotate()</a> is called, followed by <a class="code">translate()</a>, the direction of that translation will
+        be affected by the rotation. The entire coordinate system is rotating and moving, not just the shape itself. 
       </p>
 
+      <p>Transformations can be performed in any order, but using <strong>translate</strong>, <strong>rotate</strong>, and then <strong>scale</strong> will be the most intuitive.</p>
+
       <p>In the below example, try changing the order of <a class="code">translate()</a> and <a
           class="code">rotateY()</a> and see how it affects where the object is
         drawn.</p>
 
-      {{!--
-      <pre><code class="language-javascript">
-      ...
-      // 
-      translate(100,0,0);
-      rotateZ(QUARTER_PI);
-      scale(2);
-
-      box();
-      ...
-
-      ...
-      // 
-      rotateZ(QUARTER_PI);
-      translate(100,0,0);
-      
-      scale(2);
-
-      box();
-      ...
-      </code></pre> --}}
-
       <script type="text/p5" data-autoplay data-p5-version="{{ version }}">
 function setup() {
   createCanvas(150, 216, WEBGL);
@@ -269,10 +237,10 @@ function draw(){
       <p>Another tool we have in p5.js is <a class="code" href="{{root}}/reference/#/p5/push">push()</a> and <a
           class="code" href="{{root}}/reference/#/p5/pop">pop()</a>. <a class="code">push()</a> and <a
           class="code">pop()</a> makes it easier to move objects
-        individually. <a class="code">push()</a> saves and sets aside our
-        current transformations (and certain styling, like <a class="code">stroke()</a> or <a class="code">fill()</a>),
-        which allows you to perform other
-        transformations. <a class="code">pop()</a> restores those transformations. If you don’t use <a
+        individually. The <a class="code">push()</a> method saves and sets aside the
+        current transformations. The <a class="code">pop()</a> method restores those transformations. Whatever transformations that
+        are made between <a
+          class="code">push()</a> and <a class="code">pop()</a> will be isolated to that portion of the code. If you don’t use <a
           class="code">push()</a> and
         <a class="code">pop()</a>, you have to keep track of whatever transformations have already taken place, which
         can get complicated
@@ -323,7 +291,7 @@ function draw(){
         transformations affect the second object
         that is drawn. </p>
 
-      {{!-- TODO push and pop example --}}
+      {{!-- push and pop example --}}
       <script type="text/p5" data-autoplay data-p5-version="{{ version }}">
       function setup() {
         createCanvas(windowWidth, windowHeight, WEBGL);
@@ -343,7 +311,6 @@ function draw(){
       }
       </script>
 
-      {{!-- <h2>3D Primitives: Basic Shapes</h2> --}}
       <h2 id="basic_shapes">Basic Shapes in 3D</h2>
 
       <p>So far we have only been using <a class="code">box()</a> but p5.js has seven different predefined geometries
@@ -371,8 +338,6 @@ function draw(){
           Geometry tutorial</a>.
       </p>
 
-      {{!-- TODO create a separate tutorial and link to it from here --}}
-
       <h2 id="glossary">Glossary</h2>
 
       {{!-- <h3>World Space</h3>

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

@@ -45,14 +45,13 @@ slug: learn/
 
       <h1>Creating Custom Geometry in WebGL</h1>
 
-      <p>p5.js has a number of 3D primitives that can be used to create basic shapes, like box() or sphere(), but p5.js
+      <p>p5.js has a number of 3D primitives that can be used to create basic shapes, like <a class="code">box()</a> or <a class="code">sphere()</a>, but p5.js
         is also capable of rendering complex custom geometry, either from files that are created in other 3D software
         (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>
+          href="{{root}}/learn/getting-started-in-webgl-coords-and-transform.html">Coordinates and Transformations</a> tutorial before continuing with this tutorial. </div>
 
       <div class="toc">
         <h3>Table of Contents</h3>
@@ -67,11 +66,11 @@ slug: learn/
 
       <p>Custom geometry can be imported into p5.js using either OBJ or STL files. These files are usually generated in
         a 3D modeling tool like Blender, which offers much more control when constructing a 3D scene. This is done using
-        the loadModel method, which should be used within preload().</p>
+        the <a class="code" href="{{root}}/reference/#/p5/loadModel">loadModel()</a> method, which should be used within <a class="code">preload()</a>.</p>
 
       <p>A common issue that can come up with custom models is scaling. Depending on how the model is constructed, it
         might be a much different size when rendered in p5.js, or even be too small to be rendered at all. The
-        loadModel() method includes a normalize parameter that will resize the model to something that works better in
+        <a class="code">loadModel()</a> 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 --}}
@@ -95,33 +94,19 @@ function draw(){
       </script>
 
       <div class="additionalInformation">Note that there is currently no support for STL files with color, although you
-        can add color using materials or textures, which you can learn about in the (LINKED NAME OF MATERIAL TUTORIAL).
+        can add color using materials or textures, which you can learn about in the <a href="{{root}}/learn/getting-started-in-webgl-appearance.html">Styling and Appearance</a> tutorial.
       </div>
 
       <h2 id="proceduralGeometry">Creating Basic Procedural Geometry</h2>
+
       <p>Geometry can also be defined procedurally using code. This is a great way to create geometry that moves or is
         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 --}}
+      {{!-- PENDING WebGL quad / triangle bug fix --}}
       <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
-
-        translate(-100,0,0);
-        box();    
-      }
       </script>
 
       <p>There are also methods that offer greater control of the geometry. A shape can be defined point-by-point using
@@ -160,7 +145,7 @@ function draw(){
 }
       </script>
 
-      <p>There is also a powerful class, p5.Geometry, which p5 uses internally for loadModel() but can also be used to
+      <p>There is also a powerful class, p5.Geometry, which p5 uses internally for <a class="code">loadModel()</a> but can also be used to
         define custom geometry, offering tools that can be helpful in calculating faces and normals. </p>
 
 
@@ -170,9 +155,7 @@ var myGeometry
 
 function setup() {
   createCanvas(400, 400, WEBGL);
-  
-  // debugMode()
-  
+
   let detailX = 20;
   let detailY = 20;
   myGeometry = new p5.Geometry(detailX,detailY, function() {
@@ -201,7 +184,7 @@ function draw() {
   
   orbitControl()
   
-  //set a basic light
+  //set a basic light to see that normals are calculated
   pointLight(255,255,0,0,50,-50)
   
   push();