Fixed merge conflict

README.md

@@ -37,4 +37,3 @@ It's a web-based simulation so no need to install anything, just visit
 
 - Add saving and loading feature
 - Add interesting simulations to load
-- Add merge bodies on collition option

index.html

@@ -20,6 +20,15 @@
       <button class="btn" id="clear">
         <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M3.49997 12.8995C2.71892 13.6805 2.71892 14.9468 3.49997 15.7279L7.35785 19.5858H4.08576C3.53347 19.5858 3.08576 20.0335 3.08576 20.5858C3.08576 21.1381 3.53347 21.5858 4.08576 21.5858H20.0858C20.638 21.5858 21.0858 21.1381 21.0858 20.5858C21.0858 20.0335 20.638 19.5858 20.0858 19.5858H10.9558L20.4705 10.071C21.2516 9.28999 21.2516 8.02366 20.4705 7.24261L16.2279 2.99997C15.4468 2.21892 14.1805 2.21892 13.3995 2.99997L3.49997 12.8995ZM7.82579 11.4021L4.91418 14.3137L9.15683 18.5563L12.0684 15.6447L7.82579 11.4021ZM9.24 9.98787L13.4826 14.2305L19.0563 8.65683L14.8137 4.41418L9.24 9.98787Z" fill="currentColor" /></svg>
       </button>
+      <div class="btn" id="box-btn">
+        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 12C9.44769 12 9 12.4477 9 13C9 13.5523 9.44769 14 10 14H14C14.5522 14 15 13.5523 15 13C15 12.4477 14.5522 12 14 12H10Z" fill="currentColor" /><path fill-rule="evenodd" clip-rule="evenodd" d="M4 2C2.34314 2 1 3.34314 1 5V19C1 20.6569 2.34314 22 4 22H20C21.6569 22 23 20.6569 23 19V5C23 3.34314 21.6569 2 20 2H4ZM20 4H4C3.44769 4 3 4.44769 3 5V8H21V5C21 4.44769 20.5522 4 20 4ZM3 19V10H21V19C21 19.5523 20.5522 20 20 20H4C3.44769 20 3 19.5523 3 19Z" fill="currentColor" /></svg>
+        <div id="box">
+          <button id="set-orbit">Orbit</button>
+          <button id="set-grid">Grid</button>
+          <button id="set-infinity">Infinity</button>
+          <button id="set-circle">Circle</button>
+        </div>
+      </div>
     </div>
     <div class="sliders">
       <div class="slider">

package.json

@@ -1,6 +1,6 @@
 {
   "name": "gravity-sandbox",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "A simple, chaotic gravity simulator",
   "scripts": {
     "dev": "vite",

public/service-worker.js

@@ -1,4 +1,4 @@
-const version = '1.0.1';
+const version = '1.1.0';
 
 const contentToCache = [
   '/',

src/Body.js

@@ -1,6 +1,6 @@
 import Vector2 from "./Vector2";
+import { getRandomNiceColor } from './niceColors';
 
-const DEFAULT_COLOR = "#4c4cff";
 const TAIL_SIZE = 50;
 
 export function mass2radius(mass) {
@@ -11,7 +11,7 @@ export default class Body {
   constructor(mass, color) {
     this.mass = mass;
     this.size = mass2radius(mass);
-    this.color = color != null ? color : DEFAULT_COLOR;
+    this.color = color != null ? color : getRandomNiceColor();
     this.invMass = 1.0 / mass;
     this.position = new Vector2(0.0, 0.0);
     this.velocity = new Vector2(0.0, 0.0);

src/Vector2.js

@@ -56,6 +56,13 @@ export default class Vector2 {
     this.y /= length;
   }
 
+  rotate(angle) {
+    const resultX = this.x * Math.cos(angle) - this.y * Math.sin(angle)
+    const resultY = this.x * Math.sin(angle) + this.y * Math.cos(angle)
+    this.x = resultX;
+    this.y = resultY;
+  }
+
 }
 
 

src/main.js

@@ -4,6 +4,9 @@ import Body, { mass2radius } from './Body';
 import Universe from './Universe';
 import { getRandomNiceColor } from './niceColors';
 import Vector2 from './Vector2';
+import {
+  pattern1, pattern2, pattern3, pattern4
+} from './patterns';
 
 let autoPause = false;
 let simulationRunning = false;
@@ -13,15 +16,10 @@ let panMode = true;
 let nextColor = getRandomNiceColor();
 let nextMass = 10;
 let bodyToFollow = null;
+let isTouchDevice = false;
 
 let U = new Universe(100.0);
-U.addBody(new Body(1000.0, nextColor), 0, 0);
-let moon1 = new Body(10);
-moon1.velocity.set(0, 20);
-U.addBody(moon1, 200, 0);
-let moon2 = new Body(10);
-moon2.velocity.set(0, -20);
-U.addBody(moon2, -200, 0);
+pattern1(U);
 
 function simulation(context) {
   let nowTime = (new Date()).getTime();
@@ -46,12 +44,13 @@ let SCROLL_SENSITIVITY = 0.0005
 let mousePos = { x: 0, y: 0 }; // In 2d world
 let mousePosInViewport = { x: 0, y: 0 };
 let launchStart = mousePos;
+let launching = false;
 let infoBar;
 
 // The bottom left section
 function updateInfoBar() {
   infoBar.innerText = `
-    Looking at : ${(cameraOffset.x+'').slice(0, 6)} ${(cameraOffset.y+'').slice(0, 6)}
+    Looking at : ${(cameraOffset.x+'').slice(0, 7)} ${(cameraOffset.y+'').slice(0, 7)}
     Zoom : ${(cameraZoom+'').slice(0, 4)}
     Bodies: ${U.bodies.length}
     Speed : ${simulationSpeed} (Less is faster)
@@ -78,18 +77,20 @@ function draw() {
 
   updateMousePosition();
 
-  // Draw the preview of body at mouse location
-  ctx.fillStyle = nextColor
-  ctx.beginPath();
-  ctx.arc(mousePos.x, mousePos.y, mass2radius(nextMass), 0, 2 * Math.PI);
-  ctx.fill();
-  ctx.strokeStyle = nextColor;
-
-  // Draw line of drag when placing
-  ctx.beginPath();
-  ctx.moveTo(launchStart.x, launchStart.y);
-  ctx.lineTo(mousePos.x, mousePos.y);
-  ctx.stroke();
+  if (launching) {
+    // Draw the preview of body at mouse location
+    ctx.fillStyle = nextColor
+    ctx.beginPath();
+    ctx.arc(mousePos.x, mousePos.y, mass2radius(nextMass), 0, 2 * Math.PI);
+    ctx.fill();
+    ctx.strokeStyle = nextColor;
+
+    // Draw line of drag when placing
+    ctx.beginPath();
+    ctx.moveTo(launchStart.x, launchStart.y);
+    ctx.lineTo(mousePos.x, mousePos.y);
+    ctx.stroke();
+  }
 
   requestAnimationFrame(draw);
 }
@@ -118,7 +119,14 @@ function onPointerDown(e) {
     isDragging = true
     canvas.style.cursor = 'move';
   } else {
-    launchStart = { ...mousePos };
+    updateMousePositionInViewport(e);
+    updateMousePosition();
+
+    launchStart = {
+      x: ((getEventLocation(e).x - window.innerWidth/2)/cameraZoom) - (cameraOffset.x - window.innerWidth/2),
+      y: ((getEventLocation(e).y - window.innerHeight/2)/cameraZoom) - (cameraOffset.y - window.innerHeight/2),
+    };
+    launching = true;
   }
 }
 
@@ -129,8 +137,8 @@ function onPointerUp(e) {
   canvas.style.cursor = 'default';
 
   if ((!panMode && e.button !== 2) || (panMode && e.button === 2)) {
-    let x = (getEventLocation(e).x/cameraZoom - cameraOffset.x);
-    let y = (getEventLocation(e).y/cameraZoom - cameraOffset.y);
+    let x = (mousePosInViewport.x/cameraZoom - cameraOffset.x);
+    let y = (mousePosInViewport.y/cameraZoom - cameraOffset.y);
     let b = new Body(nextMass, nextColor);
     let v = new Vector2(x - dragStart.x, y - dragStart.y);
     v.x = -v.x
@@ -142,6 +150,7 @@ function onPointerUp(e) {
     nextColor = getRandomNiceColor();
     launchStart = mousePos;
     updateInfoBar();
+    launching = false;
   }
 }
 
@@ -167,7 +176,7 @@ function onPointerMove(e) {
 }
 
 function handleTouch(e, singleTouchHandler) {
-  if (e.touches.length == 1) {
+  if (e.touches.length <= 1) {
     e.button = 0;
     singleTouchHandler(e)
   } else if (e.type == "touchmove" && e.touches.length == 2) {
@@ -214,9 +223,48 @@ window.addEventListener('load', () => {
   let playPauseBtn = document.getElementById('play-pause-btn');
   let panAddBtn = document.getElementById('pan-add-btn');
   let clearBtn = document.getElementById('clear');
+
   let massSlider = document.getElementById('mass-slider');
   let speedSlider = document.getElementById('speed-slider');
 
+
+  let setOrbit = document.getElementById('set-orbit');
+  let setGrid = document.getElementById('set-grid');
+  let setInfinity = document.getElementById('set-infinity');
+  let setCircle = document.getElementById('set-circle');
+
+  setOrbit.addEventListener('click', () => {
+    const [zoom, speed] = pattern1(U);
+    cameraZoom = zoom;
+    simulationSpeed = speed;
+    cameraOffset = { x: window.innerWidth/2, y: window.innerHeight/2 }
+    updateInfoBar();
+  });
+
+  setGrid.addEventListener('click', () => {
+    const [zoom, speed] = pattern2(U);
+    cameraZoom = zoom;
+    simulationSpeed = speed;
+    updateInfoBar();
+    cameraOffset = { x: window.innerWidth/2, y: window.innerHeight/2 }
+  });
+
+  setInfinity.addEventListener('click', () => {
+    const [zoom, speed] = pattern3(U);
+    cameraZoom = zoom;
+    simulationSpeed = speed;
+    updateInfoBar();
+    cameraOffset = { x: window.innerWidth/2, y: window.innerHeight/2 }
+  });
+
+  setCircle.addEventListener('click', () => {
+    const [zoom, speed] = pattern4(U);
+    cameraZoom = zoom;
+    simulationSpeed = speed;
+    updateInfoBar();
+    cameraOffset = { x: window.innerWidth/2, y: window.innerHeight/2 }
+  });
+
   infoBar = document.getElementById('info-bar');
   canvas = document.getElementById("canvas");
   ctx = canvas.getContext('2d');
@@ -265,12 +313,12 @@ window.addEventListener('load', () => {
   clearBtn.addEventListener('click', () => { U.clear(); updateInfoBar(); bodyToFollow = null });
 
   // Canvas zoop and pan
-  canvas.addEventListener('mousedown', onPointerDown)
-  canvas.addEventListener('touchstart', (e) => handleTouch(e, onPointerDown))
-  canvas.addEventListener('mouseup', onPointerUp)
-  canvas.addEventListener('touchend',  (e) => handleTouch(e, onPointerUp))
+  canvas.addEventListener('mousedown', (e) => { if (!isTouchDevice) { onPointerDown(e) }})
+  canvas.addEventListener('touchstart', (e) => { handleTouch(e, onPointerDown); isTouchDevice = true })
+  canvas.addEventListener('mouseup', (e) => { if (!isTouchDevice) { onPointerUp(e) }})
+  canvas.addEventListener('touchend',  (e) => { handleTouch(e, onPointerUp) })
   canvas.addEventListener('mousemove', onPointerMove)
-  canvas.addEventListener('touchmove', (e) => handleTouch(e, onPointerMove))
+  canvas.addEventListener('touchmove', (e) => { handleTouch(e, onPointerMove) })
   canvas.addEventListener( 'wheel', (e) => adjustZoom(e.deltaY*SCROLL_SENSITIVITY))
 
   // Pause Simulation when focuse change

src/patterns.js

@@ -0,0 +1,69 @@
+import Body from './Body';
+import Vector2 from './Vector2';
+
+// A planet with two moons
+export function pattern1(U) {
+  U.clear();
+
+  U.addBody(new Body(1000), 0, 0);
+  let moon1 = new Body(10);
+  moon1.velocity.set(0, 20);
+  U.addBody(moon1, 200, 0);
+  let moon2 = new Body(10);
+  moon2.velocity.set(0, -20);
+  U.addBody(moon2, -200, 0);
+
+  return [1, 44];
+}
+
+// A grid of planets
+export function pattern2(U) {
+  U.clear();
+
+  U.addBody(new Body(1000), 0, 400);
+  U.addBody(new Body(1000), 0, -400);
+  U.addBody(new Body(1000), 400, 0);
+  U.addBody(new Body(1000), -400, 0);
+
+  for (let i = -2.5; i <= 2.5; i++) {
+    for (let j = -2.5; j <= 2.5; j++) {
+      U.addBody(new Body(10), i * 60, j * 60);
+    }
+  }
+
+  return [0.78, 199];
+}
+
+// INFINITY
+export function pattern3(U) {
+  U.clear();
+
+  for (let i = 0; i < 360; i += 10) {
+    const v = new Vector2(-200, 0);
+    v.x = v.x * Math.cos(i * (Math.PI/180)) - v.y * Math.sin(i * (Math.PI/180))
+    v.y = v.x * Math.sin(i * (Math.PI/180)) + v.y * Math.cos(i * (Math.PI/180))
+    U.addBody(new Body(10), v.x, v.y);
+  }
+
+  return [1.58, 69];
+}
+
+// Circle
+export function pattern4(U) {
+  U.clear();
+
+  U.addBody(new Body(50), 0, 0);
+
+  for (let i = 0; i < 360; i += 10) {
+    const p = new Vector2(-200, 0);
+    const v = new Vector2(0, 5);
+    p.rotate(i * Math.PI/180);
+    v.rotate(i * Math.PI/180);
+    const b = new Body(10);
+    b.velocity.set(v.x, v.y);
+    U.addBody(b, p.x, p.y);
+  }
+
+  return [1.47, 44];
+}
+