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
4.1 kB
130 lines
1// window.onload = draw;
2var canvas = document.querySelector("canvas");
3canvas.width = window.innerWidth;
4canvas.height = window.innerHeight;
5var c = canvas.getContext("2d");
6
7window.addEventListener("resize", function() {
8 canvas.width = window.innerWidth;
9 canvas.height = window.innerHeight;
10});
11var mouse = {
12 x: undefined,
13 y: undefined
14};
15window.addEventListener("mousemove", function(event) {
16 mouse.x = event.x;
17 mouse.y = event.y;
18});
19
20var circlesAmount = window.innerWidth*window.innerHeight/100000;
21colors = [
22 "#070F4E",
23 "#2772DB",
24 "#3AB1C8",
25 "#F5EBEB"
26];
27
28function Circle(x, y, dx, dy, radius, color) {
29 this.radius = radius;
30 this.x = x;
31 this.y = y;
32 this.dx = dx;
33 this.dy = dy;
34 this.color = color;
35
36 this.draw = function() {
37 // draw circle
38 c.beginPath();
39 c.fillStyle = this.color;
40 c.lineWidth = 2
41 c.arc(this.x, this.y, this.radius, 0, Math.PI*2, false); //draw the actual circle
42 c.fill();
43 }
44 this.update = function(currentCircleIndex) {
45
46 // this.left = this.x - this.radius;
47 // this.right = this.x + this.radius;
48 // this.top = this.y - this.radius;
49 // this.bottom = this.y + this.radius;
50
51 for (var i = 0; i < circles.length; i++) {
52
53 if (i != currentCircleIndex) {
54 var distancex = circles[i].x - this.x;
55 var distancey = circles[i].y - this.y;
56 var distanceBetweenCircles = Math.sqrt( distancex*distancex + distancey*distancey );
57 // console.log(distancex + " " + circles[i].x + " " + this.x + " " + i);
58 // cat^2 + cat^2 = hyp^2
59
60 var distance = this.radius + circles[i].radius;
61 var directionx = (circles[i].x - this.x) / distance;
62 var directiony = (circles[i].y - this.y) / distance;
63 var intersectionx = this.x + directionx * this.radius;
64 var intersectiony = this.y + directiony * this.radius;
65
66 if (distanceBetweenCircles < 0) distanceBetweenCircles = -distanceBetweenCircles;
67 if (distanceBetweenCircles < distance) {
68 this.dx = -directionx+(this.dx+this.dy)/2;
69 this.dy = -directiony+(this.dx+this.dy)/2;
70 }
71 }
72
73 // var intersx = this.x + (circles[i].x - this.x) / (this.radius + circles[i].radius) * this.radius;
74 // // c1 + (c2 - c1 ) / (r1 + r2 ) * r1
75 //
76 // c1 + (c2-c1)/(r1+r2) * r1
77 //
78 // dist = r1+r2;
79 // dir = (c2-c1) / dist;
80 // inters = c1 + dir * r1
81 //
82 // if (
83 // circles[i].left <= this.right && this.left <= circles[i].right &&
84 // circles[i].top <= this.bottom && this.top <= circles[i].bottom &&
85 // i != currentCircleIndex
86 // ) {
87 // this.dx = -this.dx;
88 // this.dy = -this.dy;
89 // }
90
91 }
92
93 // bounce on edges
94 if (this.x >= canvas.width-this.radius) this.dx = -(Math.random()+1)*3;
95 if (this.x <= this.radius) this.dx = (Math.random()+1)*3;
96 if (this.y >= canvas.height-this.radius) this.dy = -(Math.random()+1)*3;
97 if (this.y <= this.radius) this.dy = (Math.random()+1)*3;
98
99 // this.dx = 0;
100 // this.dy = 0;
101
102 this.x += this.dx;
103 this.y += this.dy;
104 this.draw();
105 }
106}
107
108var circles = [];
109for (var i = 0; i < circlesAmount; i++) {
110 var radius = (Math.random()+0.25)*50;
111 var x = Math.random()*(canvas.width-radius*2)+radius;
112 var y = Math.random()*(canvas.height-radius*2)+radius;
113 var dx = (Math.random()+1)*3;
114 var dy = (Math.random()+1)*3;
115 if (Math.random() < 0.5) dx = -dx;
116 if (Math.random() < 0.5) dy = -dy;
117 var color = this.fillStyle = colors[Math.floor(Math.random()*colors.length)]
118 circles.push(new Circle(x, y, dx, dy, radius, color));
119 circles[i].draw();
120}
121
122function animate() {
123 requestAnimationFrame(animate); // initiate animation
124 c.clearRect(0, 0, innerWidth, innerHeight); // clear canvas
125
126 for (var i = 0; i < circles.length; i++) {
127 circles[i].update(i);
128 }
129}
130animate();