fixed bug with wrong length calculation; finished exercise 06

src/05/vector.ts

@@ -237,10 +237,11 @@ export default class Vector {
      * @returns this vector for easier function chaining
      */
     normalize(): Vector {
-        // TODO: Normalize this vector and return it
-        this.x = this.x/Math.sqrt(Math.pow(this.data[0],2)+Math.pow(this.data[1],2)+Math.pow(this.data[2],2));
-        this.y = this.y/Math.sqrt(Math.pow(this.data[0],2)+Math.pow(this.data[1],2)+Math.pow(this.data[2],2));
-        this.z = this.z/Math.sqrt(Math.pow(this.data[0],2)+Math.pow(this.data[1],2)+Math.pow(this.data[2],2));
+        // TODO: Normalize this vector and return it#
+        var length = Math.sqrt(Math.pow(this.data[0],2)+Math.pow(this.data[1],2)+Math.pow(this.data[2],2));
+        this.x = this.x/length;
+        this.y = this.y/length;
+        this.z = this.z/length;
         return this;
     }
 

src/06/phong.ts

@@ -31,5 +31,34 @@ export function phong(
     // TODO: point, and eye (camera) position.
     // TODO: Return complete phong emission using object color, ambient,
     // TODO: diffuse and specular terms.
-    return color;
+    
+    //ambient Lighting
+    var colorAmbient = color.mul(kA);
+
+    //diffuse Lighting
+    var colorDiffuse = new Vector(0,0,0,0);
+    for(let i = 0; i < lightPositions.length; i++) {
+        colorDiffuse = colorDiffuse.add(lightColor.mul(Math.max(0, intersection.normal.dot(lightPositions[i].sub(intersection.point).normalize()))));
+    }
+    colorDiffuse = colorDiffuse.mul(kD);
+
+    //specular Lighting
+    var colorSpecular = new Vector(0,0,0,0);
+    for(let i = 0; i < lightPositions.length; i++) {
+        
+        //reflektionsvektor
+        var l = lightPositions[i].sub(intersection.point).normalize();
+        var n = intersection.normal;
+        var reflection = n.mul(n.dot(l)*2).sub(l);
+
+        //spekulare berechnung
+        colorSpecular = 
+            colorSpecular.add(lightColor.mul(Math.pow(Math.max(0, 
+            reflection.dot(cameraPosition.sub(intersection.point).normalize())
+            ),shininess)));
+    }
+    colorSpecular = colorSpecular.mul(kS);
+
+    //result
+    return colorAmbient.add(colorDiffuse.add(colorSpecular));
 }

src/06/raytracing.ts

@@ -29,4 +29,23 @@ export function raytracePhong(data: Uint8ClampedArray,
     // TODO: Compute closest intersection with spheres in the scene.
     // TODO: Compute emission at point of intersection using phong model.
     // TODO: Set pixel color accordingly.
+    
+    var distance = Number.MAX_VALUE;
+    var light = Ray.makeRay(x, y, camera);
+    for(let i = 0; i < spheres.length; i++) {
+        let intersection = spheres[i].intersect(light);
+        if(intersection != null) {
+            if(distance > intersection.t) {
+                distance = intersection.t;
+                var posInArrayX = x * 4;
+                var posInArrayY = y * 4 * width;
+                var phongColor = phong(spheres[i].color, intersection, lightPositions, shininess, camera.origin);
+                data[0 + posInArrayX + posInArrayY] = phongColor.r*255;
+                data[1 + posInArrayX + posInArrayY] = phongColor.g*255;
+                data[2 + posInArrayX + posInArrayY] = phongColor.b*255;
+                data[3 + posInArrayX + posInArrayY] = 255;
+
+            }
+        }
+    }
 }

src/06/setup-phong.ts

@@ -41,11 +41,13 @@ window.addEventListener('load', () => {
                 raytracePhong(data, camera, spheres, lightPositions, shininess, x, y, canvas.width, canvas.height);
 
                 // update pixel in HTML context2d
-                for (let i = 0; i < 4; i ++)
+                /*for (let i = 0; i < 4; i ++)
                     pixel.data[i] = data[(x + y * canvas.width) * 4 + i];
                 ctx.putImageData(pixel, x, y);
+                */
             }
         }
+        ctx.putImageData(imageData, 0, 0);
     }
 
     const shininessElement =