diff --git a/Catalogue/floralPhyllo_accident.html b/Catalogue/floralPhyllo_accident.html index 44889c2..ce5b433 100644 --- a/Catalogue/floralPhyllo_accident.html +++ b/Catalogue/floralPhyllo_accident.html @@ -1,213 +1,207 @@ - + - - - Your browser does not support the HTML5 canvas tag. + + + Your browser does not support the HTML5 canvas tag. - - - \ No newline at end of file + + diff --git a/docs/index.html b/docs/index.html index e384f75..227d767 100644 --- a/docs/index.html +++ b/docs/index.html @@ -13,7 +13,10 @@

diff --git a/docs/js/helper.js b/docs/js/helper.js index 91e81f0..cb25714 100644 --- a/docs/js/helper.js +++ b/docs/js/helper.js @@ -8,7 +8,7 @@ async function fetchConfig(className) { { type: "range", min: -180, - max: 180 , + max: 180, defaultValue: -90, property: "rotation", }, @@ -22,10 +22,28 @@ async function fetchConfig(className) { { type: "color", defaultValue: "#4287f5", property: "colour2" }, ], Spiral1: [ - { type: "range", min: 1, max: 50, defaultValue: 20, property: "sides" }, + { 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" }, ], + FloralAccident: [ + { 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" }, + ], + FloralPhyllo_Accident: [ + { type: "range", min: 1, max: 50, defaultValue: 20, property: "sides" }, + { type: "range", min: 1, max: 600, defaultValue: 240, property: "width" }, + { type: "color", defaultValue: "#2D81FC", property: "colour1" }, + { type: "color", defaultValue: "#FC0362", property: "colour2" }, + ], + Nodal_expanding: [ + { type: "range", min: 1, max: 100, defaultValue: 5, property: "expand" }, + { type: "range", min: 1, max: 100000, defaultValue: 100000, property: "points" }, + { type: "range", min: 1, max: 10, defaultValue: 3, property: "line_width" }, + { type: "color", defaultValue: "#2D81FC", property: "colour1" }, + { type: "color", defaultValue: "#FC0362", property: "colour2" }, + ], }; return config[className]; } @@ -110,6 +128,66 @@ function drawEyelid(width, x1, y1, colour) { ctx.stroke(); } +function drawEyelidAccident(x1, y1) { + let leafWidth = 120; + let leafHeight = 60; + x1 -= centerX; + y1 -= centerY; + let angle = Math.atan(y1 / x1); + // if(angle >=Math.PI){ + // angle -=Math.PI + // console.log("greater called") + // } + angle = Math.abs(angle); + let x2Old = 0 + leafWidth; + let y2Old = 0; + + let x3Old = 0 + leafWidth / 2; + let y3Old = 0 + leafHeight / 2; + + let x4Old = 0 + leafWidth / 2; + let y4Old = 0 - leafHeight / 2; + + let x2 = x2Old * Math.cos(angle) - y2Old * Math.sin(angle); + let y2 = x2Old * Math.sin(angle) + y2Old * Math.cos(angle); + + let x3 = x3Old * Math.cos(angle) - y3Old * Math.sin(angle); + let y3 = x3Old * Math.sin(angle) + y3Old * Math.cos(angle); + + let x4 = x4Old * Math.cos(angle) - y4Old * Math.sin(angle); + let y4 = x4Old * Math.sin(angle) + y4Old * Math.cos(angle); + + let oldx1 = x1; + let oldy1 = y1; + + x1 += centerX; // +x2/2 + y1 += centerY; // +x2/2 + x2 += x1; + y2 += y1; + x3 += x1; + y3 += y1; + x4 += x1; + y4 += y1; + ctx.beginPath(); + ctx.moveTo(x1, y1); + ctx.quadraticCurveTo(x3, y3, x2, y2); + + ctx.moveTo(x1, y1); + ctx.quadraticCurveTo(x4, y4, x2, y2); + ctx.fillStyle = "black"; + ctx.fill(); + + ctx.lineWidth = 1; + ctx.beginPath(); + ctx.moveTo(x1, y1); + ctx.quadraticCurveTo(x3, y3, x2, y2); + + ctx.moveTo(x1, y1); + ctx.quadraticCurveTo(x4, y4, x2, y2); + ctx.strokeStyle = "orange"; + ctx.stroke(); +} + function DrawPolygon(sides, width, rotation, colour) { ctx.beginPath(); ctx.moveTo( diff --git a/docs/js/index.js b/docs/js/index.js index 9a230ff..ee1d449 100644 --- a/docs/js/index.js +++ b/docs/js/index.js @@ -21,6 +21,9 @@ function createInstance(className, args) { PolyTwistColourWidth: PolyTwistColourWidth, FloralPhyllo: FloralPhyllo, Spiral1: Spiral1, + FloralAccident: FloralAccident, + FloralPhyllo_Accident: FloralPhyllo_Accident, + Nodal_expanding: Nodal_expanding, // Add more class constructors here as needed }; diff --git a/docs/js/objects.js b/docs/js/objects.js index f725c99..2ec013c 100644 --- a/docs/js/objects.js +++ b/docs/js/objects.js @@ -120,3 +120,100 @@ class Spiral1 extends BaseShape { } } +class FloralAccident 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 - (stt - end + rad(rotation)) / 2, end + 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, end - (end - stt - rad(rotation)) / 2 + rad(n), 0); + ctx.strokeStyle = this.colour; + ctx.stroke(); + + + stt = end + -(rad(rot - piv)) //+rad(30); + } + + } +} +class FloralPhyllo_Accident extends BaseShape { + constructor(sides,width, colour1,colour2) { + super(); + this.sides = sides; + this.width = width; + this.colour1 = colour1; + this.colour2 = colour2; + } + + draw(angle) { + + var c = 24; //something to do with width. but not width + + for (let n = 0; n < 300; n += 1) { + let ncolour = LerpHex(this.colour1, this.colour2, Math.cos(rad(n / 2))); + let a = n * (angle/1000+100); //137.5; + let r = c * Math.sqrt(n); + let x = r * Math.cos(a) + centerX; + let y = r * Math.sin(a) + centerY; + + drawEyelidAccident(x, y); + + } + } +} +class Nodal_expanding extends BaseShape { + constructor(expand,points,line_width,colour1,colour2) { + super(); + this.expand = expand; + this.points = points; + this.line_width = line_width; + this.colour1 = colour1; + this.colour2 = colour2; + } + + draw(step) { + let colour_change = 0.5 + var angle = 360 / this.points * step + + var start_angle = angle; + var done = false; + var total_moves = 1; + var length = this.expand; + + for (let z = 1; z <= 100; z++) { //why specifically 2500 + ctx.beginPath(); + let ncolour = LerpHex(this.colour1, this.colour2, Math.cos(rad(z * colour_change))); + + ctx.moveTo(centerX + (Math.cos(rad(angle * (z - 1) + 0)) * (length - this.expand)), centerY + (Math.sin(rad(angle * (z - 1) + 0)) * (length - this.expand))); + ctx.lineTo(centerX + (Math.cos(rad(angle * z + 0)) * length), centerY + (Math.sin(rad(angle * z + 0)) * length)); + length += this.expand; + ctx.lineWidth = this.line_width;//try 1 + ctx.strokeStyle = ncolour; + // ctx.strokeStyle = colourToText(ncolour); + console.log(ncolour) + ctx.stroke(); + } + + + } +} +