[READ-ONLY] Mirror of https://github.com/probablykasper/canvas-experiments. Just me learning to use HTML canvas
canvas-experiments.kasper.space
canvas
html5-canvas
website
Loading animations scale to viewport
+12
-5
+12
-5
7/main.js
+12
-5
7/main.js
···
36
36
37
37
var lineWidth = 0, increment = true;
38
38
setInterval(function() {
39
-
if (lineWidth == 101) increment = false;
39
+
if (lineWidth > thatRadius) increment = false;
40
40
if (lineWidth == 0) increment = true;
41
41
if (increment) lineWidth++;
42
42
if (!increment) lineWidth--;
43
43
}, 52.25)
44
44
45
-
var start = 0, stop = 0, baseSpeed = 10, speedMultiplier = 2;
45
+
var start = 0, stop = 0, baseSpeed = 10, speedMultiplier = 2, thatRadius;;
46
46
var shapes = [], slice = Math.PI/4, inverted = false, incr = 2, loop = baseSpeed*50; // incrementor
47
47
function animate() {
48
48
requestAnimationFrame(animate); // init animation
···
62
62
inverted = false;
63
63
}
64
64
65
-
draw(cw/4*1, ch/2, 50, startToUse/loop, stopToUse/loop, 2, "#236568", true);
66
-
draw(cw/4*2, ch/2, 50, startToUse/loop, stopToUse/loop, lineWidth, "#3E3277", false);
67
-
draw(cw/4*3, ch/2, 50, startToUse/loop, stopToUse/loop, 1, "#7D2A6B", true, true);
65
+
if (window.innerWidth < window.innerHeight) {
66
+
var radius = window.innerWidth/15;
67
+
thatRadius = window.innerWidth/15;
68
+
} else {
69
+
var radius = window.innerHeight/15;
70
+
thatRadius = window.innerHeight/15;
71
+
}
72
+
draw(cw/4*1, ch/2, radius, startToUse/loop, stopToUse/loop, 2, "#236568", true);
73
+
draw(cw/4*2, ch/2, thatRadius, startToUse/loop, stopToUse/loop, lineWidth, "#3E3277", false);
74
+
draw(cw/4*3, ch/2, radius, startToUse/loop, stopToUse/loop, 1, "#7D2A6B", true, true);
68
75
if (!inverted) {
69
76
start = start + baseSpeed;
70
77
stop = stop + baseSpeed * speedMultiplier;