kasper.space
[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
5.6 kB
138 lines
1// init canvas
2var canvas = document.querySelector("canvas");
3var c = canvas.getContext("2d");
4
5// update canvas size
6canvas.width = window.innerWidth;
7canvas.height = window.innerHeight;
8window.addEventListener("resize", function() {
9 canvas.width = window.innerWidth;
10 canvas.height = window.innerHeight;
11});
12
13// draw a circle
14function draw(radius, x, y, color) {
15 c.beginPath();
16 c.fillStyle = color;
17 c.arc(x, y, radius, 0, Math.PI*2, false); // draw the actual circle
18 c.fill();
19}
20
21var circleAmount = window.innerWidth*window.innerHeight/100000;
22var circleAmount = 2;
23colors = [
24 "#070F4E",
25 "#2772DB",
26 "#3AB1C8",
27 "#F5EBEB"
28];
29var circles = [], nc = []; // newCircles
30for (var i = 0; i < circleAmount; i++) {
31 var radius = (Math.random()+0.25)*50;
32 var x = Math.random()*(canvas.width-radius*2)+radius;
33 var y = Math.random()*(canvas.height-radius*2)+radius;
34 var dx = (Math.random()+1)*3;
35 var dy = (Math.random()+1)*3;
36 var color = colors[Math.floor(Math.random()*colors.length)];
37 if (Math.random() < 0.5) dx = -dx;
38 if (Math.random() < 0.5) dy = -dy;
39 circles[i] = {
40 radius: radius,
41 x: x,
42 y: y,
43 dx: dx,
44 dy: dy,
45 color: color
46 };
47 draw(radius, x, y, color);
48}
49
50function update(ci) { // circleIndex
51
52 // console.log(nc[ci]);
53 // console.log("1 ^");
54
55 for (var cpi = 0; cpi < circles.length; cpi++) { // comparisonIndex
56 if (cpi != ci) { // avoid comparing to itself
57 // console.log(nc[ci]);
58 // console.log("2 ^");
59 var xDist = circles[cpi].x - circles[ci].x; // difference of c1x & c2x
60 var yDist = circles[cpi].y - circles[ci].y; // difference of c1y & c2y
61 var distBetweenCircles = Math.sqrt( xDist*xDist + yDist*yDist ); // distance from c1 to c2
62 if (distBetweenCircles < 0) distBetweenCircles = -distBetweenCircles;
63 var radii = circles[cpi].radius + circles[ci].radius; // the radii combined
64
65 if (distBetweenCircles < radii) { // if the circles are overlapping
66 // cpi intersection
67 // console.log(nc[ci]);
68 // console.log("3 ^");
69
70 var xDir1 = (circles[ci].x - circles[cpi].x) / radii;
71 // console.log(`var xDir1 = (${circles[ci].x} - ${circles[cpi].x}) / ${radii};`);
72 var yDir1 = (circles[ci].y - circles[cpi].y) / radii;
73 var xInters1 = circles[ci].x + xDir1 * circles[ci].radius;
74 if (xInters1 < 0) xInters1 = -xInters1;
75 // console.log(`var xInters1 = ${circles[ci].x} + ${xDir1} * ${circles[ci].radius}; (+ make positive)`);
76 var yInters1 = circles[ci].y + yDir1 * circles[ci].radius;
77 if (yInters1 < 0) yInters1 = -yInters1;
78 // ci intersection
79 var xDir2 = -xDir1;
80 // console.log(`var xDir2 = -xDir1`);
81 var yDir2 = -yDir1;
82 var xInters2 = circles[cpi].x + xDir2 * circles[cpi].radius;
83 if (xInters2 < 0) xInters2 = -xInters2;
84 // console.log(`var xInters2 = ${circles[cpi].x} + ${xDir2} * ${circles[cpi].radius}; (+ make positive)`);
85 var yInters2 = circles[cpi].y + yDir2 * circles[cpi].radius;
86 if (yInters2 < 0) yInters2 = -yInters2;
87
88 var xInters = (xInters2 + xInters1) / 2;
89 // console.log(`var xInters = (${xInters2} + ${xInters1});`);
90 var yInters = (yInters2 + yInters1) / 2;
91
92 // console.log(`xi1: ${xInters1} xi2: ${xInters2} xi: ${xInters}`)
93
94 nc[ci].x = circles[ci]+xInters1-xInters;
95 nc[ci].y = circles[ci]+yInters1-yInters;
96
97 // nc[ci].x = xInters + (circles[ci].x - xInters);
98 // console.log(`nc[ci].x = ${xInters} + (${circles[ci].x} - ${xInters});`)
99 // nc[ci].y = yInters + (circles[ci].y - yInters);
100
101 var xNormal = (xInters - circles[cpi].x) / circles[cpi].radius;
102 var yNormal = (yInters - circles[cpi].y) / circles[cpi].radius;
103 var xNewDir = circles[ci].dx - 2 * ( circles[ci].dx * xNormal + circles[ci].dy * yNormal ) * xNormal;
104 var yNewDir = circles[ci].dy - 2 * ( circles[ci].dx * xNormal + circles[ci].dy * yNormal ) * yNormal;
105
106 nc[ci].dx = xNewDir;
107 nc[ci].dy = yNewDir;
108
109 // console.log(nc[ci]);
110 // console.log("4 ^");
111 }
112 }
113 }
114
115 // when they hit the walls
116 if (nc[ci].x+nc[ci].radius < 0 ) nc[ci].x = canvas.width + nc[ci].radius; // left
117 if (nc[ci].x-nc[ci].radius > canvas.width ) nc[ci].x = 0 - nc[ci].radius; // right
118 if (nc[ci].y+nc[ci].radius < 0 ) nc[ci].y = canvas.height + nc[ci].radius; // top
119 if (nc[ci].y-nc[ci].radius > canvas.height) nc[ci].y = 0 - nc[ci].radius; // bottom
120
121 nc[ci].x += nc[ci].dx; // increment x position
122 nc[ci].y += nc[ci].dy; // increment y position
123
124 draw(nc[ci].radius, nc[ci].x, nc[ci].y, nc[ci].color); // finally draw the circle
125 // console.log(nc[ci]);
126 // console.log("5 ^");
127}
128function animate() {
129 requestAnimationFrame(animate); // init animation
130 c.clearRect(0, 0, innerWidth, innerHeight); // clear canvas
131
132 nc = JSON.parse(JSON.stringify(circles));
133 for (var i = 0; i < circles.length; i++) { // update every circle
134 update(i);
135 }
136 circles = JSON.parse(JSON.stringify(nc));
137}
138animate();