cube & perlin examples

canvas/examples/cube.ts

@@ -0,0 +1,112 @@
+import { Canvas } from "../mod.ts";
+
+const canvas = new Canvas({
+    title: "Cube",
+    width: 800,
+    height: 800,
+
+});
+const ctx = canvas.getContext("2d")
+ctx.fillStyle = "#fff";
+ctx.strokeStyle = "#fff";
+
+let theta = 0
+let thetaZ = theta * Math.PI / 180
+let thetaY = theta * Math.PI / 180
+let thetaX = theta * Math.PI / 180
+const d = 300
+const step = 200
+const steps = 1
+const matrix: [number, number, number][][][] = []
+
+for (let i = -step * steps / 2; i < step * steps; i += step) {
+    const column: [number, number, number][][] = []
+    for (let j = -step * steps / 2; j < step * steps; j += step) {
+        const row: [number, number, number][] = []
+        for (let k = -step * steps / 2; k < step * steps; k += step) {
+            row.push([i, j, k])
+        }
+        column.push(row)
+    }
+    matrix.push(column)
+}
+
+function Render() {
+    const matrix2 = []
+    for (const column of matrix) {
+        const column2 = []
+        for (const row of column) {
+            const row2 = []
+            for (const point of row) {
+                let x = point[0]
+                let y = point[1]
+                let z = point[2]
+                x = x * Math.cos(thetaX) - z * Math.sin(thetaX)
+                z = point[0] * Math.sin(thetaX) + z * Math.cos(thetaX)
+                y = y * Math.cos(thetaY) - z * Math.sin(thetaY)
+                z = point[1] * Math.sin(thetaY) + z * Math.cos(thetaY)
+                const x2 = x
+                x = x * Math.cos(thetaZ) - y * Math.sin(thetaZ)
+                y = x2 * Math.sin(thetaZ) + y * Math.cos(thetaZ)
+
+                ctx.beginPath();
+                ctx.arc(x + d, y + d, 5, 0, 2 * Math.PI);
+                ctx.fill();
+                row2.push([x + d, y + d])
+            }
+            column2.push(row2)
+        }
+        matrix2.push(column2)
+    }
+
+    for (let i = 0; i < matrix2.length; i++) {
+        for (let j = 0; j < matrix2[i].length; j++) {
+            for (let k = 0; k < matrix2[i][j].length; k++) {
+                const point = matrix2[i][j][k]
+                const point2 = matrix2[i][j][k + 1]
+                if (point2) {
+                    ctx.beginPath();
+                    ctx.moveTo(point[0], point[1]);
+                    ctx.lineTo(point2[0], point2[1]);
+                    ctx.stroke();
+                }
+            }
+            const point = matrix2[i][j]
+            const point2 = matrix2[i][j + 1]
+            if (point2) {
+                for (let k = 0; k < matrix2[i][j].length; k++) {
+                    ctx.beginPath();
+                    ctx.moveTo(point[k][0], point[k][1]);
+                    ctx.lineTo(point2[k][0], point2[k][1]);
+                    ctx.stroke();
+                }
+            }
+        }
+        const point = matrix2[i]
+        const point2 = matrix2[i + 1]
+        if (point2) {
+            for (let j = 0; j < matrix2[i].length; j++) {
+                for (let k = 0; k < matrix2[i][j].length; k++) {
+                    ctx.beginPath();
+                    ctx.moveTo(point[j][k][0], point[j][k][1]);
+                    ctx.lineTo(point2[j][k][0], point2[j][k][1]);
+                    ctx.stroke();
+                }
+            }
+        }
+    }
+}
+
+ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+setInterval(() => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height)
+    theta += 3
+    if (theta > 360) {
+        theta = 0
+    }
+    thetaY = theta * Math.PI / 180
+    thetaZ = theta * Math.PI / 180
+    thetaX = theta * Math.PI / 180
+    Render()
+}, 50)

canvas/examples/perlin.ts

@@ -0,0 +1,128 @@
+import { Canvas } from "../mod.ts";
+
+type Vector = {
+    x: number,
+    y: number
+}
+
+const canvas = new Canvas({
+    title: "Perlin",
+    width: 800,
+    height: 800,
+});
+const ctx = canvas.getContext("2d")
+
+const BATCH = 5
+const WRAP = 100
+const SIZE = 1
+const TOTAL = WRAP * BATCH
+
+function Shuffle(tab: number[]) {
+    for (let e = tab.length - 1; e > 0; e--) {
+        let index = Math.round(Math.random() * (e - 1)),
+            temp = tab[e];
+
+        tab[e] = tab[index];
+        tab[index] = temp;
+    }
+}
+
+function MakePermutation() {
+    let P = [];
+    for (let i = 0; i < 256; i++) {
+        P.push(i);
+    }
+    Shuffle(P);
+    for (let i = 0; i < 256; i++) {
+        P.push(P[i]);
+    }
+
+    return P;
+}
+let P = MakePermutation();
+
+function ConstantVector(v: number) {
+    return [
+        { x: 1, y: 1 },
+        { x: -1, y: 1 },
+        { x: -1, y: -1 },
+        { x: 1, y: -1 }
+    ][v & 3]
+}
+
+const matrix: number[][] = []
+for (let i = 0; i < TOTAL; i++) {
+    const col = []
+    for (let j = 0; j < TOTAL; j++) {
+        col.push(0);
+    }
+    matrix.push(col)
+}
+
+function Calculate() {
+    for (let i = 0; i < BATCH; i++) {
+        for (let j = 0; j < BATCH; j++) {
+            PerlinBatch(i, j)
+        }
+    }
+}
+
+function Draw() {
+    ctx.fillStyle = `rgb(0, 0, 0)`
+    ctx.fillRect(0, 0, 800, 800)
+    for (let i = 0; i < TOTAL; i++) {
+        for (let j = 0; j < TOTAL; j++) {
+            ctx.fillStyle = `rgba(255, 255, 255, ${matrix[i][j] + 0.5})`
+            ctx.fillRect(i * SIZE, j * SIZE, SIZE, SIZE)
+        }
+    }
+}
+
+function PerlinBatch(batchX: number, batchY: number,) {
+    const trv = ConstantVector(P[P[batchX + 1] + batchY + 1]);
+    const tlv = ConstantVector(P[P[batchX] + batchY + 1]);
+    const brv = ConstantVector(P[P[batchX + 1] + batchY]);
+    const blv = ConstantVector(P[P[batchX] + batchY]);
+
+    for (let x = 0; x < WRAP; x++) {
+        for (let y = 0; y < WRAP; y++) {
+            const currentX = x + batchX * WRAP;
+            const currentY = y + batchY * WRAP;
+            matrix[currentX][currentY] = Perlin(x / WRAP, y / WRAP, trv, tlv, brv, blv)
+        }
+    }
+};
+
+function Perlin(x: number, y: number, trv: Vector, tlv: Vector, brv: Vector, blv: Vector) {
+    const tr = { x: x - 1, y: y - 1 }
+    const tl = { x: x, y: y - 1 }
+    const br = { x: x - 1, y: y }
+    const bl = { x: x, y: y }
+
+    const trd = Dot(trv, tr)
+    const tld = Dot(tlv, tl)
+    const brd = Dot(brv, br)
+    const bld = Dot(blv, bl)
+
+    const u = Fade(x);
+    const v = Fade(y);
+
+    const left = Lerp(bld, tld, v)
+    const right = Lerp(brd, trd, v)
+    return Lerp(left, right, u)
+};
+
+function Dot(a: Vector, b: Vector) {
+    return a.x * b.x + a.y * b.y
+}
+
+function Lerp(a: number, b: number, x: number) {
+    return a + (b - a) * x
+}
+
+function Fade(t: number) {
+    return ((6 * t - 15) * t + 10) * t * t * t;
+}
+
+Calculate()
+Draw();