technicalkiwi
/
animate
mirror of https://github.com/SamEyeBam/animate.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Marys face done, added params for others

This commit is contained in:
Sam 2023-05-24 21:35:53 +12:00
parent 0716d1286e
commit 1f924163dd
7 changed files with 169 additions and 99 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Insperation/Screenshot 2023-05-23 230516.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 138 KiB

5
docs/index.html
View File

@ -12,16 +12,15 @@
<div id="toolbar">
<br>
<select id="shape-selector">
<option value="Nodal_expanding">Nodal_expanding</option>
<option value="MaryFace">MaryFace</option>
<option value="CircleExpand">CircleExpand</option>
<option value="EyePrototype">EyePrototype</option>
<option value="CircleExpand">CircleExpand</option>
<option value="PolyTwistColourWidth">PolyTwistColourWidth</option>
<option value="FloralPhyllo">FloralPhyllo</option>
<option value="FloralPhyllo_Accident">FloralPhyllo_Accident</option>
<option value="Spiral1">Spiral1</option>
<option value="FloralAccident">FloralAccident</option>
<option value="Nodal_expanding">Nodal_expanding</option>
<option value="Nodal">Nodal</option>
<option value="Phyllotaxis">Phyllotaxis</option>
<option value="SquareTwist_angle">SquareTwist_angle</option>
<option value="rectangle_pattern1">rectangle_pattern1</option>

68
docs/js/helper.js
View File

@ -13,7 +13,8 @@ async function fetchConfig(className) {
],
FloralPhyllo: [
{ type: "range", min: 1, max: 600, defaultValue: 300, property: "width" },
{ type: "range", min: 1, max: 100, defaultValue: 50, property: "depth" },
{ type: "range", min: 1, max: 300, defaultValue: 150, property: "depth" },
{ type: "range", min: 0, max: 3141, defaultValue: 0, property: "start" },
{ type: "color", defaultValue: "#4287f5", property: "colour1" },
{ type: "color", defaultValue: "#FC0362", property: "colour2" },
],
@ -35,22 +36,18 @@ async function fetchConfig(className) {
],
Nodal_expanding: [
{ type: "range", min: 1, max: 100, defaultValue: 5, property: "expand" },
{ type: "range", min: 1, max: 100000, defaultValue: 100000, property: "points" },
{ type: "range", min: 1, max: 10, defaultValue: 3, property: "line_width" },
{ type: "range", min: 1, max: 1000, defaultValue: 150, property: "points" },
{ type: "range", min: 1, max: 360, defaultValue: 0, property: "start" },
{ type: "range", min: 1, max: 10, defaultValue: 6, property: "line_width" },
{ type: "color", defaultValue: "#2D81FC", property: "colour1" },
{ type: "color", defaultValue: "#FC0362", property: "colour2" },
{ type: "range", min: 0, max: 10, defaultValue: 5, property: "colour_change" },
],
Nodal: [
{ type: "range", min: 1, max: 1000, defaultValue: 400, property: "width" },
{ type: "range", min: 1, max: 20, defaultValue: 10, property: "points" },
{ type: "range", min: 1, max: 10, defaultValue: 3, property: "line_width" },
{ type: "range", min: 1, max: 20, defaultValue: 1, property: "step" },
{ type: "color", defaultValue: "#2D81FC", property: "colour" },
],
Phyllotaxis: [
{ type: "range", min: 1, max: 40, defaultValue: 24, property: "width" },
{ type: "range", min: 0, max: 3141, defaultValue: 0, property: "start" },
{ type: "range", min: 1, max: 1000, defaultValue: 300, property: "nMax" },
{ type: "range", min: 0, max: 2, defaultValue: 0, property: "wave" },
{ type: "color", defaultValue: "#2D81FC", property: "colour1" },
{ type: "color", defaultValue: "#FC0362", property: "colour2" },
],
@ -89,13 +86,13 @@ async function fetchConfig(className) {
{ type: "color", defaultValue: "#00fffb", property: "colour2" },
],
MaryFace: [
{ type: "range", min: -400, max: 400, defaultValue: -100, property: "x1" },
{ type: "range", min: -400, max: 400, defaultValue: -150, property: "y1" },
{ type: "range", min: -180, max: 180, defaultValue: 0, property: "rotate1" },
{ type: "range", min: -400, max: 400, defaultValue: -110, property: "x1" },
{ type: "range", min: -400, max: 400, defaultValue: -140, property: "y1" },
{ type: "range", min: -180, max: 180, defaultValue: 18, property: "rotate1" },
{ type: "range", min: 0, max: 400, defaultValue: 160, property: "width1" },
{ type: "range", min: -400, max: 400, defaultValue: 200, property: "x2" },
{ type: "range", min: -400, max: 400, defaultValue: 195, property: "x2" },
{ type: "range", min: -400, max: 400, defaultValue: -30, property: "y2" },
{ type: "range", min: -180, max: 180, defaultValue: 0, property: "rotate2" },
{ type: "range", min: -180, max: 180, defaultValue: 18, property: "rotate2" },
{ type: "range", min: 0, max: 400, defaultValue: 160, property: "width2" },
],
};
@ -242,7 +239,7 @@ function drawEyelidAccident(x1, y1) {
ctx.stroke();
}
function DrawPolygon(sides, width, rotation, colour,line_width) {
function DrawPolygon(sides, width, rotation, colour, line_width) {
ctx.beginPath();
ctx.moveTo(
centerX + width * Math.cos((rotation * Math.PI) / 180),
@ -272,8 +269,8 @@ function colourToText(colour) {
}
function waveNormal(x,max){
let val = Math.sin((x/max)* Math.PI*2-max*(Math.PI/(max*2)))/2+0.5
function waveNormal(x, max) {
let val = Math.sin((x / max) * Math.PI * 2 - max * (Math.PI / (max * 2))) / 2 + 0.5
return val
}
@ -306,6 +303,13 @@ function LerpRGB(a, b, t) {
return newColor;
}
function lerpRGB(a, b, t) {
const result = [0, 0, 0];
for (let i = 0; i < 3; i++) {
result[i] = (1 - t) * a[i] + t * b[i];
}
return result;
}
function drawCenter(width) {
@ -330,3 +334,31 @@ function render_clear() {
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function rotatePointTmp(x, y, centerXX, centerYY, rotation) {
let xFromC = x - centerXX;
let yFromC = y - centerYY;
let d = (xFromC ** 2 + yFromC ** 2) ** 0.5
// let orgAngle = Math.atan2(yFromC/xFromC)
let orgAngle = Math.atan2(xFromC, yFromC)
let tmp = Math.cos(rad(orgAngle - rotation)) * d
// console.log(Math.cos((-90)*(Math.PI/180)))
console.log(orgAngle)
console.log(rad(rotation))
console.log(Math.cos(orgAngle - rad(rotation)) * d)
console.log(d)
// console.log(d)
let newPointX = Math.cos(orgAngle - rad(rotation+90)) * d + centerXX;
let newPointY = Math.sin(orgAngle - rad(rotation+90)) * d + centerYY;
return [newPointX, newPointY]
}
function rotatePoint(x,y,rotation){
let nCos = Math.cos(rad(rotation))
// console.log(nCos*(180/Math.PI))
// console.log(rad(rotation))
let nSin = Math.sin(rad(rotation))
console.log(nSin)
let newX = x*nCos - y*nSin
let newY = y*nCos + x*nSin
return [newX,newY]
}

1
docs/js/index.js
View File

@ -24,7 +24,6 @@ function createInstance(className, args) {
FloralAccident: FloralAccident,
FloralPhyllo_Accident: FloralPhyllo_Accident,
Nodal_expanding: Nodal_expanding,
Nodal: Nodal,
Phyllotaxis:Phyllotaxis,
SquareTwist_angle:SquareTwist_angle,
rectangle_pattern1:rectangle_pattern1,

190
docs/js/objects.js
View File

@ -69,22 +69,24 @@ class PolyTwistColourWidth extends BaseShape {
}
}
class FloralPhyllo extends BaseShape {
constructor(width, depth, colour1, colour2) {
constructor(width, depth, start, colour1, colour2) {
super();
this.width = width;
this.depth = depth;
this.start = start;
this.colour1 = colour1;
this.colour2 = colour2;
this.speedMultiplier = 500;
}
draw(rotation) {
rotation *= (this.speedMultiplier / 100)
rotation *= (this.speedMultiplier / 500)
rotation += this.start
// var c = 24; //something to do with width. but not width
var c = 1; //something to do with width. but not width
//dont make larger than 270 unless altering the number of colours in lerpedColours
let max = 200;
for (let n = 200; n > 0; n -= 1) {
let max = this.depth;
for (let n = this.depth; n > 0; n -= 1) {
let colVal = waveNormal(n, max)
let ncolour = LerpHex(this.colour1, this.colour2, n / max);
const a = n * rotation / 1000; //137.5;
@ -195,10 +197,11 @@ class FloralPhyllo_Accident extends BaseShape {
}
}
class Nodal_expanding extends BaseShape {
constructor(expand, points, line_width, colour1, colour2, colour_change) {
constructor(expand, points, start, line_width, colour1, colour2, colour_change) {
super();
this.expand = expand;
this.points = points;
this.start = start;
this.line_width = line_width;
this.colour1 = colour1;
this.colour2 = colour2;
@ -206,18 +209,18 @@ class Nodal_expanding extends BaseShape {
}
draw(rotation) {
rotation *= (this.speedMultiplier / 100)
rotation *= (this.speedMultiplier / 1000)
let colour_change = this.colour_change / 8
var angle = 360 / this.points * rotation
var angle = (360 / 3000 * rotation) + this.start //2000 controls speed
var start_angle = angle;
var done = false;
var total_moves = 1;
var length = this.expand;
for (let z = 1; z <= 100; z++) { //why specifically 2500
for (let z = 1; z <= this.points; z++) { //why specifically 2500
ctx.beginPath();
let ncolour = LerpHex(this.colour1, this.colour2, Math.cos(rad(z * colour_change)));
let ncolour = LerpHex(this.colour1, this.colour2, z / this.points);
ctx.moveTo(centerX + (Math.cos(rad(angle * (z - 1) + 0)) * (length - this.expand)), centerY + (Math.sin(rad(angle * (z - 1) + 0)) * (length - this.expand)));
ctx.lineTo(centerX + (Math.cos(rad(angle * z + 0)) * length), centerY + (Math.sin(rad(angle * z + 0)) * length));
@ -233,71 +236,87 @@ class Nodal_expanding extends BaseShape {
}
}
class Nodal extends BaseShape {
constructor(width, points, line_width, step, colour) {
super();
this.width = width;
this.points = points;
this.line_width = line_width;
this.step = step;
this.colour = colour;
}
// Draw_nodal(300, 100, 31, rotation, "blue");
draw(rotation) {
rotation *= (this.speedMultiplier / 100)
// console.log(rotate)
var angle = 360 / this.points * this.step
ctx.beginPath();
var start_angle = angle;
var done = false;
var total_moves = 1;
ctx.moveTo(centerX + (Math.cos(rad(angle + rotation)) * this.width), centerY + (Math.sin(rad(angle + rotation)) * this.width));
while (done != true) {
if ((total_moves * this.step) % this.points != 0) {
total_moves++
}
else {
total_moves++
done = true
}
}
for (let z = 1; z <= total_moves; z++) {
ctx.lineTo(centerX + (Math.cos(rad(angle * z + rotation)) * this.width), centerY + (Math.sin(rad(angle * z + rotation)) * this.width));
}
ctx.lineWidth = this.line_width;//try 1
ctx.strokeStyle = this.colour;
ctx.stroke();
}
}
class Phyllotaxis extends BaseShape {
constructor(width, nMax, colour1, colour2) {
constructor(width, start, nMax, wave, colour1, colour2) {
super();
this.width = width;
this.start = start;
this.nMax = nMax;
this.wave = wave;
this.colour1 = colour1;
this.colour2 = colour2;
}
// Draw_nodal(300, 100, 31, rotation, "blue");
draw(rotation) {
rotation *= (this.speedMultiplier / 100)
for (let n = 0; n < this.nMax; n += 1) {
const ncolour = LerpHex(this.colour1, this.colour2, n / this.nMax);
// const ncolour = LerpHex(this.colour1, this.colour2, (n/this.nMax)**2);
const a = n * (rotation / 1000)//137.5;
const r = this.width * Math.sqrt(n);
const x = r * Math.cos(a) + centerX;
const y = r * Math.sin(a) + centerY;
drawWave(angle) {
angle /= 1000
const startColor = [45, 129, 252];
const endColor = [252, 3, 98];
const distanceMultiplier = 3;
const maxIterations = 200;
// angle=0;
for (let n = 0; n < maxIterations; n++) {
ctx.beginPath();
const nColor = lerpRGB(startColor, endColor, Math.cos(rad(n / 2)));
// const nAngle = n* angle ;
// const nAngle = n*angle+ Math.sin(rad(n*1+angle*4000))/1 ;
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, 8, 0, 2 * Math.PI);
ctx.fillStyle = colourToText(nColor);
ctx.fill();
}
}
drawSpiral(angle) {
angle /= 5000
const startColor = [45, 129, 252];
const endColor = [252, 3, 98];
const distanceMultiplier = 2;
const maxIterations = 1000;
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 radius = distanceMultiplier * n;
const xCoord = radius * Math.cos(nAngle) + centerX;
const yCoord = radius * Math.sin(nAngle) + centerY;
ctx.beginPath();
ctx.arc(x, y, 8, 0, 2 * Math.PI);
ctx.fillStyle = ncolour;
// ctx.fillStyle = colourToText(ncolour);
ctx.arc(xCoord, yCoord, 8, 0, 2 * Math.PI);
ctx.fillStyle = colourToText(nColor);
ctx.fill();
// console.log(this.c)
}
}
// Draw_nodal(300, 100, 31, rotation, "blue");
draw(rotation) {
rotation *= (this.speedMultiplier / 300)
rotation += this.start
if (this.wave===1) {
this.drawWave(rotation)
}
else if(this.wave ===2){
this.drawSpiral(rotation)
}
else {
for (let n = 0; n < this.nMax; n += 1) {
const ncolour = LerpHex(this.colour1, this.colour2, n / this.nMax);
// const ncolour = LerpHex(this.colour1, this.colour2, (n/this.nMax)**2);
const a = n * (rotation / 1000)//137.5;
const r = this.width * Math.sqrt(n);
const x = r * Math.cos(a) + centerX;
const y = r * Math.sin(a) + centerY;
ctx.beginPath();
ctx.arc(x, y, 8, 0, 2 * Math.PI);
ctx.fillStyle = ncolour;
// ctx.fillStyle = colourToText(ncolour);
ctx.fill();
// console.log(this.c)
}
}
}
}
class SquareTwist_angle extends BaseShape {
@ -474,24 +493,45 @@ class EyePrototype extends BaseShape {
}
drawEyelid(rotation) {
ctx.strokeStyle = "orange";
let relCenterX = centerX + this.x;
let relCenterY = centerY + this.y;
rotation *= (this.speedMultiplier / 100)
ctx.lineWidth = 1;
ctx.beginPath();
ctx.moveTo(centerX + this.x - this.width / 2, centerY + this.y);
ctx.quadraticCurveTo(centerX + this.x, centerY + this.y - rotation / 400 * this.width, centerX + this.x + this.width / 2, centerY + this.y);
let newPoint = 0
let newPoint1 = 0
ctx.moveTo(centerX + this.x - this.width / 2, centerY + this.y);
ctx.quadraticCurveTo(centerX + this.x, centerY + this.y + rotation / 400 * this.width, centerX + this.x + this.width / 2, centerY + this.y);
newPoint = rotatePoint(- this.width / 2, 0, this.rotate)
ctx.moveTo(relCenterX + newPoint[0], relCenterY + newPoint[1]);
newPoint = rotatePoint(0, - rotation / 400 * this.width, this.rotate)
newPoint1 = rotatePoint(this.width / 2, 0, this.rotate)
ctx.quadraticCurveTo(relCenterX + newPoint[0], relCenterY + newPoint[1], relCenterX + newPoint1[0], relCenterY + newPoint1[1]);
newPoint = rotatePoint(- this.width / 2, 0, this.rotate)
ctx.moveTo(relCenterX + newPoint[0], relCenterY + newPoint[1]);
newPoint = rotatePoint(0, + rotation / 400 * this.width, this.rotate)
newPoint1 = rotatePoint(this.width / 2, 0, this.rotate)
ctx.quadraticCurveTo(relCenterX + newPoint[0], relCenterY + newPoint[1], relCenterX + newPoint1[0], relCenterY + newPoint1[1]);
ctx.stroke();
}
eyelidCut(step) {
eyelidCut(rotation) {
let relCenterX = centerX + this.x;
let relCenterY = centerY + this.y;
let newPoint = 0
let newPoint1 = 0
// ctx.lineWidth = 1;
let squarePath = new Path2D();
squarePath.moveTo(centerX + this.x - this.width / 2, centerY + this.y);
squarePath.quadraticCurveTo(centerX + this.x, centerY + this.y - step / 400 * this.width, centerX + this.x + this.width / 2, centerY + this.y);
newPoint = rotatePoint(- this.width / 2, 0, this.rotate)
squarePath.moveTo(relCenterX + newPoint[0], relCenterY + newPoint[1]);
newPoint = rotatePoint(0, - rotation / 400 * this.width, this.rotate)
newPoint1 = rotatePoint(this.width / 2, 0, this.rotate)
squarePath.quadraticCurveTo(relCenterX + newPoint[0], relCenterY + newPoint[1], relCenterX + newPoint1[0], relCenterY + newPoint1[1]);
squarePath.moveTo(centerX + this.x - this.width / 2, centerY + this.y);
squarePath.quadraticCurveTo(centerX + this.x, centerY + this.y + step / 400 * this.width, centerX + this.x + this.width / 2, centerY + this.y);
newPoint = rotatePoint(- this.width / 2, 0, this.rotate)
squarePath.moveTo(relCenterX + newPoint[0], relCenterY + newPoint[1]);
newPoint = rotatePoint(0, + rotation / 400 * this.width, this.rotate)
newPoint1 = rotatePoint(this.width / 2, 0, this.rotate)
squarePath.quadraticCurveTo(relCenterX + newPoint[0], relCenterY + newPoint[1], relCenterX + newPoint1[0], relCenterY + newPoint1[1]);
ctx.clip(squarePath);
}
@ -558,7 +598,7 @@ class EyePrototype extends BaseShape {
let a = cap * 2 + d
let outputRotation = Math.min(Math.abs((Math.floor(rotation * speedMult) % a) - a / 2 - d / 2), cap)
// console.log("Rot: "+ rotation + " | " +Math.floor(rotation)%a)
console.log(outputRotation)
// console.log(outputRotation)
// console.log(this.counter)
ctx.fillStyle = "black";
@ -582,7 +622,7 @@ class EyePrototype extends BaseShape {
this.counter = 0;
}
ctx.fillStyle = "black";
ctx.fillRect(this.x-this.width/2 +centerX,0 , this.width, ctx.canvas.height);
ctx.fillRect(this.x - this.width / 2 + centerX, 0, this.width, ctx.canvas.height);
if (this.draw_expand) {
this.drawGrowEye(this.width / 4 + this.counter);
}
@ -611,8 +651,8 @@ class MaryFace extends BaseShape {
this.y2 = y2;
this.rotate2 = rotate2;
this.width2 = width2;
this.eye1 = new EyePrototype(x1, y1, rotate1, width1, 10, 1, 1, 0, 1, "#00fffb", "#00fffb", "#00fffb")
this.eye2 = new EyePrototype(x2, y2, rotate2, width2, 10, 1, 1, 0, 1, "#00fffb", "#00fffb", "#00fffb")
this.eye1 = new EyePrototype(x1, y1, rotate1, width1, 10,1, 0, 0, 1, "#00fffb", "#00fffb", "#00fffb")
this.eye2 = new EyePrototype(x2, y2, rotate2, width2, 10, 1, 0, 0, 1, "#00fffb", "#00fffb", "#00fffb")
}
draw(rotation) {

BIN
docs/maryFace - Copy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
docs/maryFace.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB