initial commit
This commit is contained in:
commit
303a423a29
GPG Key ID:
0F5B99F3F4D0C087
32
index.html
Normal file
32
index.html
Normal file
@ -0,0 +1,32 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<title>Gravity Simulator</title>
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<style>
|
||||
body {
|
||||
background-color: #000;
|
||||
color: #8f8;
|
||||
font-family: monospace;
|
||||
font-size: 16pt;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
div[id=simulator] {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
<script type="module">
|
||||
import { Sim } from './simulator.js';
|
||||
const sim = new Sim();
|
||||
sim.init('simulator');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="simulator"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
192
simulator.js
Normal file
192
simulator.js
Normal file
@ -0,0 +1,192 @@
|
||||
export class MassObject {
|
||||
mass = 0;
|
||||
density = 1;
|
||||
position = {x: undefined, y: undefined};
|
||||
color = {r: undefined, g: undefined, b: undefined};
|
||||
created = undefined;
|
||||
|
||||
constructor(x, y) {
|
||||
this.position.x = x;
|
||||
this.position.y = y;
|
||||
this.color.r = Math.random() * 256;
|
||||
this.color.g = Math.random() * 256;
|
||||
this.color.b = Math.random() * 256;
|
||||
this.created = document.timeline.currentTime;
|
||||
}
|
||||
|
||||
get age() {
|
||||
return document.timeline.currentTime - this.created;
|
||||
}
|
||||
}
|
||||
|
||||
export class Sim {
|
||||
info = {};
|
||||
objects = [];
|
||||
frame = 0;
|
||||
time = undefined;
|
||||
|
||||
MASS_CREATION_RATE = 0.001;
|
||||
DISPLAY_OBJECTS_INFO = false;
|
||||
DISPLAY_CURSOR_INFO = false;
|
||||
|
||||
fullscreen() {
|
||||
this.canvas.width = document.documentElement.clientWidth;
|
||||
this.canvas.height = document.documentElement.clientHeight;
|
||||
// this.info['Canvas'] = `${this.canvas.width} x ${this.canvas.height}`;
|
||||
this.fillCanvas();
|
||||
this.renderInfo();
|
||||
}
|
||||
|
||||
fillCanvas() {
|
||||
const ctx = this.ctx;
|
||||
ctx.fillStyle = '#000';
|
||||
ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
}
|
||||
|
||||
renderInfo() {
|
||||
this.infoBox.innerHTML = '';
|
||||
const table = document.createElement('table');
|
||||
for (let [k, v] of Object.entries(this.info)) {
|
||||
let row = document.createElement('tr');
|
||||
let keyCell = document.createElement('td');
|
||||
keyCell.innerHTML = `${k}: `;
|
||||
row.appendChild(keyCell);
|
||||
let vs = Array.isArray(v) ? v : [v];
|
||||
for (let x of v) {
|
||||
let valueCell = document.createElement('td');
|
||||
valueCell.innerHTML = x;
|
||||
row.appendChild(valueCell);
|
||||
}
|
||||
table.appendChild(row);
|
||||
}
|
||||
this.infoBox.appendChild(table);
|
||||
}
|
||||
|
||||
init(divId) {
|
||||
this.divId = divId;
|
||||
const div = document.getElementById(this.divId);
|
||||
this.div = div;
|
||||
|
||||
// Add info text box
|
||||
const infoBox = document.createElement('div');
|
||||
this.div.appendChild(infoBox);
|
||||
this.infoBox = infoBox;
|
||||
infoBox.style.position = 'absolute';
|
||||
infoBox.style.top = 0;
|
||||
infoBox.style.left = 0;
|
||||
infoBox.width = 'fit-content';
|
||||
infoBox.style.zIndex = 1;
|
||||
|
||||
// Create canvas that fills the window
|
||||
// If the window resizes, also resize the canvas
|
||||
const canvas = document.createElement('canvas')
|
||||
this.canvas = canvas;
|
||||
this.ctx = canvas.getContext("2d");
|
||||
this.div.appendChild(canvas);
|
||||
canvas.style.position = 'absolute';
|
||||
canvas.style.top = 0;
|
||||
canvas.style.left = 0;
|
||||
this.fullscreen();
|
||||
window.addEventListener('resize', () => this.fullscreen());
|
||||
|
||||
// Monitor mouse movements
|
||||
const el = window;
|
||||
el.addEventListener('mousemove', e => {
|
||||
if (this.DISPLAY_CURSOR_INFO) {
|
||||
this.info['Mouse move'] = [`${e.clientX}, `, `${e.clientY}`];
|
||||
this.renderInfo();
|
||||
}
|
||||
});
|
||||
// Monitor touch events
|
||||
el.addEventListener('touchmove', e => {
|
||||
if (this.DISPLAY_CURSOR_INFO) {
|
||||
this.info['Touch move'] = [`${e.touches[0].pageX}, `, `${e.touches[0].pageY}`];
|
||||
this.renderInfo();
|
||||
}
|
||||
});
|
||||
el.addEventListener('pointerdown', e => {
|
||||
if (this.DISPLAY_CURSOR_INFO) {
|
||||
this.info['Pointer down'] = [`${e.clientX}, `, `${e.clientY}`];
|
||||
this.renderInfo();
|
||||
}
|
||||
this.createObject(e.clientX, e.clientY);
|
||||
});
|
||||
el.addEventListener('pointerup', e => {
|
||||
if (this.DISPLAY_CURSOR_INFO) {
|
||||
this.info['Pointer up'] = [`${e.clientX}, `, `${e.clientY}`];
|
||||
this.renderInfo();
|
||||
}
|
||||
this.doneCreatingObject();
|
||||
});
|
||||
el.addEventListener('click', e => {
|
||||
if (this.DISPLAY_CURSOR_INFO) {
|
||||
this.info['Click'] = [`${e.clientX}, `, `${e.clientY}`];
|
||||
this.renderInfo();
|
||||
}
|
||||
});
|
||||
|
||||
// Initiate main loop
|
||||
this.time = document.timeline.currentTime;
|
||||
requestAnimationFrame(t => this.loop(t));
|
||||
}
|
||||
|
||||
// Create an object with mass that grows as pointer is held down
|
||||
createObject(x, y) {
|
||||
const obj = new MassObject(x, y);
|
||||
const idx = this.objects.length;
|
||||
this.creatingObject = idx;
|
||||
this.objects.push(obj);
|
||||
}
|
||||
|
||||
// Done creating object
|
||||
doneCreatingObject() {
|
||||
this.creatingObject = undefined;
|
||||
}
|
||||
|
||||
// Main loop
|
||||
loop(currentTime) {
|
||||
const elapsedTime = currentTime - this.time;
|
||||
this.time = currentTime;
|
||||
|
||||
// If we're creating an object, increment its mass
|
||||
// with the mass creation rate accelerating over time
|
||||
if (this.creatingObject !== undefined) {
|
||||
const obj = this.objects[this.creatingObject];
|
||||
const rate = this.MASS_CREATION_RATE * obj.age;
|
||||
obj.mass += rate * elapsedTime;
|
||||
}
|
||||
|
||||
// Display objects info
|
||||
if (this.DISPLAY_OBJECTS_INFO) {
|
||||
for (let i = 0; i < this.objects.length; i++) {
|
||||
const obj = this.objects[i];
|
||||
this.info[`Object ${i}`] = [`${obj.position.x}, `, `${obj.position.y}, `, `${obj.mass.toPrecision(6)} kg`];
|
||||
this.renderInfo();
|
||||
}
|
||||
}
|
||||
|
||||
this.fillCanvas();
|
||||
this.renderObjects();
|
||||
|
||||
requestAnimationFrame(t => this.loop(t));
|
||||
}
|
||||
|
||||
renderObject(idx) {
|
||||
const obj = this.objects[idx];
|
||||
const ctx = this.ctx;
|
||||
// radius should be proportional to cube root of mass
|
||||
const radius = Math.pow(obj.mass / obj.density, 1/3);
|
||||
const {r, g, b} = obj.color;
|
||||
const {x, y} = obj.position;
|
||||
ctx.fillStyle = `rgb(${r}, ${g}, ${b})`;
|
||||
ctx.beginPath();
|
||||
ctx.arc(x, y, radius, 0, 2*Math.PI);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
renderObjects() {
|
||||
for (let i = 0; i < this.objects.length; i++) {
|
||||
this.renderObject(i);
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user