From 7c488cf2ca3961d82bec6e0076164561288cd3fe Mon Sep 17 00:00:00 2001 From: Tyler Hallada Date: Sat, 14 Apr 2018 18:09:25 -0400 Subject: [PATCH] Proper Station color averaging --- package-lock.json | 10 ++++++++++ package.json | 4 +++- src/Station.ts | 7 +++++-- src/transport.ts | 22 ++++++++++++++-------- src/utils.ts | 10 ---------- 5 files changed, 32 insertions(+), 21 deletions(-) diff --git a/package-lock.json b/package-lock.json index 87d3a98..bef6aec 100644 --- a/package-lock.json +++ b/package-lock.json @@ -980,6 +980,11 @@ "resolved": "https://registry.npmjs.org/@types/pixi.js/-/pixi.js-4.7.2.tgz", "integrity": "sha512-ybrqVdncNCa81fCYCqxz/CISyMbXl8usszNv0mwdeYDyfDqmemQHJtf4GtduHva+3suhItPc9Akr/WfV19zWiQ==" }, + "@types/tinycolor2": { + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@types/tinycolor2/-/tinycolor2-1.4.0.tgz", + "integrity": "sha512-cJujCBcb87n9apWNSrUGITAh8cIhpSE62fF4YUtv4tDVrXBNYFGv6bTnkHPSEhjh7TYi01ROY4486iZAcUF4Mg==" + }, "accepts": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz", @@ -11487,6 +11492,11 @@ "setimmediate": "1.0.5" } }, + "tinycolor2": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/tinycolor2/-/tinycolor2-1.4.1.tgz", + "integrity": "sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=" + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", diff --git a/package.json b/package.json index 7630998..c6013aa 100644 --- a/package.json +++ b/package.json @@ -43,6 +43,8 @@ }, "dependencies": { "@types/pixi.js": "^4.7.2", - "pixi.js": "^4.7.1" + "@types/tinycolor2": "^1.4.0", + "pixi.js": "^4.7.1", + "tinycolor2": "^1.4.1" } } diff --git a/src/Station.ts b/src/Station.ts index abac8a7..582dcab 100644 --- a/src/Station.ts +++ b/src/Station.ts @@ -1,3 +1,5 @@ +import * as tinycolor from 'tinycolor2'; + import { distance } from './utils'; let stationCount = 0; @@ -30,9 +32,10 @@ export default class Station { public connections: Station[]; public id: number; public label: PIXI.Text; - public color: number; + public color: tinycolorInstance; - constructor(location: PIXI.Point, population: number, color: number, connections?: Station[]) { + constructor(location: PIXI.Point, population: number, color: tinycolorInstance, + connections?: Station[]) { this.location = location; this.population = population; this.color = color; diff --git a/src/transport.ts b/src/transport.ts index 39a633e..d479899 100644 --- a/src/transport.ts +++ b/src/transport.ts @@ -1,8 +1,10 @@ import * as PIXI from 'pixi.js'; +import * as tinycolor from 'tinycolor2'; + import Line from './Line'; import Station from './Station'; import Train from './Train'; -import { avgHexColor, distance, pointsAlmostEqual, pointsEqual, randomInt, randomPoint, +import { distance, pointsAlmostEqual, pointsEqual, randomInt, randomPoint, rangeMap, weightedRandom } from './utils'; import './style.css'; @@ -44,7 +46,7 @@ const initStations = (numStations: number): Station[] => { stations.push(new Station( randomDistantPoint(stations, 30), randomInt(300, 2000), - randomInt(0x000000, 0xFFFFFF))); + tinycolor.random())); } return stations; }; @@ -79,12 +81,16 @@ const moveTrains = (trains: Train[], stations: Station[]) => { // train reached destination, stop moving and let passengers off if (pointsAlmostEqual(train.location, train.destination.location)) { train.speed = 0; + + train.destination.color = tinycolor.mix( + train.destination.color, + train.origin.color, + Math.round((train.passengers / train.destination.population) * 100), + ); + train.destination.population += train.passengers; train.passengers = 0; - // TODO: average colors - // train.destination.color = avgHexColor(train.origin.color, train.destination.color); - // prepare for next journey train.origin = train.destination; train.destination = undefined; @@ -112,7 +118,7 @@ const moveTrains = (trains: Train[], stations: Station[]) => { const drawStations = (stations: Station[], graphics: PIXI.Graphics) => { for (const station of stations) { const radius = station.population / 60; - graphics.beginFill(station.color, 0.5); + graphics.beginFill(parseInt(station.color.toHex(), 16), 0.5); graphics.drawCircle(station.location.x, station.location.y, radius); graphics.endFill(); station.label.x = station.location.x + radius + 1; @@ -122,7 +128,7 @@ const drawStations = (stations: Station[], graphics: PIXI.Graphics) => { const drawTrains = (trains: Train[], graphics: PIXI.Graphics) => { for (const train of trains) { - graphics.beginFill(train.origin.color, 0.8); + graphics.beginFill(parseInt(train.origin.color.toHex(), 16), 0.8); graphics.drawCircle(train.location.x, train.location.y, rangeMap(train.passengers, 0, TRAIN_CAPACITY, 1, 5)); graphics.endFill(); @@ -154,7 +160,7 @@ const run = () => { fpsText.y = 0; const stations = initStations(30); - const trains = initTrains(100, stations); + const trains = initTrains(50, stations); // const line = new Line(stations, 10); ticker.stop(); diff --git a/src/utils.ts b/src/utils.ts index e51e5c9..f48e332 100644 --- a/src/utils.ts +++ b/src/utils.ts @@ -42,13 +42,3 @@ export const rangeMap = (num: number, inMin: number, inMax: number, outMin: number, outMax: number): number => ( (num - inMin) * (outMax - outMin) / (inMax - inMin) + outMin ); - -// tslint:disable no-bitwise -export const nthByte = (num: number, n: number): number => ((num >> (8 * n)) & 0xff); - -// FIXME: pretty sure this is wrong, just use a color library instead and then convert to hex -export const avgHexColor = (colorA: number, colorB: number): number => ( - (Math.round((nthByte(colorA, 2) + nthByte(colorB, 2)) / 2) & 0xFF) | - ((Math.round((nthByte(colorA, 1) + nthByte(colorB, 1)) / 2) & 0xFF) << 8) | - ((Math.round((nthByte(colorA, 0) + nthByte(colorB, 0)) / 2) & 0x0F) << 16) -);