From 906eeeb5e11b7486d534dc7e4011e01bf05d7094 Mon Sep 17 00:00:00 2001 From: Sam <34695753+SamEyeBam@users.noreply.github.com> Date: Mon, 3 Jan 2022 10:00:37 +1300 Subject: [PATCH] initial commit --- animate 0.2/animate 0.1/animation.html | 521 +++++++++++++++++++++++++ animate 0.2/css/styles.css | 13 + animate 0.2/index.html | 17 + animate 0.2/js/index.js | 141 +++++++ animate 0.2/js/math.js | 81 ++++ animate 0.2/js/objects.js | 460 ++++++++++++++++++++++ 6 files changed, 1233 insertions(+) create mode 100644 animate 0.2/animate 0.1/animation.html create mode 100644 animate 0.2/css/styles.css create mode 100644 animate 0.2/index.html create mode 100644 animate 0.2/js/index.js create mode 100644 animate 0.2/js/math.js create mode 100644 animate 0.2/js/objects.js diff --git a/animate 0.2/animate 0.1/animation.html b/animate 0.2/animate 0.1/animation.html new file mode 100644 index 0000000..268acab --- /dev/null +++ b/animate 0.2/animate 0.1/animation.html @@ -0,0 +1,521 @@ + + + + + + + Your browser does not support the HTML5 canvas tag. + + + + + \ No newline at end of file diff --git a/animate 0.2/css/styles.css b/animate 0.2/css/styles.css new file mode 100644 index 0000000..a91e757 --- /dev/null +++ b/animate 0.2/css/styles.css @@ -0,0 +1,13 @@ +body { + height: 100vh; + min-height: 100vh; + margin: 0; +} + + +#mainCanvas { + width: 100%; + height: 100%; + min-height: 100vh; + background-color: black; +} \ No newline at end of file diff --git a/animate 0.2/index.html b/animate 0.2/index.html new file mode 100644 index 0000000..f5ef239 --- /dev/null +++ b/animate 0.2/index.html @@ -0,0 +1,17 @@ + + + + + + + Document + + + + + + + + + + \ No newline at end of file diff --git a/animate 0.2/js/index.js b/animate 0.2/js/index.js new file mode 100644 index 0000000..3b6bbd9 --- /dev/null +++ b/animate 0.2/js/index.js @@ -0,0 +1,141 @@ +//jshint esversion:8 +i = 0; +const canvas = document.getElementById("mainCanvas"); +canvas.width = canvas.clientWidth; +canvas.height = canvas.clientHeight; +var ctx = canvas.getContext("2d"); +centerX = canvas.width / 2; +centerY = canvas.height / 2; +let DEBUGTools = new DebugTools(ctx, centerX, centerY); +let testPoly = new RandomPolygon(ctx, 300, centerX, centerY, 6, "crimson"); +let testSquare = new Square( + ctx, + 500, + centerX, + centerY, + 0, + 0, + 0, + 0, + "blueViolet", + false +); +let testCube = new Cube( + ctx, + 500, + centerX, + centerY, + 0, + 0, + 0, + 0, + "blueViolet", + false +); +let testTet = new Tetrahedron( + ctx, + 300, + centerX, + centerY, + 0, + 0, + 0, + 0, + "blueViolet", + false +); + +let tetArray = []; +// for (let i = 0; i < 100; i++) { +// tetArray.push( +// new Tetrahedron( +// ctx, +// 300 - i * (300/100), +// centerX, +// centerY + 140, +// 0, +// 45, +// 0, +// 35.264, +// "rgb(" + (255 - i * (255/100)) + ", 0, 0)", +// false +// ) +// ); +// } + +// testTet.rotateSetOrg(60,0,35.264); +// testTet.rotateAddY(15); +// testTet.rotateAddX(15); +// testCube.rotateSetOrg(45,0,35.264); +// testTet.globalY +=140; +// testTet.rotateAddY(15); + +tetArray.push( + new Tetrahedron( + ctx, + 200, + centerX, + centerY, + 0, + 0, + 0, + 0, + "rgb(255, 0, 0)", + false + ) +); +tetArray.push( + new Tetrahedron( + ctx, + 115, + centerX, + centerY, + 0, + 0, + 0, + 0, + "rgb(200, 0, 0)", + false + ) +); + +let drawStack = []; +// drawStack.push(testTet); +drawStack.push(...tetArray); + +// drawStack[0].rotateAddY(30); +drawStack[1].rotateAddY(45); +drawStack[1].rotateAddX(35.264); +drawStack[1].rotateAddZ(30); +drawStack[0].rotateAddY(45); +drawStack[0].rotateAddX(35.264); +function main() { + setTimeout(() => { + main(); + ctx.clearRect(0, 0, canvas.width, canvas.height); + // drawStack[1].rotateAddX(1); + // drawStack[1].rotateAddY(1); + // drawStack[1].rotateAddZ(.2); + + // for (let i = 0; i < drawStack.length; i++) { + // drawStack[i].rotateAddY(0.005*(i+1)); + + // } + + // drawStack.push(testCube); + // testTet.rotateAddX(.3); + // testTet.rotateAddY(.05); + // testTet.rotateAddZ(.5); + + // testCube.rotateAddX(1); + // testCube.rotateAddY(1); + // testCube.rotateAddZ(1); + + for (let i = 0; i < drawStack.length; i++) { + drawStack[i].draw(); + } + DEBUGTools.drawCenter(50); + }, 1000 / 60); +} + +window.onload = main; diff --git a/animate 0.2/js/math.js b/animate 0.2/js/math.js new file mode 100644 index 0000000..a3fb25e --- /dev/null +++ b/animate 0.2/js/math.js @@ -0,0 +1,81 @@ +function degToRad(deg) { + return (deg * Math.PI) / 180; +} + +function rotateMatrix2d(p, angle) { + // cos0 sin0 + // -sin0 cos0 + const angleD = degToRad(angle); + const r = [ + [Math.cos(angleD), Math.sin(angleD)], + [-Math.sin(angleD), Math.cos(angleD)], + ]; + const newPoint = [ + p[0] * r[0][0] + p[1] * r[0][1], + p[0] * r[1][0] + p[1] * r[1][1], + ]; + return newPoint; +} + +function rotateMatrix3dX(p, angle) { + // cos0 sin0 + // -sin0 cos0 + const angleD = degToRad(angle); + const r = [ + [1, 0, 0], + [0, Math.cos(angleD), -Math.sin(angleD)], + [0, Math.sin(angleD), Math.cos(angleD)], + ]; + const newPoint = [ + p[0] * r[0][0] + p[1] * r[0][1] + p[2] * r[0][2], + p[0] * r[1][0] + p[1] * r[1][1] + p[2] * r[1][2], + p[0] * r[2][0] + p[1] * r[2][1] + p[2] * r[2][2], + ]; + return newPoint; +} + +function rotateMatrix3dY(p, angle) { + // cos0 sin0 + // -sin0 cos0 + const angleD = degToRad(angle); + const r = [ + [Math.cos(angleD), 0, Math.sin(angleD)], + [0, 1, 0], + [-Math.sin(angleD), 0, Math.cos(angleD)], + ]; + const newPoint = [ + p[0] * r[0][0] + p[1] * r[0][1] + p[2] * r[0][2], + p[0] * r[1][0] + p[1] * r[1][1] + p[2] * r[1][2], + p[0] * r[2][0] + p[1] * r[2][1] + p[2] * r[2][2], + ]; + return newPoint; +} +function rotateMatrix3dZ(p, angle) { + // cos0 sin0 + // -sin0 cos0 + const angleD = degToRad(angle); + const r = [ + [Math.cos(angleD), -Math.sin(angleD), 0], + [Math.sin(angleD), Math.cos(angleD), 0], + [0, 0, 1], + ]; + const newPoint = [ + p[0] * r[0][0] + p[1] * r[0][1] + p[2] * r[0][2], + p[0] * r[1][0] + p[1] * r[1][1] + p[2] * r[1][2], + p[0] * r[2][0] + p[1] * r[2][1] + p[2] * r[2][2], + ]; + return newPoint; +} + +function projectionOrth(v) { + const p = [ + [1, 0, 0], + [0, 1, 0], + ]; + + const nPoint = [ + p[0][0] * v[0] + p[0][1] * v[1] + p[0][2] * v[2], + p[1][0] * v[0] + p[1][1] * v[1] + p[1][2] * v[2], + ]; + return nPoint; +} diff --git a/animate 0.2/js/objects.js b/animate 0.2/js/objects.js new file mode 100644 index 0000000..f656859 --- /dev/null +++ b/animate 0.2/js/objects.js @@ -0,0 +1,460 @@ +// import math from "math.js"; + +class Cube { + constructor(ctx, width, x, y, z, rx, ry, rz, color, solid) { + this.ctx = ctx; + this.color = color; + this.width = width; + this.solid = solid; + this.maxRadius = this.width / Math.cos(degToRad(45)); //TODO trig + this.pointsOrg = []; + this.pointsOrg.push([-this.width / 2, -this.width / 2, -this.width / 2]); + this.pointsOrg.push([this.width / 2, -this.width / 2, -this.width / 2]); + this.pointsOrg.push([this.width / 2, this.width / 2, -this.width / 2]); + this.pointsOrg.push([-this.width / 2, this.width / 2, -this.width / 2]); + + this.pointsOrg.push([-this.width / 2, -this.width / 2, this.width / 2]); + this.pointsOrg.push([this.width / 2, -this.width / 2, this.width / 2]); + this.pointsOrg.push([this.width / 2, this.width / 2, this.width / 2]); + this.pointsOrg.push([-this.width / 2, this.width / 2, this.width / 2]); + + this.points = JSON.parse(JSON.stringify(this.pointsOrg)); + this.centerX = 0; + this.centerY = 0; + this.globalX = x; + this.globalY = y; + this.globalZ = z; //might not need + + this.rotX = 0; + this.rotY = 0; + this.rotZ = 0; + } + draw() { + let projPoints = []; + for (let i = 0; i < this.points.length; i++) { + projPoints.push(projectionOrth(this.points[i])); + } + + if (this.solid) { + this.ctx.fillStyle = this.color; + } else { + this.ctx.strokeStyle = this.color; + } + this.ctx.beginPath(); + this.ctx.moveTo( + this.globalX + projPoints[0][0], + this.globalY + projPoints[0][1] + ); + for (let i = 1; i < 4; i++) { + this.ctx.lineTo( + this.globalX + projPoints[i][0], + this.globalY + projPoints[i][1] + ); + } + this.ctx.lineTo( + this.globalX + projPoints[0][0], + this.globalY + projPoints[0][1] + ); + + this.ctx.moveTo( + this.globalX + projPoints[4][0], + this.globalY + projPoints[4][1] + ); + for (let i = 5; i < 8; i++) { + this.ctx.lineTo( + this.globalX + projPoints[i][0], + this.globalY + projPoints[i][1] + ); + } + this.ctx.lineTo( + this.globalX + projPoints[4][0], + this.globalY + projPoints[4][1] + ); + + for (let i = 0; i < 4; i++) { + this.ctx.moveTo( + this.globalX + projPoints[i][0], + this.globalY + projPoints[i][1] + ); + this.ctx.lineTo( + this.globalX + projPoints[i + 4][0], + this.globalY + projPoints[i + 4][1] + ); + } + + if (this.solid) { + this.ctx.fill(); + } else { + this.ctx.stroke(); + } + } + drawCenter(x, y, width, color) { + let testLineX = new Line( + this.ctx, + [x + this.centerX - width, y + this.centerY], + [x + this.centerX + width, y + this.centerY], + color + ); + let testLineY = new Line( + this.ctx, + [x + this.centerX, y + this.centerY - width], + [x + this.centerX, y + this.centerY + width], + color + ); + + testLineX.draw(); + testLineY.draw(); + } + rotateAddX(deg) { + this.rotX += deg; + for (let i = 0; i < this.points.length; i++) { + this.points[i] = rotateMatrix3dX(this.points[i], deg); + } + } + rotateAddY(deg) { + this.rotY += deg; + for (let i = 0; i < this.points.length; i++) { + this.points[i] = rotateMatrix3dY(this.points[i], deg); + } + } + rotateAddZ(deg) { + this.rotZ += deg; + for (let i = 0; i < this.points.length; i++) { + this.points[i] = rotateMatrix3dZ(this.points[i], deg); + } + console.log(this.rotZ); + } + rotateSetOrg(x, y, z) { + for (let i = 0; i < this.points.length; i++) { + this.pointsOrg[i] = rotateMatrix3dX(this.pointsOrg[i], x); + } + for (let i = 0; i < this.points.length; i++) { + this.pointsOrg[i] = rotateMatrix3dZ(this.pointsOrg[i], y); + } + for (let i = 0; i < this.points.length; i++) { + this.pointsOrg[i] = rotateMatrix3dZ(this.pointsOrg[i], z); + } + + this.points = JSON.parse(JSON.stringify(this.pointsOrg)); + } +} +class Tetrahedron { + constructor(ctx, width, x, y, z, rx, ry, rz, color, solid) { + this.ctx = ctx; + this.color = color; + this.width = width; + this.solid = solid; + this.maxRadius = this.width / Math.cos(degToRad(45)); //TODO trig + this.pointsOrg = []; + // this.pointsOrg.push([-1 * width, 1 * width, -1 * width]); + // this.pointsOrg.push([1 * width, 1 * width, 1 * width]); + // this.pointsOrg.push([1 * width, -1 * width, -1 * width]); + // this.pointsOrg.push([-1 * width, -1 * width, 1 * width]); + + this.pointsOrg.push([1 * width, 1 * width, 1 * width]); + this.pointsOrg.push([1 * width, -1 * width, -1 * width]); + this.pointsOrg.push([-1 * width, 1 * width, -1 * width]); + this.pointsOrg.push([-1 * width, -1 * width, 1 * width]); + + // this.pointsOrg.push([(8/9)^.5 * width, 0, -1/3 * width]); + // this.pointsOrg.push([-(2/9)^.5 * width, (2/3)^.5 * width, -1/3 * width]); + // this.pointsOrg.push([-(2/9)^.5 * width, -(2/3)^.5 * width, -1/3 * width]); + // this.pointsOrg.push([0,0, 1 * width]); + + this.points = JSON.parse(JSON.stringify(this.pointsOrg)); + this.centerX = 0; + this.centerY = 0; + this.globalX = x; + this.globalY = y; + + this.rotX = 0; + this.rotY = 0; + this.rotZ = 0; + + this.rotateSetOrg(rx, ry, rz); + + } + draw() { + let projPoints = []; + for (let i = 0; i < this.points.length; i++) { + projPoints.push(projectionOrth(this.points[i])); + } + + if (this.solid) { + this.ctx.fillStyle = this.color; + } else { + this.ctx.strokeStyle = this.color; + } + this.ctx.beginPath(); + this.ctx.moveTo( + this.globalX + projPoints[0][0], + this.globalY + projPoints[0][1] + ); + for (let i = 1; i < 3; i++) { + this.ctx.lineTo( + this.globalX + projPoints[i][0], + this.globalY + projPoints[i][1] + ); + } + this.ctx.lineTo( + this.globalX + projPoints[0][0], + this.globalY + projPoints[0][1] + ); + this.ctx.lineTo( + this.globalX + projPoints[3][0], + this.globalY + projPoints[3][1] + ); + this.ctx.lineTo( + this.globalX + projPoints[1][0], + this.globalY + projPoints[1][1] + ); + this.ctx.moveTo( + this.globalX + projPoints[3][0], + this.globalY + projPoints[3][1] + ); + this.ctx.lineTo( + this.globalX + projPoints[2][0], + this.globalY + projPoints[2][1] + ); + + if (this.solid) { + this.ctx.fill(); + } else { + this.ctx.stroke(); + } + } + drawCenter(x, y, width, color) { + let testLineX = new Line( + this.ctx, + [x + this.centerX - width, y + this.centerY], + [x + this.centerX + width, y + this.centerY], + color + ); + let testLineY = new Line( + this.ctx, + [x + this.centerX, y + this.centerY - width], + [x + this.centerX, y + this.centerY + width], + color + ); + + testLineX.draw(); + testLineY.draw(); + } + + rotateAddX(deg) { + this.rotX += deg; + for (let i = 0; i < this.points.length; i++) { + this.points[i] = rotateMatrix3dX(this.points[i], deg); + } + } + rotateAddY(deg) { + this.rotY += deg; + for (let i = 0; i < this.points.length; i++) { + this.points[i] = rotateMatrix3dY(this.points[i], deg); + } + } + rotateAddZ(deg) { + this.rotZ += deg; + for (let i = 0; i < this.points.length; i++) { + this.points[i] = rotateMatrix3dZ(this.points[i], deg); + } + console.log(this.rotZ); + } + rotateSetOrg(x, y, z) { + for (let i = 0; i < this.points.length; i++) { + this.pointsOrg[i] = rotateMatrix3dX(this.pointsOrg[i], x); + } + for (let i = 0; i < this.points.length; i++) { + this.pointsOrg[i] = rotateMatrix3dZ(this.pointsOrg[i], y); + } + for (let i = 0; i < this.points.length; i++) { + this.pointsOrg[i] = rotateMatrix3dZ(this.pointsOrg[i], z); + } + + this.points = JSON.parse(JSON.stringify(this.pointsOrg)); + } +} + +class Square { + constructor(ctx, width, x, y, color, solid) { + this.ctx = ctx; + this.color = color; + this.width = width; + this.solid = solid; + this.maxRadius = this.width / Math.cos(degToRad(45)); + this.points = []; + this.points.push([-this.width / 2, -this.width / 2, 0]); + this.points.push([this.width / 2, -this.width / 2, 0]); + this.points.push([this.width / 2, this.width / 2, 0]); + this.points.push([-this.width / 2, this.width / 2, 0]); + + this.centerX = 0; + this.centerY = 0; + this.globalX = x; + this.globalY = y; + } + draw() { + if (this.solid) { + this.ctx.fillStyle = this.color; + } else { + this.ctx.strokeStyle = this.color; + } + this.ctx.beginPath(); + this.ctx.moveTo( + this.globalX + this.points[0][0], + this.globalY + this.points[0][1] + ); + for (let i = 1; i < this.points.length; i++) { + this.ctx.lineTo( + this.globalX + this.points[i][0], + this.globalY + this.points[i][1] + ); + } + this.ctx.lineTo( + this.globalX + this.points[0][0], + this.globalY + this.points[0][1] + ); + + if (this.solid) { + this.ctx.fill(); + } else { + this.ctx.stroke(); + } + } + drawCenter(x, y, width, color) { + let testLineX = new Line( + this.ctx, + [x + this.centerX - width, y + this.centerY], + [x + this.centerX + width, y + this.centerY], + color + ); + let testLineY = new Line( + this.ctx, + [x + this.centerX, y + this.centerY - width], + [x + this.centerX, y + this.centerY + width], + color + ); + + testLineX.draw(); + testLineY.draw(); + } + rotateAdd(deg) { + for (let i = 0; i < this.points.length; i++) { + this.points[i] = rotateMatrix2d(this.points[i], deg); + } + } + rotateSet(deg) {} +} + +class RandomPolygon { + constructor(ctx, width, x, y, sides, color) { + this.ctx = ctx; + this.color = color; + this.sides = sides; + this.width = width; + this.maxRadius = this.width / Math.cos(degToRad(45)); + this.points = []; + for (let i = 0; i < sides; i++) { + const rndNumX = Math.random() * 2 - 1; + const rndNumY = Math.random() * 2 - 1; + const rndPointX = (this.width * rndNumX) / 2; + const rndPointY = (this.width * rndNumY) / 2; + this.points.push([Math.round(rndPointX), Math.round(rndPointY)]); + } + this.globalX = x; + this.globalY = y; + this.centerX; + this.centerY; + + this.findCenter(); + for (let i = 0; i < this.points.length; i++) { + this.points[i][0] -= this.centerX; + this.points[i][1] -= this.centerY; + } + this.findCenter(); + } + draw() { + this.ctx.fillStyle = this.color; + this.ctx.beginPath(); + this.ctx.moveTo( + this.globalX + this.points[0][0], + this.globalY + this.points[0][1] + ); + for (let i = 1; i < this.points.length; i++) { + this.ctx.lineTo( + this.globalX + this.points[i][0], + this.globalY + this.points[i][1] + ); + } + this.ctx.fill(); + } + drawCenter(x, y, width, color) { + let testLineX = new Line( + this.ctx, + [x + this.centerX - width, y + this.centerY], + [x + this.centerX + width, y + this.centerY], + color + ); + let testLineY = new Line( + this.ctx, + [x + this.centerX, y + this.centerY - width], + [x + this.centerX, y + this.centerY + width], + color + ); + + testLineX.draw(); + testLineY.draw(); + } + findCenter() { + let xTot = 0; + let yTot = 0; + for (let i = 0; i < this.points.length; i++) { + xTot += this.points[i][0]; + yTot += this.points[i][1]; + } + this.centerX = xTot / this.points.length; + this.centerY = yTot / this.points.length; + } +} + +class Line { + constructor(ctx, p1, p2, color) { + this.ctx = ctx; + this.p1 = p1; + this.p2 = p2; + this.color = color; + } + draw() { + this.ctx.strokeStyle = this.color; + this.ctx.beginPath(); + this.ctx.moveTo(this.p1[0], this.p1[1]); + this.ctx.lineTo(this.p2[0], this.p2[1]); + this.ctx.closePath(); + this.ctx.stroke(); + } +} + +class DebugTools { + constructor(ctx, centerX, centerY) { + this.ctx = ctx; + this.centerX = centerX; + this.centerY = centerY; + } + + drawCenter(width) { + let centerLineX = new Line( + this.ctx, + [this.centerX - width, this.centerY], + [this.centerX + width, this.centerY], + "orange" + ); + let centerLineY = new Line( + this.ctx, + [this.centerX, this.centerY - width], + [this.centerX, this.centerY + width], + "orange" + ); + centerLineX.draw(); + centerLineY.draw(); + } +}