Did stuff

CHANGELOG.md

@@ -8,4 +8,8 @@
 - Placing down new body now snap to grid
 - Added place preview
 - Fixed glitch when placing down two bodies at same position
-
+- Improved performance
+- Added option to change gravity
+- Simulation now pause during panning and zooming
+- Better colors
+- Added Undo/Redo placing bodies

index.html

@@ -47,7 +47,7 @@
  <div class="sliders">
  <div class="slider">
  <label for="speed">Speed</label>
- <input type="number" id="speed" min="-99" max="99" value="50">
+ <input type="number" id="speed" value="50">
  </div>
  <div class="slider">
  <label for="gravity">Gravity</label>

src/Body.ts

@@ -43,7 +43,7 @@ export default class Body {
  return this.position.distance(b.position);
  }
 
- draw(context:CanvasRenderingContext2D) {
+ draw(context:CanvasRenderingContext2D, showTail: boolean) {
  context.beginPath();
  context.arc(this.position.x, this.position.y, this.size, 0, 2 * Math.PI);
  context.fillStyle = this.color;
@@ -54,12 +54,15 @@ export default class Body {
  return;
  }
 
- for (let i = 1; i < this.previousStates.length; i++) {
- const currState = this.previousStates[i];
- const prevState = this.previousStates[i-1];
+ // Draw tail
+ if (showTail) {
  context.beginPath();
- context.moveTo(currState.x, currState.y);
- context.lineTo(prevState.x, prevState.y);
+ for (let i = 1; i < this.previousStates.length; i++) {
+ const currState = this.previousStates[i];
+ const prevState = this.previousStates[i-1];
+ context.moveTo(currState.x, currState.y);
+ context.lineTo(prevState.x, prevState.y);
+ }
  context.strokeStyle = this.color;
  context.stroke();
  }

src/Universe.ts

@@ -1,15 +1,15 @@
 import Vector2 from "./Vector2";
 import Body from './Body';
 
-const GRAVITY_CONSTANT = 100.0;
-
-function gravity(m1:number, m2:number, dist:number) {
- return (GRAVITY_CONSTANT * m1 * m2) / ((dist * dist) + 9000);
+function gravity(G:number, m1:number, m2:number, dist:number) {
+ return (G * m1 * m2) / ((dist * dist) + 9000);
 }
 
 export default class Universe {
  bodies: Body[];
  previousPlacedCoords: {};
+ lastAddedBody = [];
+ lastRemovedBody = [];
 
  constructor() {
  this.bodies = [];
@@ -21,11 +21,30 @@ export default class Universe {
  b.position.set(x, y);
 
  this.bodies.push(b);
+ this.lastAddedBody.push(b);
 
  this.previousPlacedCoords[`${x}:${y}`] = true;
  }
  }
 
+ undoLastPlacedBody() {
+ if (this.lastAddedBody.length) {
+ const lastAddedBody = this.lastAddedBody[this.lastAddedBody.length-1];
+ this.bodies = this.bodies.filter(body => body !== lastAddedBody);
+ this.lastAddedBody.pop();
+ this.lastRemovedBody.push(lastAddedBody);
+ }
+ }
+
+ redoLastPlacedBody() {
+ if (this.lastRemovedBody.length) {
+ const lastRemovedBody = this.lastRemovedBody[this.lastRemovedBody.length-1];
+ this.bodies.push(lastRemovedBody);
+ this.lastAddedBody.push(lastRemovedBody)
+ this.lastRemovedBody.pop();
+ }
+ }
+
  getBodyByPoint(x:number, y:number) {
  let result = null;
 
@@ -46,7 +65,7 @@ export default class Universe {
  this.previousPlacedCoords = {};
  }
 
- update(dt:number) {
+ update(dt:number, G:number) {
  this.previousPlacedCoords = {};
  // Calculate gravitational forces between all bodies. We need at least
  // two bodies to do this, of course.
@@ -57,7 +76,7 @@ export default class Universe {
  let b2 = this.bodies[j];
 
  if (b1 !== b2) {
- let force = gravity(b1.mass, b2.mass, b1.distance(b2));
+ let force = gravity(G, b1.mass, b2.mass, b1.distance(b2));
  let acceleration = new Vector2(b1.position);
  acceleration.subtract(b2.position);
  acceleration.normalize();
@@ -78,7 +97,8 @@ export default class Universe {
  });
  }
 
- draw(context:CanvasRenderingContext2D) {
- this.bodies.forEach(body => body.draw(context));
+ // Draw
+ draw(context:CanvasRenderingContext2D, showTail: boolean) {
+ this.bodies.forEach(body => body.draw(context, showTail));
  }
 }

src/main.ts

@@ -1,7 +1,6 @@
 // Warning: Spagetti code
 // TODO:
 // Add undo/redo placing bodies
-// Make gravity input functional
 
 import './style.css'
 
@@ -22,6 +21,7 @@ let nextColor = "random";
 let nextMass = 10;
 let bodyToFollow = null;
 let isTouchDevice = false;
+let gravity = 100.0;
 
 let U = new Universe();
 
@@ -31,12 +31,12 @@ orbit(U);
 function simulation(context: CanvasRenderingContext2D) {
  let nowTime = (new Date()).getTime();
  let time = (nowTime - startTime);
+
  if (simulationRunning && !autoPause && !isDragging) {
- U.update(time / simulationSpeed);
+ U.update(time / simulationSpeed, gravity);
  }
 
- U.draw(context);
-
+ U.draw(context, true);
  startTime = nowTime;
 }
 
@@ -87,22 +87,20 @@ function draw() {
  endX = (Math.floor(endX/gridSize) * gridSize) + gridSize
  endY = (Math.floor(endY/gridSize) * gridSize) + gridSize
 
+ ctx.beginPath();
  for (let i = startY; i <= endY; i += gridSize) {
- ctx.beginPath();
  ctx.moveTo(startX, i);
  ctx.lineTo(endX, i);
- ctx.strokeStyle = "#323232"
- ctx.stroke();
  }
 
  for (let i = startX; i <= endX; i += gridSize) {
- ctx.beginPath();
  ctx.moveTo(i, startY);
  ctx.lineTo(i, endY);
- ctx.strokeStyle = "#323232"
- ctx.stroke();
  }
 
+ ctx.strokeStyle = "#323232"
+ ctx.stroke();
+
  simulation(ctx);
 
  if (bodyToFollow) {
@@ -271,14 +269,18 @@ function adjustZoom(zoomAmount?: number, zoomFactor?: number) {
 
 
 window.addEventListener('load', () => {
+ // Controls
  const playPauseBtn = document.getElementById('play-pause-btn');
  const panAddBtn = document.getElementById('pan-add-btn');
  const clearBtn = document.getElementById('clear');
 
+ // Settings
  const massSlider = document.getElementById('mass');
  const speedSlider:HTMLInputElement = (document.getElementById('speed')) as HTMLInputElement;
  const colorInput = document.getElementById('color');
+ const gravityInput = document.getElementById('gravity');
 
+ // Simulations
  const setOrbit = document.getElementById('set-orbit');
  const setGrid = document.getElementById('set-grid');
  const setInfinity = document.getElementById('set-infinity');
@@ -298,6 +300,7 @@ window.addEventListener('load', () => {
  }
  }
 
+ // Simulations
  setOrbit.addEventListener('click',setPattern(orbit));
  setGrid.addEventListener('click', setPattern(grid));
  setInfinity.addEventListener('click', setPattern(infinity));
@@ -309,6 +312,7 @@ window.addEventListener('load', () => {
  canvas = (document.getElementById("canvas")) as HTMLCanvasElement;
  ctx = canvas.getContext('2d');
 
+ // Settings
  massSlider.addEventListener('input', (e:InputEvent) => {
  nextMass = parseInt((e.target as HTMLInputElement).value);
  });
@@ -326,6 +330,10 @@ window.addEventListener('load', () => {
  }
  })
 
+ gravityInput.addEventListener('input', (e) => {
+ gravity = parseInt((e.target as HTMLInputElement).value)
+ })
+
  speedSlider.value = (simulationSpeed) + '';
 
  function pausePlay() {
@@ -353,6 +361,10 @@ window.addEventListener('load', () => {
  addPan(true);
  } else if (e.key === "p" || e.code === "P") {
  addPan(false);
+ } else if (e.ctrlKey && (e.key === "z" || e.code === "Z")) {
+ U.undoLastPlacedBody();
+ } else if (e.ctrlKey && (e.key === "y" || e.code === "Y")) {
+ U.redoLastPlacedBody();
  }
  });
 

src/niceColors.ts

@@ -1,12 +1,12 @@
 let currentIndex = 0;
 
 export const niceColors = [
- '#50FA7B', // Green
- '#C778DD', // Violet
- '#62AEEF', // Blue
- '#FF6E6E', // Red
- '#A7B7D6', // Light Blue
- '#F1FA8C', // Yellow
+ '#60DB6C', // Green
+ '#FF5353', // Red
+ '#FFEE58', // Yellow
+ '#71FFD4', // Hatsune Miku color
+ '#5259FF', // Blue-ish violet
+ '#C479FF', // Pink-ish violet
 ];
 
 export function getRandomNiceColor() {

src/style.css

@@ -24,7 +24,7 @@ a,
 }
 
 .btn {
- border-radius: 3px;
+ border-radius: 5px;
  background: unset;
  border: none;
  cursor: pointer;
@@ -38,6 +38,11 @@ a,
  background: #323232;
 }
 
+button.btn {
+ width: 54px;
+ height: 54px;
+}
+
 .tool-bar {
  position: fixed;
  top: 11px;
@@ -61,7 +66,7 @@ a,
  border-bottom: none;
  width: 100px;
  right: 0px;
- top: -1px;
+ top: -2px;
  transform: translate(100%);
 }
 
@@ -109,7 +114,7 @@ a,
  display: flex;
  flex-direction: column;
  align-items: end;
- border-radius: 3px;
+ border-radius: 5px;
  margin-bottom: 10px;
  width: fit-content;
 }
@@ -145,11 +150,13 @@ input {
  font-family: monospace;
  pointer-events: none;
  padding: 6px;
+ user-select: none;
 }
 
 .links {
+ user-select: none;
  position: fixed;
- bottom: 5px;
+ bottom: 7px;
  right: 5px;
  font-size: 12px;
  font-family: monospace;
@@ -159,9 +166,9 @@ input {
  color: #A0A0A0;
 }
 
-@media screen and (max-width: 500px) {
+@media screen and (max-width: 724px) {
  .info-bar {
- bottom: 20px;
+ height: 30px;
  }
  .links {
  left: 5px;