diff --git a/dist/img/background.svg b/dist/img/background.svg index 5691bd6..4257784 100644 --- a/dist/img/background.svg +++ b/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"> - - - - - - - - - + gradientTransform="matrix(0.28571428,0,0,0.28571428,69.582204,72.119537)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,126.24334,100.98465)" /> - - - + gradientTransform="matrix(0.28571428,0,0,0.28571428,109.13809,68.377763)" /> - - - - - - - - - - - - - - - - - - - - - - - - - + gradientTransform="matrix(0.28571428,0,0,0.28571428,88.82561,84.948474)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,58.891423,125.57344)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,36.440783,114.34812)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,78.669368,67.843224)" /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + gradientTransform="matrix(0.28571428,0,0,0.28571428,151.36668,56.617904)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,155.10845,42.719889)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,100.58547,43.788967)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,82.94568,89.759325)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,85.083837,115.95174)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,42.320713,119.69351)" /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + gradientTransform="matrix(0.28571428,0,0,0.28571428,37.509861,92.432021)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,65.840431,55.548826)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,30.560853,38.443576)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,21.47369,52.341592)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,120.36341,135.72968)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,110.20717,157.64578)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,123.57065,164.59479)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,158.31569,145.35139)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,126.24334,111.67543)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,88.291071,153.36947)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,54.615111,159.2494)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,35.371705,141.07507)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,58.891423,114.88266)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,22.542768,86.017552)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,15.059221,120.76259)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,23.077307,152.30039)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,25.750002,155.50763)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,124.63973,112.7445)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,143.34859,63.566912)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,132.12327,43.788967)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,49.804259,36.839959)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,49.804259,46.461662)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,41.786174,77.999466)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,54.080572,80.672161)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,88.291071,63.032373)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,104.32724,52.341592)" /> + + + + + + + gradientTransform="matrix(0.28571428,0,0,0.28571428,102.72363,159.2494)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,142.27952,116.48628)" /> - - - - - - - - - - + gradientTransform="matrix(0.28571428,0,0,0.28571428,139.60682,80.672161)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,111.27625,62.497834)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,71.185821,67.308685)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,80.272985,107.93365)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,101.65455,131.45337)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,86.152915,127.17706)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,115.55256,91.897482)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,41.786174,54.479748)" /> + gradientTransform="matrix(0.28571428,0,0,0.28571428,43.92433,111.14089)" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + gradientTransform="matrix(0.43749999,0,0,0.43749999,85.537012,100.46745)" /> + gradientTransform="matrix(0.43749999,0,0,0.43749999,91.416941,45.944465)" /> + gradientTransform="matrix(0.43749999,0,0,0.43749999,31.014029,74.275035)" /> + + + + + gradientTransform="matrix(0.43749999,0,0,0.43749999,29.410411,24.028364)" /> - - - - - - - - - + gradientTransform="matrix(0.43749999,0,0,0.43749999,118.14389,110.08915)" /> - - - - - - - + gradientTransform="matrix(0.43749999,0,0,0.43749999,120.28205,141.09242)" /> + gradientTransform="matrix(0.43749999,0,0,0.43749999,67.362684,136.8161)" /> + gradientTransform="matrix(0.43749999,0,0,0.43749999,27.272255,120.24539)" /> + gradientTransform="matrix(0.43749999,0,0,0.43749999,5.3237289,25.626418)" /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + gradientTransform="matrix(0.43749999,0,0,0.43749999,4.7891899,80.843367)" /> - - - - - - - - + gradientTransform="matrix(0.5,0,0,0.5,0.76334812,130.25156)" /> + gradientTransform="matrix(0.5,0,0,0.5,10.385051,146.28773)" /> - + gradientTransform="matrix(0.5,0,0,0.5,118.89648,34.034531)" /> + gradientTransform="matrix(0.5,0,0,0.5,13.057746,-5.5213588)" /> + gradientTransform="matrix(0.5,0,0,0.5,-9.3928939,-10.33221)" /> + + + + image/svg+xml - + @@ -3123,1581 +1484,687 @@ r="1.157552" /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + - - - - - - - - - - - - - - - - + + + + + - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + r="0.75595236" /> + style="opacity:1;vector-effect:none;fill:url(#radialGradient10722-2-95);fill-opacity:1;stroke:none;stroke-width:0.14285712;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke" + id="path10714-62-99" + cx="129.98105" + cy="173.68071" + r="0.75595236" /> + style="opacity:1;vector-effect:none;fill:url(#radialGradient10722-2-13);fill-opacity:1;stroke:none;stroke-width:0.14285712;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke" + id="path10714-62-73" + cx="114.47942" + cy="169.4044" + r="0.75595236" /> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + diff --git a/dist/img/stars_front.png b/dist/img/stars_front.png index 7da63cb..afb0738 100644 Binary files a/dist/img/stars_front.png and b/dist/img/stars_front.png differ diff --git a/dist/img/stars_front.svg b/dist/img/stars_front.svg index 8e5f9ad..4f6b041 100644 --- a/dist/img/stars_front.svg +++ b/dist/img/stars_front.svg @@ -127,182 +127,6 @@ fx="37.727131" fy="151.0007" r="1.0583333" /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - + gradientTransform="matrix(0.69642857,0,0,0.69642857,1.5003841,117.02525)" /> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + gradientTransform="matrix(0.69642857,0,0,0.69642857,-21.819216,118.68258)" /> + gradientTransform="matrix(0.69642857,0,0,0.69642857,-36.946129,116.04951)" /> + gradientTransform="matrix(0.69642857,0,0,0.69642857,22.982921,-42.036199)" /> + gradientTransform="matrix(0.69642857,0,0,0.69642857,8.0158275,1.2614643)" /> + gradientTransform="matrix(0.69642857,0,0,0.69642857,39.553632,34.402886)" /> + gradientTransform="matrix(0.69642857,0,0,0.69642857,58.262498,72.355158)" /> + gradientTransform="matrix(0.69642857,0,0,0.69642857,-3.7440316,82.5114)" /> + gradientTransform="matrix(0.69642857,0,0,0.69642857,-1.6058754,36.006503)" /> + gradientTransform="matrix(0.69642857,0,0,0.69642857,119.19995,-7.2911605)" /> + gradientTransform="matrix(0.69642857,0,0,0.69642857,94.611154,24.781183)" /> + gradientTransform="matrix(0.69642857,0,0,0.69642857,97.818388,81.976861)" /> + gradientTransform="matrix(0.69642857,0,0,0.69642857,75.902287,86.787713)" /> + gradientTransform="matrix(0.69642857,0,0,0.69642857,76.971365,2.3305424)" /> + + + + + + + + + + + + + + + + + image/svg+xml - + @@ -963,443 +512,197 @@ id="layer1" transform="translate(-25.211395,-58.778656)"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + diff --git a/js/graphics/background.mjs b/js/graphics/background.mjs index c182fcb..a129b0b 100644 --- a/js/graphics/background.mjs +++ b/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) { diff --git a/js/graphics/world.mjs b/js/graphics/world.mjs index 93495ad..a9381e7 100644 --- a/js/graphics/world.mjs +++ b/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) { diff --git a/js/world/body.mjs b/js/world/body.mjs index 08ddaef..bfbb5d4 100644 --- a/js/world/body.mjs +++ b/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; diff --git a/js/world/index.mjs b/js/world/index.mjs index e9365cb..24e4701 100644 --- a/js/world/index.mjs +++ b/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()); diff --git a/js/world/particle.mjs b/js/world/particle.mjs new file mode 100644 index 0000000..54406b8 --- /dev/null +++ b/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; + } +} diff --git a/js/world/ship.mjs b/js/world/ship.mjs index 93daf96..6f8517f 100644 --- a/js/world/ship.mjs +++ b/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()); }