gPKrXL

gpkrxl.markdown

gPKrXL

A Pen by Evan Goode on CodePen.

License.

index.html

<canvas class="gravity"></canvas>

script.js

var G = 1
var scale = 2

function step(objects, canvas, context) {
	for (var i = 0; i < objects.length; i++) {
		if (
			objects[i].position.x - (objects[i].radius) > canvas.width ||
			objects[i].position.x + (objects[i].radius) < 0 ||
			objects[i].position.y - (objects[i].radius) > canvas.height ||
			objects[i].position.y + (objects[i].radius) < 0
		) {
			objects.splice(i, 1) // delete object
		} else { 
			for (var j = i + 1; j < objects.length; j++) {
				var distanceX = objects[j].position.x - objects[i].position.x
				var distanceY = objects[j].position.y - objects[i].position.y
				var distance = Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2))
				var threshold = objects[i].radius
				if (distance < threshold) {
					objects[i].mass += objects[j].mass
					objects[i].radius += objects[j].radius // update radius
					objects[i].velocity.x = (objects[i].velocity.x * objects[i].mass + objects[j] * objects[j].mass) / (objects[i].mass + objects[j].mass)
					objects[i].velocity.y = (objects[i].velocity.y * objects[i].mass + objects[j] * objects[j].mass) / (objects[i].mass + objects[j].mass)
									
					objects.splice(j, 1)
				} else {
					var proportionDistanceX = distanceX / distance
					var proportionDistanceY = distanceY / distance
					
					var signDistanceX = Math.sign(distanceX)
					var signDistanceY = Math.sign(distanceY)
					
					var raw = G / Math.pow(distance, 2)
					var forceI = raw * objects[j].mass
					var forceJ = raw * objects[i].mass
					
					objects[i].velocity.x += Math.abs(forceI * proportionDistanceX) * signDistanceX
					objects[i].velocity.y += Math.abs(forceI * proportionDistanceY) * signDistanceY
					objects[j].velocity.x -= Math.abs(forceJ * proportionDistanceX) * signDistanceX
					objects[j].velocity.y -= Math.abs(forceJ * proportionDistanceY) * signDistanceY
				}
			}
			objects[i].position.x += objects[i].velocity.x
			objects[i].position.y += objects[i].velocity.y
		}
	}
}

function create(event) {
	objects.push({
		mass: 10,
		radius: 5,
		position: {
			x: event.pageX * scale,
			y: event.pageY * scale
		},
		velocity: {
			x: 0,
			y: 0
		},
		acceleration: {
			x: 0,
			y: 0
		}
	})
}

function draw(objects, canvas, context) {
	context.clearRect(0, 0, canvas.width, canvas.height)
	for(var i = 0; i < objects.length; i++) {
		context.beginPath()
		context.arc(objects[i].position.x, objects[i].position.y, objects[i].radius, 0, 2 * Math.PI)
		context.fillStyle = "white"
		context.fill()
	}
}

var objects = []

var canvas = document.querySelector(".gravity")
var context = canvas.getContext("2d")

function resize() {
	canvas.width = window.innerWidth * scale
	canvas.height = window.innerHeight * scale
}
window.addEventListener("resize", resize)
resize()

canvas.addEventListener("click", create)

window.requestAnimationFrame(function() {update(objects, canvas, context)})

function update(objects, canvas, context) {
	step(objects, canvas, context)
	draw(objects, canvas, context)
	window.requestAnimationFrame(function() {update(objects, canvas, context)})
}

style.scss

html, body {
	height: 100%;
	margin: 0;
	overflow: hidden;
}
.gravity {
	height: 100%;
	width: 100%;
	background: black;
}