From 5361565cd72db888b185b672347ccde4b7a794a7 Mon Sep 17 00:00:00 2001 From: Azgaar Date: Wed, 31 Aug 2022 00:58:08 +0300 Subject: [PATCH] refactor: render covering layers fix --- src/scripts/connectVertices.ts | 2 +- src/scripts/generation/generation.ts | 9 -------- .../pack/religions/generateReligions.ts | 4 ++++ .../pack/religions/specifyReligions.ts | 17 ++++++++++---- src/utils/colorUtils.ts | 23 +++++++++++++------ 5 files changed, 34 insertions(+), 21 deletions(-) diff --git a/src/scripts/connectVertices.ts b/src/scripts/connectVertices.ts index afb8052b..f493e257 100644 --- a/src/scripts/connectVertices.ts +++ b/src/scripts/connectVertices.ts @@ -113,7 +113,7 @@ export function connectVertices({ chain.push(current); const neibCells = vertices.c[current]; - if (addToChecked) neibCells.forEach(addToChecked); + if (addToChecked) neibCells.filter(ofSameType).forEach(addToChecked); const [c1, c2, c3] = neibCells.map(ofSameType); const [v1, v2, v3] = vertices.v[current]; diff --git a/src/scripts/generation/generation.ts b/src/scripts/generation/generation.ts index 0b83ef0f..a6c6ef1c 100644 --- a/src/scripts/generation/generation.ts +++ b/src/scripts/generation/generation.ts @@ -26,8 +26,6 @@ import {createGrid} from "./grid/grid"; import {createPack} from "./pack/pack"; import {getInputValue, setInputValue} from "utils/nodeUtils"; import {calculateMapCoordinates} from "modules/coordinates"; -import {drawPoint, drawPolygons} from "utils/debugUtils"; -import {isReligion} from "utils/typeUtils"; const {Zoom, ThreeD} = window; @@ -74,13 +72,6 @@ async function generate(options?: IGenerationOptions) { // renderLayer("states"); renderLayer("religions"); - // drawPolygons(pack.cells.religion, pack.cells.v, pack.vertices.p, {fillOpacity: 0.8, excludeZeroes: true}); - pack.religions.filter(isReligion).forEach(({center}) => - drawPoint(pack.cells.p[center], { - radius: 5 - }) - ); - WARN && console.warn(`TOTAL: ${rn((performance.now() - timeStart) / 1000, 2)}s`); // showStatistics(); INFO && console.groupEnd(); diff --git a/src/scripts/generation/pack/religions/generateReligions.ts b/src/scripts/generation/pack/religions/generateReligions.ts index c0dfe85a..299d184e 100644 --- a/src/scripts/generation/pack/religions/generateReligions.ts +++ b/src/scripts/generation/pack/religions/generateReligions.ts @@ -1,4 +1,5 @@ import {TIME} from "config/logging"; +import {drawPoint} from "utils/debugUtils"; import {pick} from "utils/functionUtils"; import {generateFolkReligions} from "./generateFolkReligions"; import {generateOrganizedReligions} from "./generateOrganizedReligions"; @@ -32,6 +33,9 @@ export function generateReligions({ pick(cells, "i", "c", "biome", "culture", "burg", "state", "route") ); + folkReligions.forEach(({center}) => drawPoint(cells.p[center], {radius: 3, color: "blue"})); + basicReligions.forEach(({center}) => drawPoint(cells.p[center], {radius: 3, color: "red"})); + TIME && console.timeEnd("generateReligions"); return {religionIds, religions}; } diff --git a/src/scripts/generation/pack/religions/specifyReligions.ts b/src/scripts/generation/pack/religions/specifyReligions.ts index 2054503f..f9fa9061 100644 --- a/src/scripts/generation/pack/religions/specifyReligions.ts +++ b/src/scripts/generation/pack/religions/specifyReligions.ts @@ -1,4 +1,4 @@ -import {getMixedColor, getRandomColor} from "utils/colorUtils"; +import {brighter, getMixedColor} from "utils/colorUtils"; import {each, gauss, rand} from "utils/probabilityUtils"; import {isCulture} from "utils/typeUtils"; import {expandReligions} from "./expandReligions"; @@ -12,8 +12,10 @@ const expansionismMap = { Heresy: () => gauss(1.2, 0.5, 0, 5) }; +type TReligionData = Pick; + export function specifyReligions( - religionsData: Pick[], + religionsData: TReligionData[], cultures: TCultures, states: TStates, burgs: TBurgs, @@ -39,8 +41,7 @@ export function specifyReligions( const expansionism = expansionismMap[type](); - const culture = cultures[cultureId]; - const color = isCulture(culture) ? getMixedColor(culture.color, 0.1, 0) : getRandomColor(); + const color = getReligionColor(cultureId, type); return {i: index + 1, name, type, form, culture: cultureId, center, deity, expansion, expansionism, color}; }); @@ -51,6 +52,14 @@ export function specifyReligions( return {religions: combineReligionsData(), religionIds}; + function getReligionColor(cultureId: number, type: IReligion["type"]) { + const culture = cultures[cultureId]; + if (!isCulture(culture)) throw new Error(`Culture ${cultureId} is not a valid culture`); + + if (type === "Folk") return brighter(culture.color, 0.2); + return getMixedColor(culture.color, 0.2, 0); + } + function combineReligionsData(): TReligions { const noReligion: TNoReligion = {i: 0, name: "No religion"}; diff --git a/src/utils/colorUtils.ts b/src/utils/colorUtils.ts index 36f4a604..94f5f2ff 100644 --- a/src/utils/colorUtils.ts +++ b/src/utils/colorUtils.ts @@ -25,7 +25,7 @@ const colorSchemeMap: {[key in TColorScheme]: d3.ScaleSequential} = { monochrome: d3.scaleSequential(d3.interpolateGreys) }; -export function getColors(number: number) { +export function getColors(number: number): Hex[] { if (number <= cardinal12.length) return d3.shuffle(cardinal12.slice(0, number)); const scheme = colorSchemeMap.default; @@ -40,19 +40,28 @@ export function getColors(number: number) { } export function getRandomColor(): Hex { - const scheme = colorSchemeMap.default; + const scheme = d3.scaleSequential(d3.interpolateSpectral); const rgb = scheme(Math.random())!; return d3.color(rgb)?.formatHex() as Hex; } -// mix a color with a random color -export function getMixedColor(hexColor: string, mixation = 0.2, bright = 0.3) { - // if provided color is not hex (e.g. harching), generate random one - const color1 = hexColor && hexColor[0] === "#" ? hexColor : getRandomColor(); +// mix a color with a random color. TODO: refactor without interpolation +export function getMixedColor(color: Hex | CssUrl, mixation = 0.2, bright = 0.3) { + const color1 = color.startsWith("#") ? color : getRandomColor(); const color2 = getRandomColor(); const mixedColor = d3.interpolate(color1, color2)(mixation); - return d3.color(mixedColor)!.brighter(bright).hex(); + return d3.color(mixedColor)!.brighter(bright).formatHex() as Hex; +} + +export function darker(color: Hex | CssUrl, amount = 1) { + if (color.startsWith("#") === false) return color; + return d3.color(color)!.darker(amount).formatHex() as Hex; +} + +export function brighter(color: Hex | CssUrl, amount = 1) { + if (color.startsWith("#") === false) return color; + return d3.color(color)!.brighter(amount).formatHex() as Hex; } export function getColorScheme(schemeName: TColorScheme) {