Proper Station color averaging
This commit is contained in:
parent
902645d46a
commit
7c488cf2ca
10
package-lock.json
generated
10
package-lock.json
generated
@ -980,6 +980,11 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@types/pixi.js/-/pixi.js-4.7.2.tgz",
|
"resolved": "https://registry.npmjs.org/@types/pixi.js/-/pixi.js-4.7.2.tgz",
|
||||||
"integrity": "sha512-ybrqVdncNCa81fCYCqxz/CISyMbXl8usszNv0mwdeYDyfDqmemQHJtf4GtduHva+3suhItPc9Akr/WfV19zWiQ=="
|
"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": {
|
"accepts": {
|
||||||
"version": "1.3.5",
|
"version": "1.3.5",
|
||||||
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
|
"resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.5.tgz",
|
||||||
@ -11487,6 +11492,11 @@
|
|||||||
"setimmediate": "1.0.5"
|
"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": {
|
"tmp": {
|
||||||
"version": "0.0.33",
|
"version": "0.0.33",
|
||||||
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
|
"resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz",
|
||||||
|
@ -43,6 +43,8 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/pixi.js": "^4.7.2",
|
"@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"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
import * as tinycolor from 'tinycolor2';
|
||||||
|
|
||||||
import { distance } from './utils';
|
import { distance } from './utils';
|
||||||
|
|
||||||
let stationCount = 0;
|
let stationCount = 0;
|
||||||
@ -30,9 +32,10 @@ export default class Station {
|
|||||||
public connections: Station[];
|
public connections: Station[];
|
||||||
public id: number;
|
public id: number;
|
||||||
public label: PIXI.Text;
|
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.location = location;
|
||||||
this.population = population;
|
this.population = population;
|
||||||
this.color = color;
|
this.color = color;
|
||||||
|
@ -1,8 +1,10 @@
|
|||||||
import * as PIXI from 'pixi.js';
|
import * as PIXI from 'pixi.js';
|
||||||
|
import * as tinycolor from 'tinycolor2';
|
||||||
|
|
||||||
import Line from './Line';
|
import Line from './Line';
|
||||||
import Station from './Station';
|
import Station from './Station';
|
||||||
import Train from './Train';
|
import Train from './Train';
|
||||||
import { avgHexColor, distance, pointsAlmostEqual, pointsEqual, randomInt, randomPoint,
|
import { distance, pointsAlmostEqual, pointsEqual, randomInt, randomPoint,
|
||||||
rangeMap, weightedRandom } from './utils';
|
rangeMap, weightedRandom } from './utils';
|
||||||
|
|
||||||
import './style.css';
|
import './style.css';
|
||||||
@ -44,7 +46,7 @@ const initStations = (numStations: number): Station[] => {
|
|||||||
stations.push(new Station(
|
stations.push(new Station(
|
||||||
randomDistantPoint(stations, 30),
|
randomDistantPoint(stations, 30),
|
||||||
randomInt(300, 2000),
|
randomInt(300, 2000),
|
||||||
randomInt(0x000000, 0xFFFFFF)));
|
tinycolor.random()));
|
||||||
}
|
}
|
||||||
return stations;
|
return stations;
|
||||||
};
|
};
|
||||||
@ -79,12 +81,16 @@ const moveTrains = (trains: Train[], stations: Station[]) => {
|
|||||||
// train reached destination, stop moving and let passengers off
|
// train reached destination, stop moving and let passengers off
|
||||||
if (pointsAlmostEqual(train.location, train.destination.location)) {
|
if (pointsAlmostEqual(train.location, train.destination.location)) {
|
||||||
train.speed = 0;
|
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.destination.population += train.passengers;
|
||||||
train.passengers = 0;
|
train.passengers = 0;
|
||||||
|
|
||||||
// TODO: average colors
|
|
||||||
// train.destination.color = avgHexColor(train.origin.color, train.destination.color);
|
|
||||||
|
|
||||||
// prepare for next journey
|
// prepare for next journey
|
||||||
train.origin = train.destination;
|
train.origin = train.destination;
|
||||||
train.destination = undefined;
|
train.destination = undefined;
|
||||||
@ -112,7 +118,7 @@ const moveTrains = (trains: Train[], stations: Station[]) => {
|
|||||||
const drawStations = (stations: Station[], graphics: PIXI.Graphics) => {
|
const drawStations = (stations: Station[], graphics: PIXI.Graphics) => {
|
||||||
for (const station of stations) {
|
for (const station of stations) {
|
||||||
const radius = station.population / 60;
|
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.drawCircle(station.location.x, station.location.y, radius);
|
||||||
graphics.endFill();
|
graphics.endFill();
|
||||||
station.label.x = station.location.x + radius + 1;
|
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) => {
|
const drawTrains = (trains: Train[], graphics: PIXI.Graphics) => {
|
||||||
for (const train of trains) {
|
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,
|
graphics.drawCircle(train.location.x, train.location.y,
|
||||||
rangeMap(train.passengers, 0, TRAIN_CAPACITY, 1, 5));
|
rangeMap(train.passengers, 0, TRAIN_CAPACITY, 1, 5));
|
||||||
graphics.endFill();
|
graphics.endFill();
|
||||||
@ -154,7 +160,7 @@ const run = () => {
|
|||||||
fpsText.y = 0;
|
fpsText.y = 0;
|
||||||
|
|
||||||
const stations = initStations(30);
|
const stations = initStations(30);
|
||||||
const trains = initTrains(100, stations);
|
const trains = initTrains(50, stations);
|
||||||
// const line = new Line(stations, 10);
|
// const line = new Line(stations, 10);
|
||||||
|
|
||||||
ticker.stop();
|
ticker.stop();
|
||||||
|
10
src/utils.ts
10
src/utils.ts
@ -42,13 +42,3 @@ export const rangeMap = (num: number, inMin: number, inMax: number,
|
|||||||
outMin: number, outMax: number): number => (
|
outMin: number, outMax: number): number => (
|
||||||
(num - inMin) * (outMax - outMin) / (inMax - inMin) + outMin
|
(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)
|
|
||||||
);
|
|
||||||
|
Loading…
Reference in New Issue
Block a user