html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas></canvas>
</body>
</html>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
body {
}
Enter to Rename, Shift+Enter to Preview
js
js
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
window.onload = function() {
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');
const index = Math.floor(Math)
function getRandomColor () {
const colors = ['white', 'green', 'red', 'blue', 'pink', 'magenta'];
const index = Math.floor(Math.random() * colors.length);
return colors[index];
}
canvas.width = 750;
canvas.height = 750;
const control = getCircle(canvas.width / 2, canvas.height / 2);
const circles = [];
for (let i=0; i<150; i++) {
const x = getRandom(0, canvas.width);
const y = getRandom(0, canvas.height);
const circle = getCircle(x, y, 0, 0, 0, getRandomColor());
circle.distance = getDist(control, circle);
circle.angle = Math.atan2(circle.y - control.y, circle.x - control.x);
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run