diff --git a/cube.js b/cube.js
index cbc22a8..7899476 100644
--- a/cube.js
+++ b/cube.js
@@ -1,4 +1,14 @@
-const vs = [
+const vs1 = [
+ {x: 0.125, y: 0.125, z: 0.125},
+ {x: -0.125, y: 0.125, z: 0.125},
+ {x: -0.125, y: -0.125, z: 0.125},
+ {x: 0.125, y: -0.125, z: 0.125},
+
+ {x: 0.125, y: 0.125, z: -0.125},
+ {x: -0.125, y: 0.125, z: -0.125},
+ {x: -0.125, y: -0.125, z: -0.125},
+ {x: 0.125, y: -0.125, z: -0.125},
+
{x: 0.25, y: 0.25, z: 0.25},
{x: -0.25, y: 0.25, z: 0.25},
{x: -0.25, y: -0.25, z: 0.25},
@@ -8,13 +18,34 @@ const vs = [
{x: -0.25, y: 0.25, z: -0.25},
{x: -0.25, y: -0.25, z: -0.25},
{x: 0.25, y: -0.25, z: -0.25},
+
]
-const fs = [
+const fs1 = [
[0, 1, 2, 3],
[4, 5, 6, 7],
+
+ [8, 9, 10, 11],
+ [12, 13, 14, 15],
+
[0, 4],
[1, 5],
[2, 6],
[3, 7],
+
+ [8, 12],
+ [9, 13],
+ [10, 14],
+ [11, 15],
+
+ [0, 8],
+ [1, 9],
+ [2, 10],
+ [3, 11],
+
+ [4, 12],
+ [5, 13],
+ [6 ,14],
+ [7, 15]
+
]
diff --git a/imgs/multi_model_demo.mp4 b/imgs/multi_model_demo.mp4
new file mode 100644
index 0000000..127c0ed
Binary files /dev/null and b/imgs/multi_model_demo.mp4 differ
diff --git a/index.html b/index.html
index cb412f0..1d9ce62 100644
--- a/index.html
+++ b/index.html
@@ -1,4 +1,31 @@
-
-
-
+
+
+
+
+
+ 3d Animation
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/index.js b/index.js
index 77b3efa..db4f779 100644
--- a/index.js
+++ b/index.js
@@ -1,32 +1,41 @@
const BACKGROUND = "#101010"
const FOREGROUND = "#50FF50"
+const HEIGHT = 600
+const WIDTH = 600
console.log(game)
-game.width = 800
-game.height = 800
-const ctx = game.getContext("2d")
-console.log(ctx)
+game.width = WIDTH
+game.height = HEIGHT
+const game1_ctx = game.getContext("2d")
+console.log(game1_ctx)
-function clear() {
+console.log(game2)
+game2.width = WIDTH
+game2.height = HEIGHT
+const game2_ctx = game2.getContext("2d")
+console.log(game2_ctx)
+
+function clear(ctx) {
ctx.fillStyle = BACKGROUND
ctx.fillRect(0, 0, game.width, game.height)
}
-function point({x, y}) {
+function point({x, y}, ctx) {
const s = 20;
- ctx.fillStyle = FOREGROUND
ctx.fillRect(x - s/2, y - s/2, s, s)
+ ctx.fillStyle = FOREGROUND
}
-function line(p1, p2) {
- ctx.lineWidth = 3;
+function line(p1, p2, ctx) {
+ ctx.lineWidth = 3
ctx.strokeStyle = FOREGROUND
- ctx.beginPath();
- ctx.moveTo(p1.x, p1.y);
- ctx.lineTo(p2.x, p2.y);
+ ctx.beginPath();
+ ctx.moveTo(p1.x, p1.y)
+ ctx.lineTo(p2.x, p2.y)
ctx.stroke();
}
+
function screen(p) {
// -1..1 => 0..2 => 0..1 => 0..w
return {
@@ -42,8 +51,11 @@ function project({x, y, z}) {
}
}
-const FPS = 60;
+const FPS = 60
+let dz = 1;
+let angle = 0;
+document.getElementById("current-fps").innerHTML = "FPS: " + FPS
function translate_z({x, y, z}, dz) {
return {x, y, z: z + dz};
@@ -59,25 +71,39 @@ function rotate_xz({x, y, z}, angle) {
};
}
-let dz = 1;
-let angle = 0;
+function draw(fs, vs, ctx) {
+ for(const f of fs) {
+ for(let i=0;i