mirror of
https://github.com/SamEyeBam/animate.git
synced 2025-09-27 22:45:25 +00:00
added notes
This commit is contained in:
Sam
16
Catalogue/Eye Animation/index.html
Normal file
16
Catalogue/Eye Animation/index.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>Parcel Sandbox</title>
|
||||
<meta charset="UTF-8" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<canvas id="canvas" width="500" height="500">
|
||||
<script src="src/index.js">
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
116
Catalogue/Eye Animation/src/index.js
Normal file
116
Catalogue/Eye Animation/src/index.js
Normal file
@@ -0,0 +1,116 @@
|
||||
const canvas = document.getElementById("canvas");
|
||||
const ctx = canvas.getContext("2d");
|
||||
|
||||
const points = [
|
||||
[50, 250],
|
||||
[450, 250],
|
||||
];
|
||||
let step = 0;
|
||||
let speed = 8;
|
||||
let opening = true;
|
||||
let counter = 0;
|
||||
|
||||
let cooldown = 0;
|
||||
function draw() {
|
||||
ctx.strokeStyle = "orange";
|
||||
ctx.fillStyle = "black";
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
ctx.fillRect(0, 0, 500, 500);
|
||||
|
||||
// let newPath = new Path2D();
|
||||
// newPath.arc(150, 75, 75, 0, 2 * Math.PI);
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.rect(100, 100, 300, 300);
|
||||
ctx.stroke();
|
||||
|
||||
drawEyelid(step);
|
||||
|
||||
ctx.save();
|
||||
// squareCut();
|
||||
eyelidCut(step);
|
||||
|
||||
if (counter % 100 == 0) {
|
||||
counter = 0;
|
||||
}
|
||||
drawGrowEye(100 + counter);
|
||||
|
||||
drawCircle(100);
|
||||
|
||||
ctx.restore();
|
||||
|
||||
stepFunc();
|
||||
counter++;
|
||||
window.requestAnimationFrame(draw);
|
||||
}
|
||||
|
||||
function stepFunc() {
|
||||
if (cooldown != 0) {
|
||||
cooldown--;
|
||||
} else {
|
||||
if (opening == true) {
|
||||
if (step >= 200) {
|
||||
cooldown = 200;
|
||||
opening = false;
|
||||
step -= speed;
|
||||
} else {
|
||||
step += speed;
|
||||
}
|
||||
} else {
|
||||
if (step <= 0) {
|
||||
opening = true;
|
||||
step += speed;
|
||||
} else {
|
||||
step -= speed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function squareCut() {
|
||||
let squarePath = new Path2D();
|
||||
squarePath.rect(100, 100, 300, 300);
|
||||
|
||||
ctx.clip(squarePath);
|
||||
}
|
||||
|
||||
function drawGrowEye(step) {
|
||||
ctx.strokeStyle = "aqua";
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth = 5;
|
||||
ctx.arc(250, 250, step, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
ctx.strokeStyle = "orange";
|
||||
}
|
||||
|
||||
function eyelidCut(step) {
|
||||
// ctx.lineWidth = 1;
|
||||
let squarePath = new Path2D();
|
||||
squarePath.moveTo(points[0][0], points[0][1]);
|
||||
squarePath.quadraticCurveTo(250, 250 - step, points[1][0], points[0][1]);
|
||||
|
||||
squarePath.moveTo(points[0][0], points[0][1]);
|
||||
squarePath.quadraticCurveTo(250, 250 + step, points[1][0], points[0][1]);
|
||||
|
||||
ctx.clip(squarePath);
|
||||
}
|
||||
|
||||
function drawCircle(step) {
|
||||
ctx.beginPath();
|
||||
ctx.lineWidth = 5;
|
||||
ctx.arc(250, 250, step, 0, 2 * Math.PI);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
function drawEyelid(step) {
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(points[0][0], points[0][1]);
|
||||
ctx.quadraticCurveTo(250, 250 - step, points[1][0], points[0][1]);
|
||||
|
||||
ctx.moveTo(points[0][0], points[0][1]);
|
||||
ctx.quadraticCurveTo(250, 250 + step, points[1][0], points[0][1]);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
window.requestAnimationFrame(draw);
|
||||
3
Catalogue/Eye Animation/src/styles.css
Normal file
3
Catalogue/Eye Animation/src/styles.css
Normal file
@@ -0,0 +1,3 @@
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
108
Catalogue/Flower Circular.html
Normal file
108
Catalogue/Flower Circular.html
Normal file
@@ -0,0 +1,108 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<body>
|
||||
|
||||
<canvas id="myCanvas" width="1850" height="950" style="border:1px solid #d3d3d3;">
|
||||
Your browser does not support the HTML5 canvas tag.</canvas>
|
||||
|
||||
<script>
|
||||
function rad(degrees) {
|
||||
var pi = Math.PI;
|
||||
return degrees * (pi / 180);
|
||||
}
|
||||
|
||||
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
|
||||
var sides = 5;
|
||||
var r = 250;
|
||||
var rot = Math.round((sides - 2) * 180 / sides * 2)
|
||||
var piv = 360 / sides;
|
||||
var angle = 120;
|
||||
|
||||
startx = 1850/2//1875/2;
|
||||
starty = 950/2//950/2;//-(Math.tan(30*Math.PI/180)*width/2);
|
||||
|
||||
var stt = 0.5 * Math.PI - rad(rot) + rad(angle);
|
||||
var end = 0;
|
||||
|
||||
for (let j = 0; j < 14; j++) {
|
||||
setTimeout(() => {
|
||||
|
||||
for (let i = 1; i < sides + 1; i++) {
|
||||
end = stt + rad(rot);
|
||||
ctx.beginPath();
|
||||
ctx.arc(startx + Math.cos(rad(90 + piv * i + angle)) * r, starty + Math.sin(rad(90 + piv * i + angle)) * r, r, stt, end, 0);
|
||||
//ctx.arc(startx+ 200*i, starty, r, stt, end ,0);
|
||||
ctx.strokeStyle = "black";
|
||||
ctx.stroke();
|
||||
stt = end + -(rad(rot - piv));
|
||||
}
|
||||
angle += j;
|
||||
|
||||
}, 100 * j);
|
||||
|
||||
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||||
|
||||
|
||||
}
|
||||
/*
|
||||
sides = 6;
|
||||
r = 700;
|
||||
rot = Math.round((sides - 2)*180/sides*2)
|
||||
piv = 360/sides;
|
||||
|
||||
width = Math.cos(30*Math.PI/180)*r*2;
|
||||
|
||||
startx = 1500//1875/2;
|
||||
starty = 1500//950/2;//-(Math.tan(30*Math.PI/180)*width/2);
|
||||
|
||||
stt =0.5*Math.PI - rad(rot);
|
||||
end = 0;
|
||||
|
||||
for (let i = 1; i < sides +1 ; i++) {
|
||||
end = stt + rad(rot)
|
||||
ctx.beginPath();
|
||||
ctx.arc(startx+ Math.cos(rad(90+piv*i))*r, starty+ Math.sin(rad(90+piv*i))*r, r, stt, end ,0);
|
||||
//ctx.arc(startx+ 200*i, starty, r, stt, end ,0);
|
||||
ctx.stroke();
|
||||
stt = end+ -(rad(rot-piv));
|
||||
}
|
||||
*/
|
||||
|
||||
/*
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(300-50, 300);
|
||||
ctx.lineTo(300+50, 300);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(300, 300-50);
|
||||
ctx.lineTo(300, 300+50);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.stroke();
|
||||
*/
|
||||
|
||||
// ctx.beginPath();
|
||||
// ctx.moveTo(startx + Math.cos(rad(90 + 120 * 1)) * r, starty + Math.sin(rad(90 + 120 * 1)) * r);
|
||||
// ctx.lineTo(startx + Math.cos(rad(90 + 120 * 2)) * r, starty + Math.sin(rad(90 + 120 * 2)) * r);
|
||||
// ctx.lineTo(startx + Math.cos(rad(90 + 120 * 3)) * r, starty + Math.sin(rad(90 + 120 * 3)) * r);
|
||||
// ctx.lineTo(startx + Math.cos(rad(90 + 120 * 1)) * r, starty + Math.sin(rad(90 + 120 * 1)) * r);
|
||||
// ctx.strokeStyle = "red";
|
||||
// ctx.stroke();
|
||||
|
||||
// ctx.beginPath();
|
||||
// ctx.moveTo(startx + Math.cos(rad(90 + 120 * 1 + 60)) * r, starty + Math.sin(rad(90 + 120 * 1 + 60)) * r);
|
||||
// ctx.lineTo(startx + Math.cos(rad(90 + 120 * 2 + 60)) * r, starty + Math.sin(rad(90 + 120 * 2 + 60)) * r);
|
||||
// ctx.lineTo(startx + Math.cos(rad(90 + 120 * 3 + 60)) * r, starty + Math.sin(rad(90 + 120 * 3 + 60)) * r);
|
||||
// ctx.lineTo(startx + Math.cos(rad(90 + 120 * 1 + 60)) * r, starty + Math.sin(rad(90 + 120 * 1 + 60)) * r);
|
||||
// ctx.strokeStyle = "red";
|
||||
// ctx.stroke();
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
74
Catalogue/inverted circle - static.html
Normal file
74
Catalogue/inverted circle - static.html
Normal file
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
|
||||
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
|
||||
Your browser does not support the HTML5 canvas tag.</canvas>
|
||||
|
||||
<script>
|
||||
function rad(degrees)
|
||||
{
|
||||
var pi = Math.PI;
|
||||
return degrees * (pi/180);
|
||||
}
|
||||
|
||||
var c = document.getElementById("myCanvas");
|
||||
var ctx = c.getContext("2d");
|
||||
|
||||
|
||||
var r = 100;
|
||||
var width = Math.cos(30*Math.PI/180)*r*2;
|
||||
|
||||
startx = 300;
|
||||
starty = 300;//-(Math.tan(30*Math.PI/180)*width/2);
|
||||
|
||||
var stt =0.5;
|
||||
|
||||
var stt1 = (stt-2/3)*Math.PI;
|
||||
var end1 = (stt)*Math.PI ;
|
||||
|
||||
var stt2 = end1;
|
||||
var end2 = stt2+(2/3)*Math.PI;
|
||||
|
||||
var stt3 = end2;
|
||||
var end3 = stt3+(2/3)*Math.PI;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(startx+ Math.cos(rad(90+120*1))*r, starty+ Math.sin(rad(90+120*1))*r, r, stt1, end1 ,0);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(startx+ Math.cos(rad(90+120*2))*r, starty+ Math.sin(rad(90+120*2))*r, r, stt2, end2 ,0);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(startx + Math.cos(rad(90+120*3))*r, starty+ Math.sin(rad(90+120*3))*r, r, stt3, end3 ,0);
|
||||
ctx.stroke();
|
||||
|
||||
/*
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(300-50, 300);
|
||||
ctx.lineTo(300+50, 300);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.stroke();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(300, 300-50);
|
||||
ctx.lineTo(300, 300+50);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.stroke();
|
||||
*/
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(startx+ Math.cos(rad(90+120*1))*r, starty+ Math.sin(rad(90+120*1))*r);
|
||||
ctx.lineTo(startx+ Math.cos(rad(90+120*2))*r, starty+ Math.sin(rad(90+120*2))*r);
|
||||
ctx.lineTo(startx+ Math.cos(rad(90+120*3))*r, starty+ Math.sin(rad(90+120*3))*r);
|
||||
ctx.lineTo(startx+ Math.cos(rad(90+120*1))*r, starty+ Math.sin(rad(90+120*1))*r);
|
||||
ctx.strokeStyle = "red";
|
||||
ctx.stroke();
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user