technicalkiwi/animate
1
0
Fork 0
mirror of https://github.com/SamEyeBam/animate.git synced 2025-12-14 17:58:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add spiralProngs to Phyllotaxis and update config

Browse Source 
Introduces a new 'spiralProngs' property to the Phyllotaxis class and its configuration, allowing control over spiral prong count. Also expands the 'width' range for NewWave in the config. Updates the drawSpiral method to use spiralProngs for angle calculation.
This commit is contained in:
Sam
2025-09-01 18:42:23 +12:00
parent 700f984314
commit 1fe4d3763e
2 changed files with 15 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/js/helper.js
View File

@@ -50,6 +50,7 @@ async function fetchConfig(className) {
{ type: "range", min: 0, max: 3141, defaultValue: 0, property: "start" },
{ type: "range", min: 1, max: 10000, defaultValue: 300, property: "nMax" },
{ type: "range", min: 0, max: 2, defaultValue: 0, property: "wave" },
{ type: "range", min: 1, max: 12, defaultValue: 2, property: "spiralProngs" },
{ type: "color", defaultValue: "#2D81FC", property: "colour1" },
{ type: "color", defaultValue: "#FC0362", property: "colour2" },
],
@@ -98,7 +99,7 @@ async function fetchConfig(className) {
{ type: "range", min: 8000, max: 2000000, defaultValue: 2000000, property: "milestone" },
],
NewWave: [
{ type: "range", min: 300, max: 600, defaultValue: 342, property: "width" },
{ type: "range", min: 300, max: 1600, defaultValue: 342, property: "width" },
{ type: "range", min: 2, max: 40, defaultValue: 4, property: "sides" },
{ type: "range", min: 1, max: 100, defaultValue: 1, property: "step" },
{ type: "range", min: 1, max: 10, defaultValue: 4, property: "lineWidth" },

21
docs/js/objects.js
View File

@@ -310,7 +310,7 @@ class Nodal_expanding extends BaseShape {
}
}
class Phyllotaxis extends BaseShape {
constructor(width, size, sizeMin, start, nMax, wave, colour1, colour2) {
constructor(width, size, sizeMin, start, nMax, wave, spiralProngs, colour1, colour2) {
super();
this.width = width;
this.size = size;
@@ -318,6 +318,7 @@ class Phyllotaxis extends BaseShape {
this.start = start;
this.nMax = nMax;
this.wave = wave;
this.spiralProngs = spiralProngs;
this.colour1 = colour1;
this.colour2 = colour2;
}
@@ -343,6 +344,7 @@ class Phyllotaxis extends BaseShape {
ctx.fill();
}
}
drawSpiral(angle) {
angle /= 5000
const startColor = [45, 129, 252];
@@ -350,27 +352,30 @@ class Phyllotaxis extends BaseShape {
const distanceMultiplier = 2;
const maxIterations = 1000;
ctx.beginPath();
ctx.moveTo(centerX, centerY); // Start at the center
for (let n = 0; n < maxIterations; n++) {
const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
const nAngle = n * angle + Math.sin(angle * n * 2);
const nAngle = n * angle + Math.sin(angle * n * this.spiralProngs);
const radius = distanceMultiplier * n;
const xCoord = radius * Math.cos(nAngle) + centerX;
const yCoord = radius * Math.sin(nAngle) + centerY;
ctx.beginPath();
ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
ctx.fillStyle = colourToText(nColor);
ctx.fill();
// ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
ctx.lineTo(xCoord, yCoord);
// ctx.fillStyle = colourToText(nColor);
// ctx.fill();
}
ctx.stroke();
}
// Draw_nodal(300, 100, 31, rotation, "blue");
draw(rotation) {
rotation *= (this.speedMultiplier / 300)
rotation += this.start
const sizeMultiplier = this.nMax / this.size + (5 - 3)
const sizeMultiplier = this.nMax / this.size + (5 - 3)
if (this.wave === 1) {
this.drawWave(rotation)
}