Add particles

dist/img/background.svg

@@ -15,7 +15,10 @@
    version="1.1"
    id="svg8"
    inkscape:version="0.92.2 5c3e80d, 2017-08-06"
-   sodipodi:docname="background.svg">
+   sodipodi:docname="background.svg"
+   inkscape:export-filename="/home/asraelite/code/js/improcket/dist/img/background.png"
+   inkscape:export-xdpi="96"
+   inkscape:export-ydpi="96">
   <defs
      id="defs2" />
   <sodipodi:namedview
@@ -25,9 +28,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="0.079999996"
+     inkscape:zoom="0.05656854"
-     inkscape:cx="1460.2236"
+     inkscape:cx="3137.2136"
-     inkscape:cy="3294.9439"
+     inkscape:cy="3051.1973"
      inkscape:document-units="mm"
      inkscape:current-layer="layer1"
      showgrid="false"

js/graphics/background.mjs

@@ -16,7 +16,7 @@ export function render() {
 
 	renderLayer(patterns.back, 0.3, 1);
 	renderLayer(patterns.middle, 0.5, 0.3);
-	renderLayer(patterns.front, 0.7, 0.3);
+	//renderLayer(patterns.front, 0.7, 0.3);
 }
 
 function renderLayer(pattern, speed = 1, scale = 1) {

js/graphics/world.mjs

@@ -3,11 +3,14 @@ import {images as assets} from '../assets.mjs';
 import * as world from '../world/index.mjs';
 
 export function render() {
+	world.particles.forEach(renderParticle);
 	world.celestials.forEach(renderCelestial);
 	world.ships.forEach(renderShip);
-	if (typeof window.q !== 'undefined') {
-		context.fillStyle = 'red';
 }
+
+function renderParticle(particle) {
+	context.fillStyle = particle.color;
+	context.fillRect(...particle.com, particle.size, particle.size);
 }
 
 function renderShip(ship) {

js/world/body.mjs

@@ -20,6 +20,10 @@ export default class Body {
 		return [this.x, this.y];
 	}
 
+	get speed() {
+		return Math.sqrt(this.xvel ** 2 + this.yvel ** 2);
+	}
+
 	getWorldPoint(lx, ly) {
 		let [cx, cy] = this.localCom;
 		let [nx, ny] = this.rotateVector(lx - cx, ly - cy, this.r);
@@ -38,6 +42,10 @@ export default class Body {
 			(y * Math.cos(this.r) - x * Math.sin(this.r))];
 	}
 
+	relativeVector(x, y) {
+		return this.rotateVector(x, y, this.r);
+	}
+
 	tickMotion() {
 		this.x += this.xvel;
 		this.y += this.yvel;

js/world/index.mjs

@@ -6,6 +6,7 @@ export {getSectorFromWorld, getContainedSectors} from './sector.mjs';
 export const entities = new Set();
 export const celestials = new Set();
 export const ships = new Set();
+export const particles = new Set();
 
 export let playerShip = null;
 
@@ -16,12 +17,14 @@ export function setPlayerShip(ship) {
 export function init() {
 	entities.clear();
 	celestials.clear();
+	ships.clear();
+	particles.clear();
 	spawn.player();
 	spawn.startPlanet();
-
 }
 
 export function tick() {
+	particles.forEach(p => p.tick());
 	celestials.forEach(c => c.tick());
 	entities.forEach(e => e.tick());
 	ships.forEach(s => s.tick());

js/world/particle.mjs

@@ -0,0 +1,63 @@
+import Body from './body.mjs';
+import {celestials, particles} from './index.mjs';
+
+export function createThrustExhaust(thruster) {
+	let ship = thruster.ship;
+	let [fx, fy] = ship.relativeVector(0, 0.2);
+	let [dx, dy] = ship.relativeVector((Math.random() - 0.5) * 0.5, 0.5);
+	let [cx, cy] = thruster.com;
+	particles.add(new Particle(cx + dx, cy + dy, {
+		xvel: ship.xvel + fx,
+		yvel: ship.yvel + fy,
+		color: '#f4c542',
+		lifetime: 10,
+		size: 0.07
+	}));
+}
+
+class Particle extends Body {
+	constructor(x, y, {
+		xvel = 0,
+		yvel = 0,
+		spray = 0.1,
+		fizzle = 0,
+		maxFizzle = fizzle * 2,
+		color = '#fff',
+		gravity = false,
+		lifetime = 50,
+		size = 0.1,
+		friction = 0.99
+	}) {
+		super(x, y, 0.1);
+
+		this.size = size;
+		this.xvel = xvel + (Math.random() - 0.5) * spray;
+		this.yvel = yvel + (Math.random() - 0.5) * spray;
+		this.friction = friction;
+		this.fizzle = fizzle;
+		this.maxFizzle = maxFizzle;
+		this.color = color;
+		this.gravity = gravity;
+		this.life = lifetime;
+	}
+
+	get com() {
+		return [this.x - this.size / 2, this.y - this.size / 2];
+	}
+
+	tick() {
+		if (!this.life--) {
+			particles.delete(this);
+			return;
+		}
+
+		this.tickMotion();
+		if (this.gravity) this.tickGravity(celestials);
+
+		this.xvel *= this.friction;
+		this.yvel *= this.friction;
+		this.x += (Math.random() - 0.5) * this.fizzle;
+		this.y += (Math.random() - 0.5) * this.fizzle;
+		if (this.fizzle < this.mazFizzle) this.fizzle *= 1.05;
+	}
+}

js/world/ship.mjs

@@ -1,6 +1,7 @@
 import Module from './module.mjs';
 import Body from './body.mjs';
 import * as world from './index.mjs';
+import * as particle from './particle.mjs';
 
 export default class Ship extends Body {
 	constructor(x, y) {
@@ -20,6 +21,13 @@ export default class Ship extends Body {
 		this.tickMotion();
 		this.tickGravity(world.celestials);
 		this.resolveCollisions();
+
+		this.modules.forEach(m => {
+			if (m.type == 'thruster' && m.power !== 0) {
+				for (let i = 0; i < 2; i++) particle.createThrustExhaust(m);
+			}
+		});
+
 		this.modules.forEach(m => m.reset());
 	}