updated appearance tutorial and examples, including a new simple texture example

Author: aceslowman

src/assets/learn/basic3d/images/simpleTexture.png

@@ -66,17 +66,21 @@ slug: learn/
 
       <p>The camera is an essential piece of a 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" href="{{root}}/reference/#/p5/perspective">perspective()</a> or <a class="code" href="{{root}}/reference/#/p5/ortho">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">
 
-      <p>A <em>perspective camera</em> skews objects so they appear to get smaller as they get further away, vanishing at a
-        single point in the distance. This is in contrast to an <em>orthographic camera</em>, where the geometry stays the same
+      <p>A <em>perspective camera</em> skews objects so they appear to get smaller as they get further away, vanishing
+        at a
+        single point in the distance. This is in contrast to an <em>orthographic camera</em>, where the geometry stays
+        the same
         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" href="{{root}}/reference/#/p5/orbitControl">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>
 
       <p>The following camera methods are available in p5.js:</p>
@@ -90,10 +94,11 @@ slug: learn/
             sensitivityZ)</a></li>
       </ul>
 
-      <p>        
-        A scene can have multiple cameras, but only one camera can be active at a time. Sketches in p5.js will default 
-        to having a single perspective camera, but that can be changed by calling either <a class="code">perspective()</a> 
-        (with new parameters) or <a class="code">ortho()</a>. <a class="code">camera()</a> can be used to change the 
+      <p>
+        A scene can have multiple cameras, but only one camera can be active at a time. Sketches in p5.js will default
+        to having a single perspective camera, but that can be changed by calling either <a
+          class="code">perspective()</a>
+        (with new parameters) or <a class="code">ortho()</a>. <a class="code">camera()</a> can be used to change the
         position of the active camera and the position that the camera is looking at.
       </p>
 
@@ -170,23 +175,27 @@ function draw() {
         </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>
+            <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>
+            <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>
+            <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>
-        These lights should be used within <a class="code">draw()</a>. Up to 5 lights can be used in a scene simultaneously, 
+        These lights should be used within <a class="code">draw()</a>. Up to 5 lights can be used in a scene
+        simultaneously,
         allowing you to compose a scene with varied and complex lighting sources.
       </p>
 
@@ -241,8 +250,9 @@ function draw() {
 
       <h2 id="materials">Materials and Textures</h2>
       <p>3D is not all about geometry, objects can appear differently based on their material. Materials dictate how
-        light interacts with the geometry and how color (or texture) gets applied to the object. Materials can be really
-        flexible and each can have unique properties. </p>
+        light interacts with the geometry and how color (or texture) gets applied to the object. Materials can be
+        varied,
+        making objects shiny, rough, or even textured with images. </p>
 
       <p>In p5 we have </p>
 
@@ -253,9 +263,85 @@ function draw() {
         <li><a class="code" href="{{root}}/reference/#/p5/specularMaterial">specularMaterial()</a></li>
       </ul>
 
-      <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>
+      <p>Try commenting and uncommenting the different lights in this example:</p>
+
+      {{!-- material example --}}
+      <script type="text/p5" data-autoplay data-p5-version="{{ version }}">
+function setup() {
+  createCanvas(innerWidth, innerHeight, WEBGL);
+  debugMode();
+}
+
+function draw() {
+  background(220);
+  camera(200, -200, 200);
+
+  ambientLight(128)
+  let locX = mouseX - width / 2;
+  let locY = mouseY - height / 2;
+  pointLight(255, 255, 255, locX, locY, 100);
+
+  // normalMaterial();
+
+  // ambient materials reflect under any light
+  ambientMaterial(255, 0, 0);
+
+  // emissive materials show the same color regardless of light
+  // emissiveMaterial(0, 255, 0);
+
+  // specular materials reflect the color of the light source 
+  // and can vary in 'shininess'
+  // shininess(10)
+  // specularMaterial(0, 0, 255);
+
+  // box(50);
+  sphere();
+}
+      </script>
+
+      <p>More custom materials can be achieved through using <a class="code">texture()</a>. In short, these are images
+        that can be mapped onto the surface of a geometry. These textures can be imported from an image and can even be
+        generated within code using shaders. To map a texture to your geometry, use <a class="code">loadImage()</a> 
+        within <a class="code">preload()</a>, then call <a class="code">texture()</a> before drawing your shape.
+      </p>
+
+      {{!-- texture example --}}
+      <script type="text/p5" data-autoplay data-p5-version="{{ version }}">
+let myTexture;
+
+function preload() {
+  myTexture = loadImage("{{assets}}/learn/basic3D/images/simpleTexture.png")
+  // map textures between 0 and 1 to match geometry uvs
+  textureMode(NORMAL)
+}
+
+function setup() {
+  createCanvas(innerWidth, innerHeight, WEBGL);
+}
+
+function draw() {
+  background(220);
+  
+  // apply the texture to the box
+  texture(myTexture)
+  
+  push()
+  rotateX(millis()/1000)
+  rotateY(millis()/700)
+  box()
+  pop()
+}
+      </script>
+
+
+      <div class="additionalInformation">
+        <p> 
+          While they are useful for changing the appearance of your geometry, shaders 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>
+      </div>
+
 
       {{!-- sketch illustrating materials --}}
       {{!-- <iframe src="{{assets}}/learn/basic3D/materialsExample.html" width="720" height="350">
@@ -267,10 +353,11 @@ function draw() {
       <p>The viewpoint of a 3D scene</p>
 
       <h3>Perspective</h3>
-      <p></p>
+      <p>A projection that gives the appearance of depth, achieved by making objects in the distance appear smaller.</p>
 
       <h3>Orthographic</h3>
-      <p></p>
+      <p>A projection that is <em>orthogonal</em> and unaffected by depth. It gives the appearance of being
+        two-dimensional. </p>
 
     </main>