From c15e5b1722bbd8af395aaaab1b97f724a60a98d8 Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 21 Mar 2023 18:23:52 +1300 Subject: [PATCH] allinone started --- .../{chatgpt => }/Spiral Accident2/index.html | 0 .../Spiral Accident2/script copy.js | 0 .../{chatgpt => }/Spiral Accident2/script.js | 0 Catalogue/{chatgpt => }/Spiral/index.html | 0 Catalogue/{chatgpt => }/Spiral/script copy.js | 0 Catalogue/{chatgpt => }/Spiral/script.js | 0 .../{chatgpt => }/SpiralAccident/index.html | 0 .../SpiralAccident/script copy.js | 0 .../{chatgpt => }/SpiralAccident/script.js | 0 Catalogue/floralPhyllo.html | 4 +- Catalogue/npoly twist.html | 4 +- Catalogue/spiral.html | 159 --------------- Catalogue/unknown/index.html | 21 ++ Catalogue/unknown/script.js | 156 +++++++++++++++ docs/config.json | 16 ++ docs/css/styles.css | 40 ++++ docs/index.html | 37 ++++ docs/js/helper.js | 181 ++++++++++++++++++ docs/js/index.js | 120 ++++++++++++ docs/js/math.js | 77 ++++++++ docs/js/objects.js | 122 ++++++++++++ 21 files changed, 774 insertions(+), 163 deletions(-) rename Catalogue/{chatgpt => }/Spiral Accident2/index.html (100%) rename Catalogue/{chatgpt => }/Spiral Accident2/script copy.js (100%) rename Catalogue/{chatgpt => }/Spiral Accident2/script.js (100%) rename Catalogue/{chatgpt => }/Spiral/index.html (100%) rename Catalogue/{chatgpt => }/Spiral/script copy.js (100%) rename Catalogue/{chatgpt => }/Spiral/script.js (100%) rename Catalogue/{chatgpt => }/SpiralAccident/index.html (100%) rename Catalogue/{chatgpt => }/SpiralAccident/script copy.js (100%) rename Catalogue/{chatgpt => }/SpiralAccident/script.js (100%) delete mode 100644 Catalogue/spiral.html create mode 100644 Catalogue/unknown/index.html create mode 100644 Catalogue/unknown/script.js create mode 100644 docs/config.json create mode 100644 docs/css/styles.css create mode 100644 docs/index.html create mode 100644 docs/js/helper.js create mode 100644 docs/js/index.js create mode 100644 docs/js/math.js create mode 100644 docs/js/objects.js diff --git a/Catalogue/chatgpt/Spiral Accident2/index.html b/Catalogue/Spiral Accident2/index.html similarity index 100% rename from Catalogue/chatgpt/Spiral Accident2/index.html rename to Catalogue/Spiral Accident2/index.html diff --git a/Catalogue/chatgpt/Spiral Accident2/script copy.js b/Catalogue/Spiral Accident2/script copy.js similarity index 100% rename from Catalogue/chatgpt/Spiral Accident2/script copy.js rename to Catalogue/Spiral Accident2/script copy.js diff --git a/Catalogue/chatgpt/Spiral Accident2/script.js b/Catalogue/Spiral Accident2/script.js similarity index 100% rename from Catalogue/chatgpt/Spiral Accident2/script.js rename to Catalogue/Spiral Accident2/script.js diff --git a/Catalogue/chatgpt/Spiral/index.html b/Catalogue/Spiral/index.html similarity index 100% rename from Catalogue/chatgpt/Spiral/index.html rename to Catalogue/Spiral/index.html diff --git a/Catalogue/chatgpt/Spiral/script copy.js b/Catalogue/Spiral/script copy.js similarity index 100% rename from Catalogue/chatgpt/Spiral/script copy.js rename to Catalogue/Spiral/script copy.js diff --git a/Catalogue/chatgpt/Spiral/script.js b/Catalogue/Spiral/script.js similarity index 100% rename from Catalogue/chatgpt/Spiral/script.js rename to Catalogue/Spiral/script.js diff --git a/Catalogue/chatgpt/SpiralAccident/index.html b/Catalogue/SpiralAccident/index.html similarity index 100% rename from Catalogue/chatgpt/SpiralAccident/index.html rename to Catalogue/SpiralAccident/index.html diff --git a/Catalogue/chatgpt/SpiralAccident/script copy.js b/Catalogue/SpiralAccident/script copy.js similarity index 100% rename from Catalogue/chatgpt/SpiralAccident/script copy.js rename to Catalogue/SpiralAccident/script copy.js diff --git a/Catalogue/chatgpt/SpiralAccident/script.js b/Catalogue/SpiralAccident/script.js similarity index 100% rename from Catalogue/chatgpt/SpiralAccident/script.js rename to Catalogue/SpiralAccident/script.js diff --git a/Catalogue/floralPhyllo.html b/Catalogue/floralPhyllo.html index d9122cf..d8d1c7c 100644 --- a/Catalogue/floralPhyllo.html +++ b/Catalogue/floralPhyllo.html @@ -50,7 +50,7 @@ render_clear(); // Draw_Phyllotaxis(rotation); - Draw_Phyllotaxis(rotation+.5); + Draw_FloralPhyllo(rotation+.5); // Draw_Phyllotaxis(rotation + 1.5); // Draw_Phyllotaxis(rotation + 4.8); // Draw_Phyllotaxis(Math.PI/4); @@ -70,7 +70,7 @@ render(); - function Draw_Phyllotaxis(angle) { + function Draw_FloralPhyllo(angle) { // var c = 24; //something to do with width. but not width var c = 1; //something to do with width. but not width diff --git a/Catalogue/npoly twist.html b/Catalogue/npoly twist.html index 485a640..d453844 100644 --- a/Catalogue/npoly twist.html +++ b/Catalogue/npoly twist.html @@ -31,9 +31,9 @@ render_clear(); colour2 = [255, 0, 0]; - colour1 = [0, 0, 0]; + colour1 = [0, 255, 0]; - DrawPolyTwistColour_angle(8,400,-90,rotation/10,colour1, colour2) + DrawPolyTwistColour_width(4,400,-90,rotation/10,colour1, colour2) // DrawPolyTwist_angle(15,400,-90,rotation/20,"red") // DrawPolyTwistColour_width(4,400,-45,rotation/4,colour1,colour2) // DrawPolyTwist_width(10,400,-90,rotation/20,"red") diff --git a/Catalogue/spiral.html b/Catalogue/spiral.html deleted file mode 100644 index c6fab11..0000000 --- a/Catalogue/spiral.html +++ /dev/null @@ -1,159 +0,0 @@ - - - - - - - Your browser does not support the HTML5 canvas tag. - - - - \ No newline at end of file diff --git a/Catalogue/unknown/index.html b/Catalogue/unknown/index.html new file mode 100644 index 0000000..43d2897 --- /dev/null +++ b/Catalogue/unknown/index.html @@ -0,0 +1,21 @@ + + + + + + Reaction-Diffusion Animation + + + + + + + diff --git a/Catalogue/unknown/script.js b/Catalogue/unknown/script.js new file mode 100644 index 0000000..3be107b --- /dev/null +++ b/Catalogue/unknown/script.js @@ -0,0 +1,156 @@ +const canvas = document.getElementById("canvas"); +const ctx = canvas.getContext("2d"); +canvas.width = 500; //window.innerWidth; +canvas.height = 500; //window.innerHeight; + +let gridSizeX = canvas.width; +let gridSizeY = canvas.height; + +let gridA = create2DArray(gridSizeX, gridSizeY); +let gridB = create2DArray(gridSizeX, gridSizeY); +let nextGridA = create2DArray(gridSizeX, gridSizeY); +let nextGridB = create2DArray(gridSizeX, gridSizeY); + +function create2DArray(rows, cols) { + let arr = new Array(rows); + for (let i = 0; i < rows; i++) { + arr[i] = new Array(cols).fill(0); + } + return arr; +} + +function seedGrid() { + for (let i = 0; i < gridSizeX; i++) { + for (let j = 0; j < gridSizeY; j++) { + gridA[i][j] = 1; + gridB[i][j] = Math.random() < 0.1 ? 0.5 : 0; + } + } +} + +seedGrid(); + +let dA = 1; +let dB = 0.5; +let feed = 0.055; +let kill = 0.062; + +function updateGrid() { + const centerX = gridSizeX / 2; + const centerY = gridSizeY / 2; + const radialFlowStrength = 0.01; + + let tempGridA = create2DArray(gridSizeX, gridSizeY); + let tempGridB = create2DArray(gridSizeX, gridSizeY); + + for (let x = 1; x < gridSizeX - 1; x++) { + for (let y = 1; y < gridSizeY - 1; y++) { + let deltaX = x - centerX; + let deltaY = y - centerY; + let distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY); + let flowFactor = radialFlowStrength * (distance + 1); + + let dx = Math.round(deltaX * flowFactor); + let dy = Math.round(deltaY * flowFactor); + let sourceX = (x + Math.abs(dx) % gridSizeX) % gridSizeX; + let sourceY = (y + Math.abs(dy) % gridSizeY) % gridSizeY; + + tempGridA[x][y] = gridA[sourceX][sourceY]; + tempGridB[x][y] = gridB[sourceX][sourceY]; + } + } + + for (let x = 1; x < gridSizeX - 1; x++) { + for (let y = 1; y < gridSizeY - 1; y++) { + let a = tempGridA[x][y]; + let b = tempGridB[x][y]; + + nextGridA[x][y] = a + (dA * laplaceA(x, y)) - (a * b * b) + (feed * (1 - a)); + nextGridB[x][y] = b + (dB * laplaceB(x, y)) + (a * b * b) - ((kill + feed) * b); + + nextGridA[x][y] = Math.min(Math.max(nextGridA[x][y], 0), 1); + nextGridB[x][y] = Math.min(Math.max(nextGridB[x][y], 0), 1); + } + } + + let temp = gridA; + gridA = nextGridA; + nextGridA = temp; + + temp = gridB; + gridB = nextGridB; + nextGridB = temp; +} + + +function laplaceA(x, y) { + let sum = 0; + let weights = [ + [0.05, 0.2, 0.05], + [0.2, -1, 0.2], + [0.05, 0.2, 0.05], + ]; + + for (let i = -1; i < 2; i++) { + for (let j = -1; j < 2; j++) { + let row = (x + i + gridSizeX) % gridSizeX; + let col = (y + j + gridSizeY) % gridSizeY; + sum += gridA[row][col] * weights[i + 1][j + 1]; + } + } + + return sum; +} + +function laplaceB(x, y) { + let sum = 0; + let weights = [ + [0.05, 0.2, 0.05], + [0.2, -1, 0.2], + [0.05, 0.2, 0.05], + ]; + + for (let i = -1; i < 2; i++) { + for (let j = -1; j < 2; j++) { + let row = (x + i + gridSizeX) % gridSizeX; + let col = (y + j + gridSizeY) % gridSizeY; + sum += gridB[row][col] * weights[i + 1][j + 1]; + } + } + + return sum; +} + +function draw() { + const imageData = ctx.createImageData(canvas.width, canvas.height); + const data = imageData.data; + + for (let x = 0; x < gridSizeX; x++) { + for (let y = 0; y < gridSizeY; y++) { + const index = (x + y * gridSizeX) * 4; + const a = gridA[x][y]; + const b = gridB[x][y]; + const color = { + r: 206 * b, + g: 66 * b, + b: 245 * b, + }; + + data[index + 0] = color.r; + data[index + 1] = color.g; + data[index + 2] = color.b; + data[index + 3] = 255; + } + } + + ctx.putImageData(imageData, 0, 0); +} + +function loop() { + draw(); + updateGrid(); + + requestAnimationFrame(loop); +} + +loop(); diff --git a/docs/config.json b/docs/config.json new file mode 100644 index 0000000..bfed6e4 --- /dev/null +++ b/docs/config.json @@ -0,0 +1,16 @@ +{ + "PolyTwistColourWidth": [ + { "type": "range", "min": 3, "max": 10, "defaultValue": 5, "property": "sides" }, + { "type": "range", "min": 1, "max": 600, "defaultValue": 300, "property": "width" }, + { "type": "range", "min": 1, "max": 100, "defaultValue": 50, "property": "depth" }, + { "type": "range", "min": 0, "max": 360, "defaultValue": 180, "property": "rotation" }, + { "type": "color", "defaultValue": "#4287f5", "property": "colour1" }, + { "type": "color", "defaultValue": "#42f57b", "property": "colour2" } + ], + "FloralPhyllo": [ + { "type": "range", "min": 1, "max": 600, "defaultValue": 300, "property": "width" }, + { "type": "range", "min": 1, "max": 100, "defaultValue": 50, "property": "depth" }, + { "type": "color", "defaultValue": "#4287f5", "property": "colour1" }, + { "type": "color", "defaultValue": "#4287f5", "property": "colour2" } + ] + } \ No newline at end of file diff --git a/docs/css/styles.css b/docs/css/styles.css new file mode 100644 index 0000000..8192e60 --- /dev/null +++ b/docs/css/styles.css @@ -0,0 +1,40 @@ +body { + -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ + -moz-box-sizing: border-box; /* Firefox, other Gecko */ + box-sizing: border-box; /* Opera/IE 8+ */ + height:100% +} +p{ + margin: 0px; +} + +canvas { + position: absolute; +} +#toolbar { + display: flex; + flex-flow: column; + height: 100%; + + position: absolute; + padding: 0px 20px 0px 20px; + width: 500px; + height: 100vh; + background-color: rgb(189, 189, 189); +} +#custom { + display: flex; + flex-flow: column; + height: 100%; + + /* position: absolute; */ + padding: 0px 20px 0px 20px; + /* width: 500px; */ + /* height: 100vh; */ + background-color: rgb(189, 189, 189); +} + + +.controls{ + display: block; +} \ No newline at end of file diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..e384f75 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,37 @@ + + + + + Document + + + + +
+
+ +
+
+

Degrees Per Second

+ +
+

Controls

+ +
+ + + +
+
+ + + + + + + \ No newline at end of file diff --git a/docs/js/helper.js b/docs/js/helper.js new file mode 100644 index 0000000..91e81f0 --- /dev/null +++ b/docs/js/helper.js @@ -0,0 +1,181 @@ +async function fetchConfig(className) { + // const config = await $.getJSON("config.json"); + const config = { + PolyTwistColourWidth: [ + { type: "range", min: 3, max: 10, defaultValue: 5, property: "sides" }, + { type: "range", min: 1, max: 600, defaultValue: 400, property: "width" }, + { type: "range", min: 1, max: 100, defaultValue: 50, property: "depth" }, + { + type: "range", + min: -180, + max: 180 , + defaultValue: -90, + property: "rotation", + }, + { type: "color", defaultValue: "#4287f5", property: "colour1" }, + { type: "color", defaultValue: "#42f57b", property: "colour2" }, + ], + FloralPhyllo: [ + { type: "range", min: 1, max: 600, defaultValue: 300, property: "width" }, + { type: "range", min: 1, max: 100, defaultValue: 50, property: "depth" }, + { type: "color", defaultValue: "#4287f5", property: "colour1" }, + { type: "color", defaultValue: "#4287f5", property: "colour2" }, + ], + Spiral1: [ + { type: "range", min: 1, max: 50, defaultValue: 20, property: "sides" }, + { type: "range", min: 1, max: 600, defaultValue: 240, property: "width" }, + { type: "color", defaultValue: "#4287f5", property: "colour" }, + ], + }; + return config[className]; +} + +function addControl(item, instance) { + console.log(item); + let parentDiv = document.getElementById("custom"); + + let title = document.createElement("p"); + title.innerText = item.property + ": " + item.defaultValue; + title.id = "elText" + item.property; + + let control = document.createElement("input"); + control.type = item.type; + + if (item.type === "range") { + control.min = item.min; + control.max = item.max; + } + + control.value = item.defaultValue; + control.className = "control"; + control.id = "el" + item.property; + + const listener = (event) => { + const newValue = event.target.value; + instance[item.property] = + item.type === "range" ? parseInt(newValue, 10) : newValue; + + title.innerText = item.property + ": " + newValue; + }; + + control.addEventListener("input", listener); + + parentDiv.appendChild(title); + parentDiv.appendChild(control); + + return { element: control, listener }; +} + +function drawEyelid(width, x1, y1, colour) { + x1 -= centerX; + y1 -= centerY; + + const angle = Math.atan2(y1, x1); + const cosAngle = Math.cos(angle); + const sinAngle = Math.sin(angle); + + const x2 = cosAngle * width; + const y2 = sinAngle * width; + + const x3Old = width / 2; + const y3Old = width / 2; + const x4Old = width / 2; + const y4Old = -width / 2; + + const x3 = x3Old * cosAngle - y3Old * sinAngle; + const y3 = x3Old * sinAngle + y3Old * cosAngle; + const x4 = x4Old * cosAngle - y4Old * sinAngle; + const y4 = x4Old * sinAngle + y4Old * cosAngle; + + x1 += centerX; + y1 += centerY; + const x2Final = x2 + x1; + const y2Final = y2 + y1; + const x3Final = x3 + x1; + const y3Final = y3 + y1; + const x4Final = x4 + x1; + const y4Final = y4 + y1; + + ctx.beginPath(); + ctx.moveTo(x1, y1); + ctx.quadraticCurveTo(x3Final, y3Final, x2Final, y2Final); + + ctx.moveTo(x1, y1); + ctx.quadraticCurveTo(x4Final, y4Final, x2Final, y2Final); + ctx.fillStyle = colour; + ctx.fill(); + + ctx.lineWidth = 2; + ctx.strokeStyle = "black"; + ctx.stroke(); +} + +function DrawPolygon(sides, width, rotation, colour) { + ctx.beginPath(); + ctx.moveTo( + centerX + width * Math.cos((rotation * Math.PI) / 180), + centerY + width * Math.sin((rotation * Math.PI) / 180) + ); + + for (var i = 1; i <= sides; i += 1) { + ctx.lineTo( + centerX + + width * + Math.cos((i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180), + centerY + + width * Math.sin((i * 2 * Math.PI) / sides + (rotation * Math.PI) / 180) + ); + } + ctx.strokeStyle = colour; + ctx.lineWidth = 3; + ctx.stroke(); +} + +function rad(degrees) { + return (degrees * Math.PI) / 180; +} + +function colourToText(colour) { + return "rgb(" + colour[0] + "," + colour[1] + "," + colour[2] + ")"; +} + +function LerpHex(a, b, amount) { + var ah = parseInt(a.replace(/#/g, ""), 16), + ar = ah >> 16, + ag = (ah >> 8) & 0xff, + ab = ah & 0xff, + bh = parseInt(b.replace(/#/g, ""), 16), + br = bh >> 16, + bg = (bh >> 8) & 0xff, + bb = bh & 0xff, + rr = ar + amount * (br - ar), + rg = ag + amount * (bg - ag), + rb = ab + amount * (bb - ab); + + return ( + "#" + (((1 << 24) + (rr << 16) + (rg << 8) + rb) | 0).toString(16).slice(1) + ); +} + +function LerpRGB(a, b, t) { + if (t < 0) { + t *= -1; + } + var newColor = [0, 0, 0]; + newColor[0] = a[0] + (b[0] - a[0]) * t; + newColor[1] = a[1] + (b[1] - a[1]) * t; + newColor[2] = a[2] + (b[2] - a[2]) * t; + return newColor; +} + +function render_clear() { + ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); + ctx.fillStyle = "black"; + ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); +} + +function render_clear() { + ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); + ctx.fillStyle = "black"; + ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); +} diff --git a/docs/js/index.js b/docs/js/index.js new file mode 100644 index 0000000..9a230ff --- /dev/null +++ b/docs/js/index.js @@ -0,0 +1,120 @@ +//jshint esversion:8 +let c = document.getElementById("myCanvas"); +let ctx = c.getContext("2d"); +ctx.canvas.width = window.innerWidth; +ctx.canvas.height = window.innerHeight; +centerX = ctx.canvas.width / 2; +centerY = ctx.canvas.height / 2; + + +let deg_per_sec = 5; +let targetFps = 60; +let frameDuration = 1000 / targetFps; + +let rotation = 0; //was = j = angle +let paused = true; +render_clear(); + +let drawObj = null; +function createInstance(className, args) { + const classMap = { + PolyTwistColourWidth: PolyTwistColourWidth, + FloralPhyllo: FloralPhyllo, + Spiral1: Spiral1, + // Add more class constructors here as needed + }; + + if (classMap.hasOwnProperty(className)) { + return new classMap[className](...args); + } else { + throw new Error(`Unknown class name: ${className}`); + } +} + +async function updateDrawObj() { + const shapeSelector = document.getElementById("shape-selector"); + const selectedShape = shapeSelector.value; + const config = await fetchConfig(selectedShape); + if (drawObj) { + drawObj.remove(); // Remove the previous instance + } + // Extract default values from the configuration + const defaultValues = config + // .filter((item) => item.type !== "color") // Exclude color inputs + .map((item) => item.defaultValue); + + drawObj = createInstance(selectedShape, defaultValues); + drawObj.initialise(config); +} + +updateDrawObj(); + +function render() { + setTimeout(() => { + requestAnimationFrame(() => { + render_clear(); + if (drawObj) { + drawObj.draw(rotation); + } + + if (!paused) { + rotation += deg_per_sec / targetFps; + } + }); + + render(); + }, frameDuration); +} + +document + .getElementById("shape-selector") + .addEventListener("change", updateDrawObj); + +let toolbarShowing = true; +document.addEventListener("keydown", toggleSettings); + +function toggleSettings(e) { + if (e.key == "p") { + toolbarShowing = !toolbarShowing; + } + if (e.code === "Space") { + paused = !paused; + } + + let tb = document.getElementById("toolbar"); + if (toolbarShowing) { + tb.style.display = "flex"; + } else { + tb.style.display = "none"; + } +} + +function TogglePause() { + let pb = document.getElementById("pauseButton"); + paused = !paused; + + if (paused) { + pb.textContent = "Play"; + } else { + pb.textContent = "Pause"; + } +} +function Reset() { + rotation = 0; //was = j = angle + currentFrame = 0; +} + +function ForwardFrame() { + rotation += deg_per_sec / fps; // was = j = innerRotation, now = rotation + currentFrame += 1; // was = i +} +function BackwardFrame() { + rotation -= deg_per_sec / fps; // was = j = innerRotation, now = rotation + currentFrame -= 1; // was = i +} + +function ChangeDegPerSec(newValue) { + deg_per_sec = newValue; +} + +window.onload = render; diff --git a/docs/js/math.js b/docs/js/math.js new file mode 100644 index 0000000..f9eeea3 --- /dev/null +++ b/docs/js/math.js @@ -0,0 +1,77 @@ +function rotateMatrix2d(p, angle) { + // cos0 sin0 + // -sin0 cos0 + const angleD = rad(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 = rad(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 = rad(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 = rad(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/docs/js/objects.js b/docs/js/objects.js new file mode 100644 index 0000000..f725c99 --- /dev/null +++ b/docs/js/objects.js @@ -0,0 +1,122 @@ +class BaseShape { + constructor() { + this.controls = []; // Keep track of created elements and event listeners + } + + initialise(config) { + for (let item of config) { + const { element, listener } = addControl(item,this); + this.controls.push({ element, listener }); + } + } + + remove() { + this.controls.forEach(({ element, listener }) => { + if (element && listener) { + element.removeEventListener("input", listener); + } + if (element && element.parentElement) { + element.parentElement.removeChild(element); + const titleElement = document.getElementById("elText" + element.id.slice(2)); + titleElement.parentElement.removeChild(titleElement); + } + }); + this.controls = []; + } + + draw() { + throw new Error("Draw function not implemented"); + } +} + +class PolyTwistColourWidth extends BaseShape { + constructor(sides, width, depth, rotation, colour1, colour2) { + super(); + this.sides = sides; + this.width = width; + this.depth = depth; + this.rotation = rotation; + this.colour1 = colour1; + this.colour2 = colour2; + } + + draw(innerRotation) { + let out_angle = 0; + const innerAngle = 180 - ((this.sides - 2) * 180) / this.sides; + const scopeAngle = innerRotation - (innerAngle * Math.floor(innerRotation / innerAngle)); + + if (scopeAngle < innerAngle / 2) { + out_angle = innerAngle / (2 * Math.cos((2 * Math.PI * scopeAngle) / (3 * innerAngle))) - innerAngle / 2; + } else { + out_angle = -innerAngle / (2 * Math.cos(((2 * Math.PI) / 3) - ((2 * Math.PI * scopeAngle) / (3 * innerAngle)))) + (innerAngle * 3) / 2; + } + let minWidth = Math.sin(rad(innerAngle / 2)) * (0.5 / Math.tan(rad(innerAngle / 2))) * 2; + + let widthMultiplier = minWidth / Math.sin(Math.PI / 180 * (90 + innerAngle / 2 - out_angle + innerAngle * Math.floor(out_angle / innerAngle))); + + for (let i = 0; i < this.depth; i++) { + const fraction = i / this.depth; + const ncolour = LerpHex(this.colour1, this.colour2, fraction); + DrawPolygon(this.sides, this.width * widthMultiplier ** i, out_angle * i + this.rotation , ncolour); + } + } +} +class FloralPhyllo extends BaseShape { + constructor(width, depth, colour1, colour2) { + super(); + this.width = width; + this.depth = depth; + this.colour1 = colour1; + this.colour2 = colour2; + } + + draw(angle) { + // var c = 24; //something to do with width. but not width + var c = 1; //something to do with width. but not width + //dont make larger than 270 unless altering the number of colours in lerpedColours + for (let n = 200; n > 0; n -= 1) { + const a = n * angle/1000; //137.5; + const r = c * Math.sqrt(n); + const x = r * Math.cos(a) + centerX; + const y = r * Math.sin(a) + centerY; + + drawEyelid(n * 2.4 + 40, x, y, this.colour1); + } + } +} +class Spiral1 extends BaseShape { + constructor(sides,width, colour) { + super(); + this.sides = sides; + this.width = width; + this.colour = colour; + } + + draw(rotation) { + var rot = Math.round((this.sides - 2) * 180 / this.sides * 2) + var piv = 360 / this.sides; + var stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation); + var end = 0; + var n = this.width / ((this.width / 10) * (this.width / 10)) //pixel correction for mid leaf + + for (let i = 1; i < this.sides + 1; i++) { + end = stt + rad(rot); + + ctx.beginPath(); + ctx.arc(centerX + Math.cos(rad(90 + piv * i + rotation)) * this.width, centerY + Math.sin(rad(90 + piv * i + rotation)) * this.width, this.width, stt + rad(rotation) - (stt - end) / 2, end + rad(rotation) + rad(n), 0); + ctx.strokeStyle = this.colour; + ctx.stroke(); + + + ctx.beginPath(); + ctx.arc(centerX + Math.cos(rad(90 + piv * i - rotation)) * this.width, centerY + Math.sin(rad(90 + piv * i - rotation)) * this.width, this.width, stt - rad(rotation), end - (end - stt) / 2 + rad(n) - rad(rotation), 0); + ctx.strokeStyle = this.colour; + ctx.stroke(); + + + stt = end + -(rad(rot - piv)) //+rad(30); + } + + } +} +