index.html

@@ -23,116 +23,80 @@
 <script type="module">
     import { Scene, THREE } from './scene.js';
 
-    let average = (inArray, inPointInd, ...inOthersInd) =>
+    let average = (inArray, inCenterInd, ...inPointsInd) =>
     {
-        let sum = [0, 0, 0];
+        let output = [0, 0, 0];
-        for(let i=0; i<inOthersInd.length; i++)
+        let centerInd = inCenterInd*3;
+
+        for(let i=0; i<inPointsInd.length; i++)
         {
-            let otherInd = inOthersInd[i]*3;
+            let pointInd = inPointsInd[i]*3;
-            sum[0] += inArray[otherInd+0];
+            output[0] += inArray[pointInd+0];
-            sum[1] += inArray[otherInd+1];
+            output[1] += inArray[pointInd+1];
-            sum[2] += inArray[otherInd+2];
+            output[2] += inArray[pointInd+2];
         }
         
-        let pointX = inPointInd*3 + 0;
+        let scalar = inPointsInd.length;
-        let pointY = inPointInd*3 + 1;
+        output[0] /= scalar;
-        let pointZ = inPointInd*3 + 2;
+        output[1] /= scalar;
-        let reducer = inOthersInd.length;
+        output[2] /= scalar;
-        let limit = (inCenter, inPoint) => 
+
+        let limit = (inPoint, inCenter) => 
         {
-            var limit;
+            let limit = inCenter-0.5;
-            limit = inCenter-0.49;
+            if(inPoint < limit)
-            if(inPoint <= limit)
             {
                 return limit;
             }
-            limit = inCenter + 0.49;
+            limit = inCenter+0.5;
-            if(inPoint >= limit)
+            if(inPoint > limit)
             {
                 return limit;
             }
-
             return inPoint;
         }
-        inArray[pointX] = limit(Math.round(inArray[pointX]), sum[0]/reducer);
+        output[0] = limit(output[0], inArray[centerInd+0]);
-        inArray[pointY] = limit(Math.round(inArray[pointY]), sum[1]/reducer);
+        output[1] = limit(output[1], inArray[centerInd+1]);
-        inArray[pointZ] = limit(Math.round(inArray[pointZ]), sum[2]/reducer);
+        output[2] = limit(output[2], inArray[centerInd+2]);
-    };
-    let smooth = (inArray, inTimes) =>
-    {
-        let count = inArray.length/3;
-        for(let t=0; t<inTimes; t++)
-        {
-            for(let i=0; i<count; i++)
-            {
-                if(i==0)
-                {
-                    average(inArray,  i, count-1, i+1);
-                }
-                else
-                {
-                    if(i==count-1)
-                    {
-                        average(inArray,  i, i-1, 0);
-                    }
-                    else
-                    {
-                        average(inArray,  i, i-1, i+1);
-                    }
-                }
-            }
-        }
-    }
 
-    /*
-    let testPoints =
-    [
-         0,  0,  0,
-         0,  1,  0,
-         1,  1,  0
-    ];
-    console.log(testPoints);
-    average(testPoints, 1, 0, 2);
-    console.log(testPoints);
-    */
-
-    let path = (inPoints, inSmoothing, inColor) =>
-    {
-        let clone = [...inPoints];
-        smooth(clone, inSmoothing);
-        const geometry = new THREE.BufferGeometry();
-        geometry.setAttribute('position', new THREE.Float32BufferAttribute( clone, 3 ));
-        const materialLine = new THREE.LineBasicMaterial( { color: inColor, linewidth: 3 } );
-        const materialPoint = new THREE.PointsMaterial( { color:inColor, size: 0.05 } );
-        const output = new THREE.Group();
-        
-        output.add( new THREE.Line( geometry, materialLine ) );
-        output.add( new THREE.Points( geometry, materialPoint ) );
         return output;
+    };
+    let smooth = (inArray) =>
+    {
+        let output = [inArray[0], inArray[1], inArray[2] ];
+        for(let i=1; i < (inArray.length/3)-1; i++)
+        {
+            output.push( ...average(inArray, i, i-1, i, i+1) );
+        }
+        output.push(inArray[inArray.length-3], inArray[inArray.length-2], inArray[inArray.length-1]);
+        return output;
+    }
+    let path = (inPoints, inColor) =>
+    {
+        const geometry = new THREE.BufferGeometry();
+        geometry.setAttribute('position', new THREE.Float32BufferAttribute( inPoints, 3 ));
+        const material = new THREE.LineBasicMaterial( { color: inColor, linewidth: 3 } );
+        return new THREE.Line( geometry, material );
     }
 
     const points =
     [
-         4,  0,  0,
-         3,  0,  0,
-         2,  0,  0,
-         1,  0,  0,
-        //
          0,  0,  0,
          0,  1,  0,
          1,  1,  0,
          2,  1,  0,
-         2,  2,  0,
+         2,  0,  0,
-         3,  2,  0,
+         3,  0,  0,
-         4,  2,  0,
+         4,  0,  0,
-         4,  3,  0,
+         4,  1,  0
-         //
-         5,  3,  0,
-         5,  2,  0,
-         5,  1,  0,
-         5,  0,  0,
     ];
 
+    console.log( smooth(points) );
+
+    let path0 = path(points, 0xFF0000);
+    let path1 = path(smooth(points), 0x009900);
+    let path2 = path(smooth(smooth(points)), 0x00AA00);
+    let path3 = path(smooth(smooth(smooth(points))), 0x00FF00);
 
 
     Scene(
@@ -140,8 +104,10 @@
         DOM:"canvas",
         Init(inScene)
         {
-            inScene.add(path(points, 0, 0xFF0000));
+            inScene.add( path0 );
-            inScene.add(path(points, 10, 0x00ff00));
+            inScene.add( path1 );
+            inScene.add( path2 );
+            inScene.add( path3 );
         },
         Update(scene, delta)
         {

scene.js

@@ -43,7 +43,7 @@ export function Scene(inSettings)
     };
     
     scene.add(light);
-    //scene.add(new T.GridHelper(10, 10));
+    scene.add(new T.GridHelper(10, 10));
     light.position.set(-1, 2, 4);
     camera.position.set(0, 0, 2);
     controls.update();