61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
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);
|
|
}
|
|
}
|
|
|