technicalkiwi/animate
1
0
Fork 0
mirror of https://github.com/SamEyeBam/animate.git synced 2026-02-04 09:20:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

PhylloCone seperated

Browse Source
This commit is contained in:
Sam
2025-12-28 12:08:30 +13:00
parent 63c4069f98
commit 2ac6cd2835
8 changed files with 1263 additions and 12284 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
docs/js/shapes/PhylloCone.js Normal file
View File

@@ -0,0 +1,52 @@
/**
* PhylloCone - Spiral cone pattern based on phyllotaxis
*/
class PhylloCone extends BaseShape {
static config = [
{ type: 'range', min: 0, max: 3141, defaultValue: 0, property: 'start' },
{ type: 'range', min: 1, max: 12, defaultValue: 2, property: 'spiralProngs' },
{ type: 'range', min: 1, max: 50, defaultValue: 10, property: 'width_10' },
{ type: 'range', min: 1, max: 2000, defaultValue: 1000, property: 'iterations' },
{ type: 'range', min: 1, max: 10, defaultValue: 2, property: 'distance' },
{ type: 'range', min: 1, max: 10, defaultValue: 2, property: 'line_width' },
{ type: 'color', defaultValue: '#2D81FC', property: 'colour1' },
{ type: 'color', defaultValue: '#FC0362', property: 'colour2' },
];
constructor(start, spiralProngs, width_10, iterations, distance,line_width, colour1, colour2) {
super();
this.start = start;
this.spiralProngs = spiralProngs;
this.width_10 = width_10;
this.iterations = iterations;
this.distance = distance;
this.line_width = line_width;
this.colour1 = colour1;
this.colour2 = colour2;
}
draw(elapsed) {
this.updateFilters(elapsed);
const rotation = elapsed * (this.speedMultiplier / 100) + this.start;
const angle = rotation / 1000;
const distanceMultiplier = this.distance;
const maxIterations = this.iterations;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
for (let n = 0; n < maxIterations; n++) {
const nAngle = n * angle + Math.sin(angle * n * this.spiralProngs)*(this.width_10/10);
const radius = distanceMultiplier * n;
const xCoord = radius * Math.cos(nAngle) + centerX;
const yCoord = radius * Math.sin(nAngle) + centerY;
ctx.lineTo(xCoord, yCoord);
}
ctx.lineWidth = this.line_width;
ctx.strokeStyle = this.colour1;
ctx.stroke();
console.log(this.line_width);
}
}
shapeRegistry.register('PhylloCone', PhylloCone);

43
docs/js/shapes/Phyllotaxis.js
View File

@@ -1,5 +1,5 @@
/**
* Phyllotaxis - Classic phyllotaxis pattern with multiple wave modes
* Phyllotaxis - Classic phyllotaxis pattern with optional giggle effect
*/
class Phyllotaxis extends BaseShape {
static config = [
@@ -8,73 +8,48 @@ class Phyllotaxis extends BaseShape {
{ type: 'range', min: 1, max: 40, defaultValue: 4, property: 'sizeMin' },
{ 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: 'checkbox', defaultValue: false, property: 'giggle' },
{ type: 'color', defaultValue: '#2D81FC', property: 'colour1' },
{ type: 'color', defaultValue: '#FC0362', property: 'colour2' },
];
constructor(width, size, sizeMin, start, nMax, wave, spiralProngs, colour1, colour2) {
constructor(width, size, sizeMin, start, nMax, giggle, colour1, colour2) {
super();
this.width = width;
this.size = size;
this.sizeMin = sizeMin;
this.start = start;
this.nMax = nMax;
this.wave = wave;
this.spiralProngs = spiralProngs;
this.giggle = giggle;
this.colour1 = colour1;
this.colour2 = colour2;
}
drawWave(angle) {
drawGiggle(angle) {
angle /= 1000;
const startColor = [45, 129, 252];
const endColor = [252, 3, 98];
const distanceMultiplier = 3;
const maxIterations = this.nMax;
for (let n = 0; n < maxIterations; n++) {
ctx.beginPath();
const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
const ncolour = LerpHex(this.colour1, this.colour2, n / this.nMax);
const nAngle = n * angle + Math.sin(rad(n * 1 + angle * 40000)) / 2;
const radius = distanceMultiplier * n;
const xCoord = radius * Math.cos(nAngle) + centerX;
const yCoord = radius * Math.sin(nAngle) + centerY;
ctx.arc(xCoord, yCoord, this.size, 0, 2 * Math.PI);
ctx.fillStyle = colourToText(nColor);
ctx.fillStyle = ncolour;
ctx.fill();
}
}
drawSpiral(angle) {
angle /= 5000;
const startColor = [45, 129, 252];
const endColor = [252, 3, 98];
const distanceMultiplier = 2;
const maxIterations = 1000;
ctx.beginPath();
ctx.moveTo(centerX, centerY);
for (let n = 0; n < maxIterations; n++) {
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.lineTo(xCoord, yCoord);
}
ctx.stroke();
}
draw(elapsed) {
this.updateFilters(elapsed);
const rotation = elapsed * (this.speedMultiplier / 300) + this.start;
const sizeMultiplier = this.nMax / this.size + (5 - 3);
if (this.wave === 1) {
this.drawWave(rotation);
} else if (this.wave === 2) {
this.drawSpiral(rotation);
if (this.giggle) {
this.drawGiggle(rotation);
} else {
for (let n = 0; n < this.nMax; n += 1) {
const ncolour = LerpHex(this.colour1, this.colour2, n / this.nMax);