Proper Station color averaging

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",

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"
   }
 }

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;

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();

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)
-);