Wild new animation
This commit is contained in:
parent
7ef6afb922
commit
095c16b01d
Binary file not shown.
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
After Width: | Height: | Size: 158 KiB |
Binary file not shown.
After Width: | Height: | Size: 266 KiB |
|
@ -12,6 +12,7 @@
|
|||
<div id="toolbar">
|
||||
<br>
|
||||
<select id="shape-selector">
|
||||
<option value="NewWave">NewWave</option>
|
||||
<option value="EyePrototype">EyePrototype</option>
|
||||
<option value="Nodal_expanding">Nodal_expanding</option>
|
||||
<option value="MaryFace">MaryFace</option>
|
||||
|
|
|
@ -92,12 +92,19 @@ async function fetchConfig(className) {
|
|||
{ type: "range", min: -180, max: 180, defaultValue: 18, property: "rotate2" },
|
||||
{ type: "range", min: 0, max: 400, defaultValue: 160, property: "width2" },
|
||||
],
|
||||
NewWave: [
|
||||
{ type: "range", min: 300, max: 600, 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" },
|
||||
{ type: "range", min: 100, max: 1000, defaultValue: 100, property: "limiter" },
|
||||
],
|
||||
};
|
||||
return config[className];
|
||||
}
|
||||
|
||||
function addControl(item, instance) {
|
||||
console.log(item);
|
||||
// console.log(item);
|
||||
let parentDiv = document.getElementById("custom");
|
||||
|
||||
let title = document.createElement("p");
|
||||
|
|
|
@ -18,6 +18,7 @@ render_clear();
|
|||
let drawObj = null;
|
||||
function createInstance(className, args) {
|
||||
const classMap = {
|
||||
NewWave: NewWave,
|
||||
PolyTwistColourWidth: PolyTwistColourWidth,
|
||||
FloralPhyllo: FloralPhyllo,
|
||||
Spiral1: Spiral1,
|
||||
|
|
|
@ -290,7 +290,7 @@ class Phyllotaxis extends BaseShape {
|
|||
draw(rotation) {
|
||||
rotation *= (this.speedMultiplier / 300)
|
||||
rotation += this.start
|
||||
const sizeMultiplier = this.nMax/(5-3)
|
||||
const sizeMultiplier = this.nMax / (5 - 3)
|
||||
if (this.wave === 1) {
|
||||
this.drawWave(rotation)
|
||||
}
|
||||
|
@ -307,7 +307,7 @@ class Phyllotaxis extends BaseShape {
|
|||
const y = r * Math.sin(a) + centerY;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, (n/sizeMultiplier)+3, 0, 2 * Math.PI);
|
||||
ctx.arc(x, y, (n / sizeMultiplier) + 3, 0, 2 * Math.PI);
|
||||
ctx.fillStyle = ncolour;
|
||||
// ctx.fillStyle = colourToText(ncolour);
|
||||
ctx.fill();
|
||||
|
@ -634,4 +634,41 @@ class MaryFace extends BaseShape {
|
|||
this.eye3.draw(rotation);
|
||||
}
|
||||
}
|
||||
class NewWave extends BaseShape {
|
||||
constructor(width,sides,step,lineWidth,limiter) {
|
||||
super();
|
||||
this.width = width
|
||||
this.sides = sides;
|
||||
this.step = step;
|
||||
this.lineWidth = lineWidth;
|
||||
this.limiter = limiter;
|
||||
}
|
||||
|
||||
draw(rotation) {
|
||||
rotation *= this.speedMultiplier/400
|
||||
ctx.lineWidth = this.lineWidth
|
||||
for (let j = 0; j < this.sides; j++) {
|
||||
const radRotation = rad(360/this.sides*j)
|
||||
const inverter = 1-(j%2)*2
|
||||
let lastX = centerX
|
||||
let lastY = centerY
|
||||
for (let i = 0; i < this.width; i += this.step) {
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(lastX, lastY);
|
||||
ctx.strokeStyle = colourToText(lerpRGB([255,51,170],[51,170,255],i/this.width))
|
||||
const x = i
|
||||
const y = (Math.sin(-i*inverter / 30 + rotation*inverter) * i/(this.limiter/100))
|
||||
|
||||
const xRotated = x * Math.cos(radRotation) - y * Math.sin(radRotation)
|
||||
const yRotated = x * Math.sin(radRotation) + y * Math.cos(radRotation)
|
||||
lastX= centerX + xRotated;
|
||||
lastY= centerY + yRotated;
|
||||
ctx.lineTo(centerX + xRotated, centerY + yRotated);
|
||||
ctx.stroke();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue