animate/showcase/index.js.html

443 lines
13 KiB
HTML

<!DOCTYPE html>
<html>
<!-- ahhh -->
<body style="margin: 0; overflow: hidden">
<div style="display: none;">
<img id="title" src="title.svg" width="100" height="100"></img>
<img id="polyA" src="polyA.svg" width="100" height="100"></img>
<img id="polyB" src="polyB.svg" width="100" height="100"></img>
<img id="polyC" src="polyC.svg" width="100" height="100"></img>
</div>
<canvas
id="myCanvas"
width="10"
height="10"
style="display: block; box-sizing: border-box"
>
Your browser does not support the HTML5 canvas tag.</canvas
>
<script>
const title = document.getElementById('title');
const polyA = document.getElementById('polyA');
const polyB = document.getElementById('polyB');
const polyC = document.getElementById('polyC');
let c = document.getElementById("myCanvas");
let ctx = c.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
let deg_per_sec = 30;
let time = 120;
let fps = 60;
centerX = ctx.canvas.width / 2;
centerY = ctx.canvas.height / 2;
rotation = 0; //was = j = angle
currentFrame = 0; //was = i
let nPoly1 = {
colour1: [187,58,242],
colour2: [40,183,235],
speedMult: 0.20,
depth: 22,
width: 0,
widthMax: 400,
line_width:1,
sides: 4,
rotation: 0,
duration: 90, //rotation
draw: function () {
DrawPolyTwistColour_width(
this.sides,
this.depth,
this.width,
-90,
this.rotation * this.speedMult,
this.colour1,
this.colour2,
this.line_width
);
},
};
let nPoly2 = {
colour1: [0,0,0],
colour2: [110, 38, 255],
speedMult: 0.05,
depth: 100,
width: 0,
widthMax: 400,
line_width: 1,
sides: 8,
rotation: 0,
duration: 960*0.05,
draw: function () {
DrawPolyTwistColour_width(
this.sides,
this.depth,
this.width,
-90,
this.rotation * this.speedMult,
this.colour1,
this.colour2,
this.line_width
);
},
};
let floralInv1 = {
colour1: [255, 0, 0],
speedMult: 1,
width: 0,
widthMax: 250,
line_width: 1,
sides: 5,
rotation: 0,
duration: deg_per_sec*20,
draw: function () {
Draw_Spiral_Pattern(this.sides, this.width, this.rotation*this.speedMult, 'red',this.line_width);
},
};
let floralInv2 = {
colour1: [255, 0, 0],
speedMult: 1,
width: 0,
widthMax: 250,
line_width: 1,
sides: 12,
rotation: 0,
duration: deg_per_sec*20,
draw: function () {
Draw_Spiral_Pattern(this.sides, this.width, this.rotation*this.speedMult, 'red', this.line_width);
},
};
let floralInv3 = {
colour1: [255, 0, 0],
speedMult: 1,
width: 0,
widthMax: 225,
line_width: 1,
sides: 40,
rotation: 0,
duration: deg_per_sec*20,
draw: function () {
Draw_Spiral_Pattern(this.sides, this.width, this.rotation*this.speedMult, 'red', this.line_width);
},
};
let floralAcc1 = {
colour1: [255, 0, 0],
speedMult: 1,
width: 0,
widthMax: 225,
line_width: 1,
sides: 3,
rotation: 0,
duration: deg_per_sec*20,
draw: function () {
Draw_Shape_accident(this.sides,this.width,this.rotation*this.speedMult,'red',this.line_width)
},
};
let floralAcc2 = {
colour1: [255, 0, 0],
speedMult: 1,
width: 0,
widthMax: 225,
line_width: 1,
sides: 12,
rotation: 0,
duration: deg_per_sec*14,
draw: function () {
Draw_Shape_accident(this.sides,this.width,this.rotation*this.speedMult,'red',this.line_width)
},
};
let nodal1 = {
colour1: [137, 54, 255],
colour2: [158, 255, 54],
width: 0, //expand
widthMax: 5, //expand
points: 10000,
speedMult: 1,
colourChange: 1,
lineWidth: 4,
rotation: 0,
duration: deg_per_sec*330,
draw: function () {
Draw_nodal_expanding(
this.width,
this.points,
this.rotation*this.speedMult,
0,
this.colour1,
this.colour2,
this.colourChange,
this.lineWidth)
},
};
let phyllo1 = {
colour1: [75, 226, 255],
colour2: [255, 115, 87],
speedMult: 1/5000,
width: 0,
widthMax: 24,
line_width: 1,
dots: 300,
dotWidth: 8,
rotation: 0,
duration: deg_per_sec*522 /5000,
draw: function () {
Draw_Phyllotaxis(
this.width,
this.rotation*this.speedMult ,
this.dots,
this.dotWidth,
this.colour1,
this.colour2,
this.line_width);
},
};
let mathPoly = {
speedMult: 1,
width: 0,
widthMax: 500,
duration: deg_per_sec*10,
draw: function () {
Draw_Math_Node(100,this.file,this.width);
}
};
let aniObj = [mathPoly,nPoly1,nPoly2,floralInv1,floralInv2,floralInv3,floralAcc1,floralAcc2,nodal1,phyllo1];
// let aniObj = [phyllo1];
let ind = 0;
function render() {
setTimeout(() => {
render();
render_clear();
console.log(aniObj[ind].duration/aniObj[ind].speedMult)
if (aniObj[ind].width < aniObj[ind].widthMax && rotation <= aniObj[ind].duration/aniObj[ind].speedMult) {
aniObj[ind].width += aniObj[ind].widthMax/100
}
if(rotation >= aniObj[ind].duration/aniObj[ind].speedMult){
if(aniObj[ind].width <=0){
aniObj[ind].width = 0
ind +=1;
rotation = 0;
if (ind >= aniObj.length){
ind=0;
}
}
else{
aniObj[ind].width -= aniObj[ind].widthMax/100
}
}
aniObj[ind].draw();
aniObj[ind].rotation = rotation;
}, 1000 / fps);
rotation += deg_per_sec / fps; // was = j = angle, now = rotation
currentFrame += 1; // was = i
}
render();
function Draw_Math_Node(width, file,width){
// ctx.drawImage(title, centerX-width/2, centerY-100, width,width/10);
ctx.drawImage(polyA, centerX- (width-50)/2, centerY-(width-50)/2-200, width-50,width-50);
ctx.drawImage(polyB, centerX- width/2, centerY-width/2, width,width);
ctx.drawImage(polyC, centerX- width/2, centerY-width/2+200, width,width);
}
function Draw_Phyllotaxis(width, angle, dots, dotWidth, colour1, colour2) {
// colour1 = [45, 129, 252];
// colour2 = [252, 3, 98];
var c = width; //24, something to do with width. but not width
for (let n = 0; n < dots; n += 1) {
ncolour = LerpRGB(colour1, colour2, Math.cos(rad(n / 2)));
var a = n * (angle)//137.5;
var r = c * Math.sqrt(n);
var x = r * Math.cos(a) + centerX;
var y = r * Math.sin(a) + centerY;
ctx.beginPath();
ctx.arc(x, y, dotWidth, 0, 2 * Math.PI);
ctx.fillStyle = colourToText(ncolour);
ctx.fill();
}
}
function Draw_nodal_expanding(expand, points, step, rotate, colour1, colour2, colour_change, line_width) {
let angle = 360 / points * step
let start_angle = angle;
let done = false;
let total_moves = 1;
let length = expand;
for (let z = 1; z <= 100; z++) { //why specifically 2500
ctx.beginPath();
ncolour = LerpRGB(colour1, colour2, Math.cos(rad(z * colour_change)));
ctx.moveTo(
centerX + (Math.cos(rad(angle * (z - 1) + rotate)) * (length - expand)),
centerY + (Math.sin(rad(angle * (z - 1) + rotate)) * (length - expand)));
ctx.lineTo(
centerX + (Math.cos(rad(angle * z + rotate)) * length),
centerY + (Math.sin(rad(angle * z + rotate)) * length));
length += expand;
ctx.lineWidth = line_width;//try 1
ctx.strokeStyle = colourToText(ncolour);
ctx.stroke();
}
}
function Draw_Shape_accident(sides, radius, rotation, colour,line_width) {
let rot = Math.round((sides - 2) * 180 / sides * 2)
let piv = 360 / sides;
let stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation);
let end = 0;
let n = radius / ((radius / 10) * (radius / 10)) //pixel correction for mid leaf
for (let i = 1; i < sides + 1; i++) {
end = stt + rad(rot);
ctx.beginPath();
ctx.arc(
centerX + Math.cos(rad(90 + piv * i + rotation)) * radius,
centerY + Math.sin(rad(90 + piv * i + rotation)) * radius,
radius,
stt - (stt - end + rad(rotation)) / 2,
end + rad(n),
0);
ctx.strokeStyle = colour;
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = line_width;
ctx.arc(centerX + Math.cos(rad(90 + piv * i - rotation)) * radius, centerY + Math.sin(rad(90 + piv * i - rotation)) * radius, radius, stt, end - (end - stt - rad(rotation)) / 2 + rad(n), 0);
ctx.strokeStyle = colour;
ctx.stroke();
stt = end + -(rad(rot - piv)) //+rad(30);
}
}
function Draw_Spiral_Pattern(sides, radius, rotation, colour,line_width) {
let rot = Math.round((sides - 2) * 180 / sides * 2)
let piv = 360 / sides;
let stt = 0.5 * Math.PI - rad(rot) //+ rad(rotation);
let end = 0;
let n = radius / ((radius / 10) * (radius / 10)) //pixel correction for mid leaf
for (let i = 1; i < sides + 1; i++) {
end = stt + rad(rot);
ctx.beginPath();
ctx.arc(
centerX + Math.cos(rad(90 + piv * i + rotation)) * radius,
centerY + Math.sin(rad(90 + piv * i + rotation)) * radius,
radius,
stt + rad(rotation) - (stt - end) / 2,
end + rad(rotation) + rad(n),
0);
ctx.strokeStyle = colour;
ctx.stroke();
ctx.beginPath();
ctx.lineWidth = line_width;
ctx.arc(centerX + Math.cos(rad(90 + piv * i - rotation)) * radius, centerY + Math.sin(rad(90 + piv * i - rotation)) * radius, radius, stt - rad(rotation), end - (end - stt) / 2 + rad(n) - rad(rotation), 0);
ctx.strokeStyle = colour;
ctx.stroke();
stt = end + -(rad(rot - piv)) //+rad(30);
}
}
function DrawPolyTwistColour_width(sides,depth, width, rotation,innerRotation, colour1,colour2,line_width){
let out_angle = 0
let innerAngle = 180 - ((sides-2) *180/sides);
let scopeAngle = innerRotation - (innerAngle*Math.floor(innerRotation/innerAngle));
if (scopeAngle < innerAngle/2) {
out_angle = innerAngle / (2 * Math.cos((2*Math.PI*scopeAngle)/(3*innerAngle))) - innerAngle/2
}
else {
out_angle = -innerAngle / (2 * Math.cos( ((2*Math.PI)/3) - ((2*Math.PI*scopeAngle)/(3*innerAngle))) ) + (innerAngle*3)/2
}
let minWidth = Math.sin(rad(innerAngle/2))*(0.5/Math.tan(rad(innerAngle/2)))*2;
let widthMultiplier = minWidth / Math.sin(Math.PI / 180 * (90+innerAngle/2 - out_angle + innerAngle * Math.floor(out_angle / innerAngle)))
for (let i = 0; i < depth; i++) {
let fraction = i/depth;
let ncolour = LerpRGB(colour1,colour2,fraction);
DrawPolygon(sides,width*widthMultiplier**i,out_angle*i+rotation, colourToText(ncolour), line_width)
}
}
function DrawPolygon(sides, width, rotation, colour, line_width) {
ctx.beginPath();
ctx.lineWidth = line_width;
ctx.moveTo (centerX + width * Math.cos(rotation*Math.PI/180), centerY + width * Math.sin(rotation*Math.PI/180));
for (let i = 1; i <= sides; i += 1) {
ctx.lineTo(
centerX + width * Math.cos(i * 2 * Math.PI / sides + (rotation*Math.PI/180)),
centerY + width * Math.sin(i * 2 * Math.PI / sides + (rotation*Math.PI/180))
);
}
ctx.strokeStyle = colour;
ctx.stroke();
}
function rad(degrees) {
let pi = Math.PI;
return degrees * (pi / 180);
}
function colourToText(colour) {
return "rgb(" + colour[0] + "," + colour[1] + "," + colour[2] + ")"
}
function LerpRGB(a, b, t) {
if (t < 0) {
t *= -1;
}
let newColor = [0, 0, 0];
newColor[0] = a[0] + (b[0] - a[0]) * t;
newColor[1] = a[1] + (b[1] - a[1]) * t;
newColor[2] = a[2] + (b[2] - a[2]) * t;
return newColor;
}
function render_clear() {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
ctx.fillStyle = "black";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
</script>
</body>
</html>