From e3d07a3c4eb88369c2088a112a67f2452ded3b17 Mon Sep 17 00:00:00 2001 From: Sam Date: Thu, 23 Mar 2023 17:28:46 +1300 Subject: [PATCH] more shapes --- docs/index.html | 6 ++- docs/js/helper.js | 14 +++++ docs/js/index.js | 13 +++++ docs/js/objects.js | 129 ++++++++++++++++++++++++++++++++++++++++++++- 4 files changed, 158 insertions(+), 4 deletions(-) diff --git a/docs/index.html b/docs/index.html index 227d767..0c5fce6 100644 --- a/docs/index.html +++ b/docs/index.html @@ -5,9 +5,9 @@ Document - + + style="display: block;box-sizing: border-box;" >


diff --git a/docs/js/helper.js b/docs/js/helper.js index cb25714..b278aab 100644 --- a/docs/js/helper.js +++ b/docs/js/helper.js @@ -43,6 +43,20 @@ async function fetchConfig(className) { { type: "range", min: 1, max: 10, defaultValue: 3, property: "line_width" }, { type: "color", defaultValue: "#2D81FC", property: "colour1" }, { type: "color", defaultValue: "#FC0362", property: "colour2" }, + { type: "range", min: 0, max: 10, defaultValue: 5, property: "colour_change" }, + ], + Nodal: [ + { type: "range", min: 1, max: 1000, defaultValue: 400, property: "width" }, + { type: "range", min: 1, max: 20, defaultValue: 10, property: "points" }, + { type: "range", min: 1, max: 10, defaultValue: 3, property: "line_width" }, + { type: "range", min: 1, max: 20, defaultValue: 1, property: "step" }, + { type: "color", defaultValue: "#2D81FC", property: "colour" }, + ], + Phyllotaxis: [ + { type: "range", min: 1, max: 40, defaultValue: 24, property: "width" }, + { type: "range", min: 1, max: 1000, defaultValue: 300, property: "nMax" }, + { type: "color", defaultValue: "#2D81FC", property: "colour1" }, + { type: "color", defaultValue: "#FC0362", property: "colour2" }, ], }; return config[className]; diff --git a/docs/js/index.js b/docs/js/index.js index ee1d449..94bb768 100644 --- a/docs/js/index.js +++ b/docs/js/index.js @@ -24,6 +24,8 @@ function createInstance(className, args) { FloralAccident: FloralAccident, FloralPhyllo_Accident: FloralPhyllo_Accident, Nodal_expanding: Nodal_expanding, + Nodal: Nodal, + Phyllotaxis:Phyllotaxis // Add more class constructors here as needed }; @@ -76,6 +78,17 @@ document let toolbarShowing = true; document.addEventListener("keydown", toggleSettings); +function manualToggleSettings(){ + console.log("hi") + toolbarShowing = !toolbarShowing; + let tb = document.getElementById("toolbar"); + if (toolbarShowing) { + tb.style.display = "flex"; + } else { + tb.style.display = "none"; + } +} + function toggleSettings(e) { if (e.key == "p") { toolbarShowing = !toolbarShowing; diff --git a/docs/js/objects.js b/docs/js/objects.js index 2ec013c..1686ed9 100644 --- a/docs/js/objects.js +++ b/docs/js/objects.js @@ -181,17 +181,18 @@ class FloralPhyllo_Accident extends BaseShape { } } class Nodal_expanding extends BaseShape { - constructor(expand,points,line_width,colour1,colour2) { + constructor(expand,points,line_width,colour1,colour2,colour_change) { super(); this.expand = expand; this.points = points; this.line_width = line_width; this.colour1 = colour1; this.colour2 = colour2; + this.colour_change = colour_change } draw(step) { - let colour_change = 0.5 + let colour_change = this.colour_change/10 var angle = 360 / this.points * step var start_angle = angle; @@ -216,4 +217,128 @@ class Nodal_expanding extends BaseShape { } } +class Nodal extends BaseShape { + constructor(width,points,line_width,step,colour) { + super(); + this.width = width; + this.points = points; + this.line_width = line_width; + this.step = step; + this.colour = colour; + } +// Draw_nodal(300, 100, 31, rotation, "blue"); + draw(rotate) { + // console.log(rotate) + var angle = 360 / this.points * this.step + ctx.beginPath(); + var start_angle = angle; + var done = false; + var total_moves = 1; + ctx.moveTo(centerX + (Math.cos(rad(angle + rotate)) * this.width), centerY + (Math.sin(rad(angle + rotate)) * this.width)); + + while (done != true) { + if ((total_moves * this.step) % this.points != 0) { + total_moves++ + } + else { + total_moves++ + done = true + } + } + for (let z = 1; z <= total_moves; z++) { + ctx.lineTo(centerX + (Math.cos(rad(angle * z + rotate)) * this.width), centerY + (Math.sin(rad(angle * z + rotate)) * this.width)); + } + ctx.lineWidth = this.line_width;//try 1 + ctx.strokeStyle = this.colour; + ctx.stroke(); + + } +} +class Phyllotaxis extends BaseShape { + constructor(width,nMax,colour1,colour2) { + super(); + this.width = width; + this.nMax = nMax; + this.colour1 = colour1; + this.colour2 = colour2; + } +// Draw_nodal(300, 100, 31, rotation, "blue"); + draw(angle) { + + for (let n = 0; n < this.nMax; n += 1) { + const ncolour = LerpHex(this.colour1, this.colour2, n/this.nMax); + // const ncolour = LerpHex(this.colour1, this.colour2, (n/this.nMax)**2); + const a = n * (angle/1000)//137.5; + const r = this.width * Math.sqrt(n); + const x = r * Math.cos(a) + centerX; + const y = r * Math.sin(a) + centerY; + + ctx.beginPath(); + ctx.arc(x, y, 8, 0, 2 * Math.PI); + ctx.fillStyle = ncolour; + // ctx.fillStyle = colourToText(ncolour); + ctx.fill(); + // console.log(this.c) + } + + } +} +class SquareTwist_angle extends BaseShape { + constructor(expand,points,line_width,colour1,colour2,colour_change) { + super(); + this.expand = expand; + this.points = points; + this.line_width = line_width; + this.colour1 = colour1; + this.colour2 = colour2; + this.colour_change = colour_change + } + drawSquare(angle,size, colour) { + ctx.save(); + ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX)); + ctx.rotate(rad(angle + 180)); + ctx.beginPath(); + ctx.strokeStyle = colour; + ctx.rect(-size/2, -size/2, size, size); + ctx.stroke(); + ctx.restore(); + } + // DrawSquareTwist_angle(400,0,rotation,"red") + draw (width, rotation,innerRotation, colour){ + let out_angle = innerRotation; + let widthMultiplier = 1 / (2 * Math.sin(Math.PI / 180 * (130 - out_angle + 90 * Math.floor(out_angle / 90))))+0.5 + + for (let i = 0; i < 25; i++) { + drawSquare(innerRotation*i,width*widthMultiplier**i, colour) + } + + } +} +class rectangle_pattern1 extends BaseShape { + constructor(expand,points,line_width,colour1,colour2,colour_change) { + super(); + this.expand = expand; + this.points = points; + this.line_width = line_width; + this.colour1 = colour1; + this.colour2 = colour2; + this.colour_change = colour_change + } + drawSquare(angle,size, colour) { + ctx.save(); + ctx.translate(centerX, centerY)//-(Math.sin(rad(angle)) *centerX)); + ctx.rotate(rad(angle + 180)); + ctx.beginPath(); + ctx.strokeStyle = colour; + ctx.rect(-size/2, -size/2, size, size); + ctx.stroke(); + ctx.restore(); + } + // Draw_rectangle_pattern1(rotation, squares, 200, "blue"); + draw (rotation, squares, size, colour) { + for (let z = 0; z < 360; z += 360 / squares) { + drawSquare(z + rotation,size,colour); + } + } +}