first commit

lerppic.ts

@@ -0,0 +1,60 @@
+import { lerp2 } from './utils';
+
+export function makeRgbLerpPic(ctx: CanvasRenderingContext2D) {
+    const width = ctx.canvas.width;
+    const height = ctx.canvas.height;
+    const imageData = ctx.createImageData(width, height); 
+    const col1 = new Uint8ClampedArray([0xFF, 0x0, 0x0, 0xFF]);
+    const col2 = new Uint8ClampedArray([0x0, 0xFF, 0x0, 0xFF]);
+    const col3 = new Uint8ClampedArray([0x0, 0x0, 0xFF, 0xFF]);
+
+    for (let i = 0; i < imageData.data.length; i += 4) {
+        const pixel = i / 4;
+        const xcoord = pixel % width;
+        const xlerp = xcoord / width;
+        const ylerp = (pixel - xcoord) / width / height;
+        imageData.data[i] = lerp2(col1[0], col2[0], xlerp, col3[0], ylerp);
+        imageData.data[i + 1] = lerp2(col1[1], col2[1], xlerp, col3[1], ylerp);
+        imageData.data[i + 2] = lerp2(col1[2], col2[2], xlerp, col3[2], ylerp);
+        imageData.data[i + 3] = lerp2(col1[3], col2[3], xlerp, col3[3], ylerp);
+    }
+
+    ctx.putImageData(imageData, 0, 0);
+}
+
+const CUBE_POINTS = [
+     [ 1, -1, -5], 
+     [ 1, -1, -3], 
+     [ 1,  1, -5], 
+     [ 1,  1, -3], 
+     [-1, -1, -5], 
+     [-1, -1, -3], 
+     [-1,  1, -5], 
+     [-1,  1, -3],
+]; 
+
+function circle(ctx: CanvasRenderingContext2D, x: number, y: number) {
+    ctx.beginPath();
+    ctx.ellipse(x, y, 5, 5, 0, 0, 2*Math.PI);
+    ctx.closePath();
+    ctx.fill();
+}
+
+export function threeDimCube(ctx: CanvasRenderingContext2D) {
+    const width = ctx.canvas.width;
+    const height = ctx.canvas.height;
+    ctx.strokeStyle = "black";
+    ctx.fillStyle = "black";
+    ctx.lineWidth = 1;
+
+    for (let i = 0; i < 8; i++) {
+        const xProj = CUBE_POINTS[i][0] / -CUBE_POINTS[i][2];
+        const yProj = CUBE_POINTS[i][1] / -CUBE_POINTS[i][2];
+        const xProjRemap = (1 + xProj) / 2; 
+        const yProjRemap = (1 + yProj) / 2; 
+        const xProjPix = xProjRemap * width; 
+        const yProjPix = yProjRemap * height; 
+        circle(ctx, xProjPix, yProjPix);
+    }
+}
+