technicalkiwi/animate
1
0
Fork 0
mirror of https://github.com/SamEyeBam/animate.git synced 2026-02-04 01:14:15 +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

13254
Tests/webGl/my-threejs-test/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

2
Tests/webGl/my-threejs-test/package.json
View File

@@ -11,7 +11,7 @@
"author": "",
"license": "ISC",
"devDependencies": {
"parcel": "^1.12.4"
"parcel": "^2.16.3"
},
"dependencies": {
"@parcel/transformer-glsl": "^2.12.0",

16
docs/config.json
View File

@@ -1,16 +0,0 @@
{
"PolyTwistColourWidth": [
{ "type": "range", "min": 3, "max": 10, "defaultValue": 5, "property": "sides" },
{ "type": "range", "min": 1, "max": 600, "defaultValue": 300, "property": "width" },
{ "type": "range", "min": 1, "max": 100, "defaultValue": 50, "property": "depth" },
{ "type": "range", "min": 0, "max": 360, "defaultValue": 180, "property": "rotation" },
{ "type": "color", "defaultValue": "#4287f5", "property": "colour1" },
{ "type": "color", "defaultValue": "#42f57b", "property": "colour2" }
],
"FloralPhyllo": [
{ "type": "range", "min": 1, "max": 600, "defaultValue": 300, "property": "width" },
{ "type": "range", "min": 1, "max": 100, "defaultValue": 50, "property": "depth" },
{ "type": "color", "defaultValue": "#4287f5", "property": "colour1" },
{ "type": "color", "defaultValue": "#4287f5", "property": "colour2" }
]
}

1
docs/index.html
View File

@@ -56,6 +56,7 @@
<script src="./js/shapes/FloralPhyllo_Accident.js" type="text/javascript"></script>
<script src="./js/shapes/Nodal_expanding.js" type="text/javascript"></script>
<script src="./js/shapes/Phyllotaxis.js" type="text/javascript"></script>
<script src="./js/shapes/PhylloCone.js" type="text/javascript"></script>
<script src="./js/shapes/SquareTwist_angle.js" type="text/javascript"></script>
<script src="./js/shapes/CircleExpand.js" type="text/javascript"></script>
<script src="./js/shapes/EyePrototype.js" type="text/javascript"></script>

2
docs/js/core/BaseShape.js
View File

@@ -43,7 +43,7 @@ class BaseShape {
constructor() {
this.controls = [];
this.controlManager = null;
this.speedMultiplier = 500;
this.speedMultiplier = 100;
}
/**

97
docs/js/presets.js
View File

@@ -5,59 +5,10 @@
* Each preset has: name, description, and data (scene export)
*/
const BUILT_IN_PRESETS = [
{
name: "Hypnotic Spiral",
description: "Classic spiral pattern with smooth colors",
builtIn: true,
data: {
version: 1,
layers: [
{
name: "Spiral1",
visible: true,
paused: false,
collapsed: true,
values: {
width: 400,
n: 6,
piv: 60,
step: 1,
line_width: 2
},
filters: {}
}
]
}
},
{
name: "Floral Bloom",
description: "Organic flower-like pattern",
builtIn: true,
data: {
version: 1,
layers: [
{
name: "FloralPhyllo",
visible: true,
paused: false,
collapsed: true,
values: {
width: 500,
n: 8,
piv: 45,
start: 0,
end: 180,
step: 1,
line_width: 1
},
filters: {}
}
]
}
},
{
name: "Poly Twist Rainbow",
description: "Colorful twisting polygon",
description: "hexagon bby",
builtIn: true,
data: {
version: 1,
@@ -92,15 +43,19 @@ const BUILT_IN_PRESETS = [
name: "Nodal_expanding",
visible: true,
paused: false,
collapsed: true,
collapsed: false,
values: {
width: 300,
nodeCount: 12,
expand: 2,
points: 550,
start: 0,
line_width: 4,
colour1: "#ffffff",
colour2: "#4a9eff"
colour2: "#4a9eff",
colour_change: 3,
speedMultiplier: 535
},
filters: {}
filters: {},
controlBounds: {}
}
]
}
@@ -160,7 +115,8 @@ const BUILT_IN_PRESETS = [
visible: true,
paused: false,
collapsed: true,
values: { width: 350, n: 4, piv: 90, step: 1, line_width: 2,
values: {
width: 350, n: 4, piv: 90, step: 1, line_width: 2,
colour: "#7734D3"
},
filters: {}
@@ -170,27 +126,30 @@ const BUILT_IN_PRESETS = [
}
},
{
name: "Phyllotaxis Garden",
description: "Nature-inspired spiral arrangement",
name: "PhylloCone Blob",
description: "Mystery orb",
builtIn: true,
data: {
version: 1,
layers: [
{
name: "Phyllotaxis",
name: "PhylloCone",
visible: true,
paused: false,
collapsed: true,
collapsed: false,
values: {
n: 300,
c: 8,
start: 137.5,
colour1: "#ff6b6b",
colour2: "#4ecdc4",
dotSize: 6,
mode: "spiral"
start: 0,
spiralProngs: 4,
width_10: 12,
iterations: 437,
distance: 1,
line_width: 2,
colour1: "#2D81FC",
colour2: "#FC0362",
speedMultiplier: 100
},
filters: {}
filters: {},
controlBounds: {}
}
]
}

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);