a lot of stuff

_posts/2023-10-12-Cutscene1.md → _posts/2023-10-12-ShadingTest.md

@@ -1,8 +1,8 @@
 ---
 comments: False
 layout: post
-title: Cut Scene 1
-description: First Cut scene
+title: Shading
+description: Testing out how to shade a screen
 type: hacks
 courses: {'compsci': {'week': 6}}
 categories: ['C4.1']
@@ -22,6 +22,10 @@ import Object from "/Group/myScripts/GameScripts/CreateObject.js";
 
 //define canvas
 var canvas = document.getElementById("display");
+var hiddenCanvas = document.createElement("canvas");
+hiddenCanvas.setAttribute("width","500px");
+hiddenCanvas.setAttribute("height","500px");
+hiddenCanvas.setAttribute("willReadFrequently",true);
 
 //bind inputs to a controller
 var myCharacter = new Character();
@@ -36,15 +40,18 @@ document.addEventListener("keyup",myCharacter.handleKeyup.bind(myCharacter));
 
     //backgrounds
         //apartment background
-
+        var redPixelSprite = new Image();
+        redPixelSprite.src = "/Group/images/Game/redPixel.png"
+        var whitePixelSprite = new Image();
+        whitePixelSprite.src = "/Group/images/Game/whitePixel.png"
         //hallway
 
         //
 
     //lighting
     var lightingSprite = new Image();
-    lightingSprite.src = "/Group/images/Game/Shading.png";
-    var lightObject = new Object(lightingSprite,[500,500],[500,500],[0,600],1,1);
+    lightingSprite.src = "/Group/images/Game/shadingV2.png";
+    var lightObject = new Object(lightingSprite,[500,500],[500,500],[0,0],1,1);
 
     //neighbor
 
@@ -53,9 +60,6 @@ document.addEventListener("keyup",myCharacter.handleKeyup.bind(myCharacter));
     //text
 
 
-
-
-
 var fps = 24;
 var active = true;
 var animId;
@@ -65,11 +69,11 @@ function frame(){ //when a frame is updated
     currentFrame = (currentFrame+1)%fps;
     if (currentFrame == 0){sec+=1}
 
-    var pos = myCharacter.onFrame(fps); //update frame, and get position
-    pos = [pos.x,500-pos.y] //fix position
-    myCharacterObject.OverridePosition(pos); //update objects
+    //var pos = myCharacter.onFrame(fps); //update frame, and get position
+    //pos = [pos.x,500-pos.y] //fix position
+    //myCharacterObject.OverridePosition(pos); //update objects
 
-    var scale = lightObject.ReturnScale();
+    //var scale = lightObject.ReturnScale();
     //lightObject.OverridePosition([pos[0]+scale[0]/2,pos[1]+scale[1]/2])
     //lightObject.OverridePosition([pos[0]-scale[0]/2+100,pos[1]+scale[1]/2-100])
 
@@ -81,14 +85,46 @@ function frame(){ //when a frame is updated
     //draw frame
     var ctx = canvas.getContext("2d");
     ctx.clearRect(0,0,500,500);
-    myCharacterObject.draw(ctx,[0,0]);
-    lightObject.draw(ctx,[0,0]); 
+
+    myCharacterObject.draw(ctx,[0,0],20);
+
+    //shadows
+    light([[-150,500],[250,500]],hiddenCanvas)
+    //var imgData = ctxH.getImageData(0,0,canvas.width,canvas.height);
+    //var pixels = imgData.data;
+    //for (let i=3;i<pixels.length;i+=4){
+    //    pixels[i] = 255-pixels[i];
+    //}
+    //ctxH.clearRect(0,0,500,500);
+    //ctxH.putImageData(imgData,0,0);
 
+    ctx.drawImage(hiddenCanvas,0,0);
 
-    // run function again
+    //run function again
     setTimeout(function() {if(active==true){animId = requestAnimationFrame(frame)};}, 1000 / fps);
 }
 
+function light(sourceLocations,canvas){
+    var oldData;
+    var ctx = canvas.getContext("2d")
+    ctx.clearRect(0,0,500,500)
+    lightObject.draw(ctx,sourceLocations[0])
+    for (let i=1;i<sourceLocations.length;i++){
+
+        oldData = ctx.getImageData(0,0,500,500);
+
+        lightObject.draw(ctx,sourceLocations[i]);
+        var newData = ctx.getImageData(0,0,500,500);
+
+        for (let i2=3;i2<newData.length;i2++){
+            console.log("hi")
+            newData.data[i2]=(newData.data[i]<oldData.data[i])?newData.data[i]:oldData.data[i];
+        }
+        ctx.putImageData(newData,0,0)
+
+    }
+}
+
 
 //canvas.addEventListener("mousemove", function(e){
 //    var scale = lightObject.ReturnScale();

myScripts/GameScripts/CreateObject.js

@@ -38,19 +38,18 @@ class CreateObject{
         var s1 = this.state;
         var x = this.position[0]+scroll[0];
         var y = this.position[1]+scroll[1];
-        var a = (rotation * Math.PI)/180
-        //drawing function
+        var a = ((rotation) * Math.PI)/180; //convert to rad
 
         //rotate object
-        ctx.translate(this.image.width/2,this.image.height/2);
+        ctx.translate(x,y);
         ctx.rotate(a);
-        ctx.translate(-this.image.width/2,-this.image.height/2)
 
-        console.log(x,y)
         //draw
-        ctx.drawImage(this.image,this.frame*this.SpriteSize[0],s1*this.SpriteSize[1],this.SpriteSize[0],this.SpriteSize[1],x,y,this.scale[0],-1*this.scale[1]);
-
-        ctx.setTransform(1, 0, 0, 1, 0, 0); //something something reset matrix
+        ctx.drawImage(this.image,this.frame*this.SpriteSize[0],s1*this.SpriteSize[1],this.SpriteSize[0],this.SpriteSize[1],0,0,this.scale[0],-1*this.scale[1]);
+
+        //undo rotations for next objects
+        ctx.translate(-x,-y);
+        ctx.rotate(-a);
     }
 }
 export default CreateObject;