|
|
|
class Manager {
|
|
|
|
|
|
|
|
pendulums: Pendulum[] = []
|
|
|
|
|
|
|
|
timescale = 1;
|
|
|
|
gravity = 9.81;
|
|
|
|
|
|
|
|
playing = false;
|
|
|
|
|
|
|
|
constructor() {
|
|
|
|
p.colorMode(p.HSB, 100);
|
|
|
|
let count = 100;
|
|
|
|
for (let i = 0; i < count; i++){
|
|
|
|
let rad = i / count / 1e3 + p.PI * 1.05;
|
|
|
|
let hue = i / count * 100;
|
|
|
|
let color = p.color(hue, 100, 100);
|
|
|
|
this.pendulums.push(
|
|
|
|
new Pendulum([1, 1, 1, 1, 1, 1, 1, 1], [50, 50, 50, 50, 50, 50, 50, 100 + i / count / 1000000], color)
|
|
|
|
);
|
|
|
|
}
|
|
|
|
p.colorMode(p.RGB);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
init(){
|
|
|
|
// @ts-ignore
|
|
|
|
const {createApp} = Vue;
|
|
|
|
createApp({
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
gravity: manager.gravity,
|
|
|
|
timescale: manager.timescale,
|
|
|
|
playingBtn: "play"
|
|
|
|
};
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
gravity(newGravity: string) {
|
|
|
|
manager.gravity = parseFloat(newGravity);
|
|
|
|
},
|
|
|
|
timescale(newScale: string){
|
|
|
|
manager.timescale = parseFloat(newScale);
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
togglePlay(){
|
|
|
|
manager.playing = !manager.playing;
|
|
|
|
this.playingBtn = manager.playing ? "pause" : "play";
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}).mount("#simulation");
|
|
|
|
}
|
|
|
|
|
|
|
|
update(){
|
|
|
|
if (this.playing) {
|
|
|
|
const h = this.timescale / (p.frameRate() || 60);
|
|
|
|
this.pendulums.forEach(p => p.update(h));
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
draw(){
|
|
|
|
p.push()
|
|
|
|
p.translate(p.width / 2, p.height / 2);
|
|
|
|
this.pendulums.forEach(p => p.draw());
|
|
|
|
p.pop();
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|