Update videoeditorsdk.html

videoeditorsdk.html

@@ -483,11 +483,11 @@ <h2 class="fw-bold">
                     Pointillistic Stripe Effect
                   </h2>
                   <div>
-                      <img src="videos/gardencat.JPG" alt="Garden Cat" width="30%" height="30%">
+                      <img src="videos/gardencat.JPG" alt="Garden Cat" width="25%" height="25%">
                             +
-                      <img src="videos/stripes.JPG" alt="Pointillistic" width="30%" height="30%">
+                      <img src="videos/stripes.JPG" alt="Pointillistic" width="25%" height="25%">
                            ->
-                      <img src="videos/VideoEditor.JPG" alt="Multiply Blend Node" width="30%" height="30%">
+                      <img src="videos/VideoEditor.JPG" alt="Multiply Blend Node" width="25%" height="25%">
                       </div>
 
                   <figure class="figure mb-7">
@@ -516,11 +516,11 @@ <h2 class="fw-bold">
                   Zoom Blur
                 </h2>
                 <div>
-                    <img src="videos/gardencat.JPG" alt="Garden Cat" width="30%" height="30%">
+                    <img src="videos/gardencat.JPG" alt="Garden Cat" width="25%" height="25%">
                           +
-                    <img src="videos/zoomblur.JPG" alt="Zoom Blur" width="30%" height="30%">
+                    <img src="videos/zoomblur.JPG" alt="Zoom Blur" width="25%" height="25%">
                          ->
-                    <img src="videos/SwipeTransition.JPG" alt="Swipe Transition" width="30%" height="30%">
+                    <img src="videos/SwipeTransition.JPG" alt="Swipe Transition" width="25%" height="25%">
                     </div>
 
                 <figure class="figure mb-7">
@@ -574,6 +574,93 @@ <h1 class="display-4">
                       </figcaption>
                 </figure>
 
+                <h2 class="fw-bold">
+                    Auto Chaining
+                </h2>
+                <p>Whenever a node is added to the Digital Compositing node-graph, it is assumed to be automatically taking the output of the previous node. For example, node 2 is assumed to be taking the output of node 1 for Comic Effect processing.<p>
+                <p>
+                <div style="border:1px solid gray">
+                   <pre style="overflow:auto; word-wrap:normal; white-space:pre;font-family: monospace;font-size:12px;margin-left:10px;margin-right:10px">
+
+1. Read Video
+2. Comic Effect (1)
+3. Zoom Blur    (2)
+                   </pre>
+                </div>
+
+
+                </p>
+
+                <p>
+                If the nodes are rearranged, for example, if Zoom Blur is shifted to occur before Comic Effect, the previous nodes in the node graph will be automatically reassigned.
+                </p>
+
+                <div style="border:1px solid gray">
+                   <pre style="overflow:auto; word-wrap:normal; white-space:pre;font-family: monospace;font-size:12px;margin-left:10px;margin-right:10px">
+
+1. Read Video
+2. Zoom Blur    (1)
+3. Comic Effect (2)
+                   </pre>
+                </div>
+
+                </p>
+
+                <p>
+                This auto-chaining behavior occurs automatically and replicates the behavior of existing digital compositing software of "adding a node to the node graph by first selecting an existing node".
+                </p>
+
+                <p>
+                Now, you may ask, what happens if you do not want to use the previous node as your input? Or what if, you need more than one input node such as a background or a mask?
+
+                </p>
+                <h2 class="fw-bold">
+                    Reverse Compositing
+                </h2>
+                <p>
+                The auto chaining, or automatic preceding node referencing, behavior can be altered by the user by changing the properties of a node. For example, node 4 (Color Correction) below can be modified to use node 1 as the input instead of the automatically assigned preceding node.
+                </p>
+
+                <div style="border:1px solid gray">
+                   <pre style="overflow:auto; word-wrap:normal; white-space:pre;font-family: monospace;font-size:12px;margin-left:10px;margin-right:10px">
+
+1. Read Video
+2. Premult          (1)
+
+3. Read Video
+4. Color Correction (3)
+5. Gaussian Blur    (4)
+6. Transform        (5)
+                   </pre>
+                </div>
+
+                <p>&nbsp;</p>
+                 <p>
+                 to
+                 </p>
+                 <div style="border:1px solid gray">
+                    <pre style="overflow:auto; word-wrap:normal; white-space:pre;font-family: monospace;font-size:12px;margin-left:10px;margin-right:10px">
+
+1. Read Video
+2. Premult          (1)
+
+3. Read Video
+4. Color Correction ("1")
+5. Gaussian Blur    (4)
+6. Transform        (5)
+                    </pre>
+                 </div>
+                 <p>&nbsp;</p>
+                 <p>
+                The double quotes, as shown above, or other mechanisms such as color coding, indicate an altered node on the pipeline.
+                </p>
+                <h2 class="fw-bold">
+                    Viewer Cycling
+                </h2>
+
+                <p>
+                We can 'long pressing' on the Yellow Socket of a node to temporarily display the output of each node.  We can also 'cycle' through and view the output of each node by "long pressing" on each of the nodes. This 'Viewer Cycling' through the nodes helps visualize and understand what is going on in each step of the node-graph.
+               </p>
                       <!--
                       <img class="figure-img img-fluid rounded lift lift-lg" src="images/whereismyapple.JPG" alt="AR Movie Maker" width="50%" height="50%">
                       <p>