diff --git a/index.html b/index.html index cb412f0..d221606 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - - + + diff --git a/index.js b/index.js index 77b3efa..ca4caf6 100644 --- a/index.js +++ b/index.js @@ -18,9 +18,9 @@ function point({x, y}) { ctx.fillRect(x - s/2, y - s/2, s, s) } -function line(p1, p2) { +function line(p1, p2, color) { ctx.lineWidth = 3; - ctx.strokeStyle = FOREGROUND + ctx.strokeStyle = color ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); @@ -36,6 +36,7 @@ function screen(p) { } function project({x, y, z}) { + z = Math.abs(z); return { x: x/z, y: y/z, @@ -49,6 +50,11 @@ function translate_z({x, y, z}, dz) { return {x, y, z: z + dz}; } +let colors = [] +for (let i = 0 ;i<100;i++){ + colors.push('#'+(Math.random()*0xFFFFFF<<0).toString(16)); +} + function rotate_xz({x, y, z}, angle) { const c = Math.cos(angle); const s = Math.sin(angle); @@ -61,21 +67,28 @@ function rotate_xz({x, y, z}, angle) { let dz = 1; let angle = 0; +let dz_d = -0.4; function frame() { const dt = 1/FPS; + dz += dz_d * dt; + if(dz < 0.1 || dz > 2.5){ + dz_d = -dz_d; + } // dz += 1*dt; - angle += Math.PI*dt; + angle += Math.PI/4*dt; clear() // for (const v of vs) { // point(screen(project(translate_z(rotate_xz(v, angle), dz)))) // } + let color_ind = 0; for (const f of fs) { for (let i = 0; i < f.length; ++i) { const a = vs[f[i]]; const b = vs[f[(i+1)%f.length]]; line(screen(project(translate_z(rotate_xz(a, angle), dz))), - screen(project(translate_z(rotate_xz(b, angle), dz)))) + screen(project(translate_z(rotate_xz(b, angle), dz))), colors[color_ind]) + color_ind = (color_ind + 1)%colors.length; } } setTimeout(frame, 1000/FPS);