-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathheart.html
43 lines (43 loc) · 1.68 KB
/
heart.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1{text-align:center;color:red;text-shadow:2px 2px 8px olive;}
</style>
</head>
<body>
<h1>Animated Heart - Polar Equations</h1>
<div style="width:510px;height:auto;margin-left:auto;margin-right:auto;margin-top:10px;margin-bottom:10px;">
<canvas id="myCanvas" width="500" height="400" style="background:black;"></canvas>
<p> </p>
</div>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var i = 0; j = 0.1, t = 0;
var col = new Array('green', 'blue', 'red', 'cyan', 'magenta', 'yellow');
function timing() {
t = t + 1;
i = i + j;
if (t > 5) { t = 0; }
//var r=Math.pow(10000*Math.cos(2*i),0.5);
var x = 250 + 160 * Math.sin(i) * Math.sin(i) * Math.sin(i); var y = -(-170 + 10 * (13 * Math.cos(i) - 5 * Math.cos(2 * i) - 2 * Math.cos(3 * i) - Math.cos(4 * i)));
context.beginPath();
context.moveTo(250, 200);
context.lineTo(x, y);
context.lineCap = 'round';
context.strokeStyle = 'rgba(0,0,255,0.6)';
context.stroke();
context.beginPath();
context.moveTo(250, 200);
context.arc(x, y, 8, 0, 2 * Math.PI);
context.fillStyle = col[t];
context.fill();
if (i > 6.5) { j = -0.1; context.clearRect(0, 0, 500, 400); }
if (i < -0.1) { j = 0.1; context.clearRect(0, 0, 500, 400); }
}
window.setInterval('timing()', 300);
</script>
</body>
</html>