updated and corrected text

Author: aceslowman

src/templates/pages/learn/getting-started-in-3d.hbs

@@ -46,7 +46,7 @@ slug: learn/
       <h1>Getting Started with 3D in p5.js</h1>
 
       <p>p5.js is a powerful tool for creating 2D graphics but it's also capable of 3D graphics.
-        There are some new concepts to learn before moving from 2D to 3D, this document will introduce some ideas
+        Before we can get started in 3D there are some new concepts to learn and this document will introduce some ideas
         that will be important to any 3D sketch.</p>
 
       <div class="toc">
@@ -98,8 +98,8 @@ slug: learn/
       <h2 id="coordinate_space">3D Coordinate Space: Positioning in 3D</h2>
 
       <div class="additionalInformation">
-        It might be helpful to revisit the tutorial titled
-        <a href="{{root}}/learn/coordinate-system-and-shapes.html">Coordinate System in Shapes</a>
+        If coordinates systems aren't making sense it might be helpful to revisit the tutorial titled
+        <a href="{{root}}/learn/coordinate-system-and-shapes.html">Coordinate System and Shapes</a>
       </div>
 
       <p>One of the most fundamental differences between working in 2D and working in 3D is the most obvious: there is
@@ -391,7 +391,7 @@ function draw(){
         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">orbitControl()</a>, that can be used to zoom, pan,
         and position the camera using the mouse.</p>
 
       <ul>
@@ -415,17 +415,35 @@ function draw(){
       <p>In p5 we have: </p>
 
       <ul>
-        <li><a class="code" href="{{root}}/reference/#/p5/ambientLight">ambientLight()</a></li>
-        <li><a class="code" href="{{root}}/reference/#/p5/directionalLight">directionalLight()</a></li>
-        <li><a class="code" href="{{root}}/reference/#/p5/pointLight">pointLight()</a></li>
-        <li><a class="code" href="{{root}}/reference/#/p5/spotLight">spotLight()</a></li>
-        <li><a class="code" href="{{root}}/reference/#/p5/noLights">noLights()</a></li>
+        <li><a class="code" href="{{root}}/reference/#/p5/ambientLight">ambientLight()</a>
+          <ul style="margin-left:15px;">
+            <li>Ambient light makes everything display a little brighter, with no consideration for light position or
+              direction.</li>
+          </ul>
+        </li>
+        <li><a class="code" href="{{root}}/reference/#/p5/directionalLight">directionalLight()</a>
+          <ul style="margin-left:15px;">
+            <li>A directional light shines from one direction, which can be especially useful for communicating depth in
+              a scene, or when a scene needs a 'sun' light. This method accepts a color and direction.</li>
+          </ul>
+        </li>
+        <li><a class="code" href="{{root}}/reference/#/p5/pointLight">pointLight()</a>
+          <ul style="margin-left:15px;">
+            <li>A point light emits from a single point in all directions, similar to something like a lightbulb. This method accepts a color and a position for the light.</li>
+          </ul>
+        </li>
+        <li><a class="code" href="{{root}}/reference/#/p5/spotLight">spotLight()</a>
+          <ul style="margin-left:15px;">
+            <li>A spot light emits from a single point in a single direction. This light is cast in a conical shape and it's radius and concentration can be adjusted.</li>
+          </ul>
+        </li>
+        <li><a class="code" href="{{root}}/reference/#/p5/noLights">noLights()</a>
+          <ul style="margin-left:15px;">
+            <li>noLights() makes it so that all subsequent geometry is rendered without any lighting. This can be useful when you want flat, unshaded geometry.</li>
+          </ul>
+        </li>
       </ul>
-
-      <p>Ambient light makes everything display a little brighter, with no consideration for light position or
-        direction. A directional light on the other hand can be moved and rotated to shine directly on a geometry. The
-        spot light is similar, but casts light evenly within a cone shape. Finally, noLights can be used to render a
-        geometry without lighting, which is useful for displaying textures or solid colors. </p>
+      <br />
 
       {{!-- sketch illustrating lighting of geometry --}}
       <iframe src="{{assets}}/learn/basic3D/lightingExample.html" width="720" height="350">
@@ -439,31 +457,27 @@ function draw(){
       <p>In p5 we have </p>
 
       <ul>
-
         <li><a class="code" href="{{root}}/reference/#/p5/normalMaterial">normalMaterial()</a></li>
         <li><a class="code" href="{{root}}/reference/#/p5/ambientMaterial">ambientMaterial()</a></li>
         <li><a class="code" href="{{root}}/reference/#/p5/emissiveMaterial">emissiveMaterial()</a></li>
         <li><a class="code" href="{{root}}/reference/#/p5/specularMaterial">specularMaterial()</a></li>
-
       </ul>
 
-      <p>You can even draw to another image and apply it as a texture to the object. </p>
-
-      <p>and more custom materials can be achieved through <a class="code">texture()</a> and shaders, which will be
-        discussed more at length
-        later. </p>
+      <p>More custom materials can be achieved through using <a class="code">texture()</a> and shaders. These are a bit
+        beyond the scope of this tutorial, so make sure to check out the <a
+          href="{{root}}/learn/introduction-to-shaders.html">Introduction to Shaders</a> page when you are ready. </p>
 
       {{!-- sketch illustrating materials --}}
-      <iframe src="{{assets}}/learn/basic3D/materialsExample.html" width="720" height="350">
-      </iframe>
+      {{!-- <iframe src="{{assets}}/learn/basic3D/materialsExample.html" width="720" height="350">
+      </iframe> --}}
 
       <h2 id="glossary">Glossary</h2>
 
-      <h3>World Space</h3>
+      {{!-- <h3>World Space</h3>
       <p>A coordinate space that is relative to the world origin (0,0,0)</p>
 
       <h3>Screen Space</h3>
-      <p>A coordinate space that is relative to the top left of the screen (0,0)</p>
+      <p>A coordinate space that is relative to the top left of the screen (0,0)</p> --}}
 
       <h3>Model</h3>
       <p>A custom 3D geometry that can be saved and loaded from a file</p>