@meteora-digital/orbit

Orbit System

This orbit system is an es6 class that simulates orbiting planets or bodies.

Installation

with webpack

yarn add @meteora-digital/orbit

HTML Usage

<canvas class="canvas-orbit"></canvas>

.canvas-orbit {
  width: 100vw;
  height: 100vh;
}

import OrbitSystem from '@meteora-digital/orbit';

const random = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

const System = new OrbitSystem(document.querySelector('canvas.canvas-orbit'));

for (var i = 0; i < 30; i++) {
  let mass = random(300,500);
  let radius = mass / 100;

  System.createBody({
    x: random(0,window.innerWidth),
    y: random(0, window.innerHeight),
    mass: mass,
    radius: radius,
  });
}

System.start();

OrbitSystem Arguments

Argument	Type	Description
1	Dom Element	The canvas we want to draw our system in
2	Object	Options

OrbitSystem Options

Gravity

determines the global gravity force.

{
  gravity: 1,
}

OrbitSystem Methods

createBody

Creates a new body in the system

System.createBody({
  x: random(0,window.innerWidth),
  y: random(0, window.innerHeight),
  mass: mass,
  radius: radius,
});

start

Begins the system

System.start();

stop

Stops the system

System.stop();

Body Options

Option	Type	Description	Default
x	Number	X Coordinate to place the body	0
y	Number	Y Coordinate to place the body	0
v	Number	Initial velocity of the body	0
angle	Number	The initial angle the body is moving	0
mass	Number	How attractive this body is	1
radius	Number	The size of our body	5
boundary	Number	Radius of interactive area	true
color	string	Colour of the body	'#000000'
trail	number	Length of our trails - limit this depending on computer memory	0
mobile	Boolean	Controls the mobility of the body	true

Inspired by

guest73's YouTube Video

License

MIT