technicalkiwi/animate
1
0
Fork 0
mirror of https://github.com/SamEyeBam/animate.git synced 2025-09-28 06:55:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

Phyllotaxis fix

Browse Source
This commit is contained in:
Sam
2025-08-06 07:49:08 +12:00
parent 55a9f31464
commit 700f984314
2 changed files with 16 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/js/helper.js
View File

@@ -45,6 +45,8 @@ async function fetchConfig(className) {
], ],
Phyllotaxis: [ Phyllotaxis: [
{ type: "range", min: 1, max: 40, defaultValue: 24, property: "width" }, { type: "range", min: 1, max: 40, defaultValue: 24, property: "width" },
{ type: "range", min: 1, max: 40, defaultValue: 10, property: "size" },
{ type: "range", min: 1, max: 40, defaultValue: 4, property: "sizeMin" },
{ type: "range", min: 0, max: 3141, defaultValue: 0, property: "start" }, { type: "range", min: 0, max: 3141, defaultValue: 0, property: "start" },
{ type: "range", min: 1, max: 10000, defaultValue: 300, property: "nMax" }, { type: "range", min: 1, max: 10000, defaultValue: 300, property: "nMax" },
{ type: "range", min: 0, max: 2, defaultValue: 0, property: "wave" }, { type: "range", min: 0, max: 2, defaultValue: 0, property: "wave" },

12
docs/js/objects.js
View File

@@ -310,9 +310,11 @@ class Nodal_expanding extends BaseShape {
} }
} }
class Phyllotaxis extends BaseShape { class Phyllotaxis extends BaseShape {
constructor(width, start, nMax, wave, colour1, colour2) { constructor(width, size, sizeMin, start, nMax, wave, colour1, colour2) {
super(); super();
this.width = width; this.width = width;
this.size = size;
this.sizeMin = sizeMin;
this.start = start; this.start = start;
this.nMax = nMax; this.nMax = nMax;
this.wave = wave; this.wave = wave;
@@ -324,7 +326,7 @@ class Phyllotaxis extends BaseShape {
const startColor = [45, 129, 252]; const startColor = [45, 129, 252];
const endColor = [252, 3, 98]; const endColor = [252, 3, 98];
const distanceMultiplier = 3; const distanceMultiplier = 3;
const maxIterations = 200; const maxIterations = this.nMax;
// angle=0; // angle=0;
for (let n = 0; n < maxIterations; n++) { for (let n = 0; n < maxIterations; n++) {
ctx.beginPath(); ctx.beginPath();
@@ -336,7 +338,7 @@ class Phyllotaxis extends BaseShape {
const radius = distanceMultiplier * n; const radius = distanceMultiplier * n;
const xCoord = radius * Math.cos(nAngle) + centerX; const xCoord = radius * Math.cos(nAngle) + centerX;
const yCoord = radius * Math.sin(nAngle) + centerY; const yCoord = radius * Math.sin(nAngle) + centerY;
ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI); ctx.arc(xCoord, yCoord, this.size, 0, 2 * Math.PI);
ctx.fillStyle = colourToText(nColor); ctx.fillStyle = colourToText(nColor);
ctx.fill(); ctx.fill();
} }
@@ -368,7 +370,7 @@ class Phyllotaxis extends BaseShape {
draw(rotation) { draw(rotation) {
rotation *= (this.speedMultiplier / 300) rotation *= (this.speedMultiplier / 300)
rotation += this.start rotation += this.start
const sizeMultiplier = this.nMax / (5 - 3) const sizeMultiplier = this.nMax / this.size + (5 - 3)
if (this.wave === 1) { if (this.wave === 1) {
this.drawWave(rotation) this.drawWave(rotation)
} }
@@ -385,7 +387,7 @@ class Phyllotaxis extends BaseShape {
const y = r * Math.sin(a) + centerY; const y = r * Math.sin(a) + centerY;
ctx.beginPath(); ctx.beginPath();
ctx.arc(x, y, (n / sizeMultiplier) + 3, 0, 2 * Math.PI); ctx.arc(x, y, (n / sizeMultiplier) + this.sizeMin, 0, 2 * Math.PI);
ctx.fillStyle = ncolour; ctx.fillStyle = ncolour;
// ctx.fillStyle = colourToText(ncolour); // ctx.fillStyle = colourToText(ncolour);
ctx.fill(); ctx.fill();