-
Notifications
You must be signed in to change notification settings - Fork 0
/
sketch.js
85 lines (69 loc) · 1.95 KB
/
sketch.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
document.addEventListener('keyup', function (e) {
if (e.code === 'ArrowUp') {
stepSize *= 2;
}
if (e.code === 'ArrowDown') {
stepSize /= 2;
}
});
let inputBuffer = 0;
document.getElementById('input').addEventListener('input', function () {
try {
inputBuffer = Number.parseFloat(this.value);
} catch (e) {
console.log('Please input a number!');
}
});
document.getElementById('okButton').addEventListener('click', function () {
moduloNumber = inputBuffer;
});
const width = () => window.innerWidth;
const height = () => window.innerHeight - 5;
let moduloNumber = 1;
let totalNumber = 200;
let stepSize = 0.001;
function setModuloNumber(number, step) {
moduloNumber = number;
stepSize = step ? step : stepSize;
}
const simulation = s => {
let canvas;
s.setup = () => {
canvas = s.createCanvas(width(), height());
canvas.parent('simulationCanvas');
};
s.draw = () => {
s.background(255);
s.noFill();
s.noStroke();
s.textSize(15);
s.fill('rgb(0,0,0)');
s.text(moduloNumber, 10, 20);
let cDiameter = height() / 1.2;
s.stroke(0);
s.noFill();
s.translate(width() / 2, height() / 2);
s.ellipse(0, 0, cDiameter, cDiameter);
let k = (moduloNumber * Math.PI) / totalNumber;
for (let i = 0; i < totalNumber; i++) {
let x = cDiameter / 2 * Math.cos(i * k);
let y = cDiameter / 2 * Math.sin(i * k);
s.fill(0);
s.ellipse(x, y, 10, 10);
}
for (let i = 0; i < totalNumber; i++) {
let n = (i * moduloNumber);
let x0 = cDiameter / 2 * Math.cos(i * k);
let y0 = cDiameter / 2 * Math.sin(i * k);
let x1 = cDiameter / 2 * Math.cos(n * k);
let y1 = cDiameter / 2 * Math.sin(n * k);
s.stroke(tinycolor("#fc0303").spin(moduloNumber * 2).toRgbString());
s.line(x0, y0, x1, y1);
}
moduloNumber += stepSize;
};
s.windowResized = () => {
s.resizeCanvas(width(), height());
};
};
const simulationP5 = new p5(simulation);