Member-only story

How to Make A Map Generator Using The MERN Stack And TypeScript — Part 3: Adding Colors

Make this world shine

Quentin Musy
4 min readMay 5, 2023

--

Goal

So, we have an image. Great! But it’s black and white. Quite boring. In this part, we’ll transform this boring gray world into a shiny colorful world of wonder. And you’ll see, it does not take that much to do so!

Example of a map

Brief

Before getting into coding, let me quickly explain how we’ll do it. Remember, in the previous part, we made sure that each pixel in our map has a height between 0 and 1. At the moment, we transform this into a shade of gray by multiplying it by 255.

Instead, what we’ll do is pretty simple. We’ll define color ranges. A color range has a min value, a max value, and a color. For example we’ll say “If the height is between 0 and 0.1, paint the pixel in blue”.

Simple right? Let’s dig in!

Color Range(s)

Let’s create a lib folder inside our app folder. Inside, add a types.ts.

We’ll define a ColorRange type, like this:

export type ColorRange = {
min: number;
max: number;
color: number; // Jimp uses hex numbers for colors
};

--

--

Quentin Musy
Quentin Musy

Written by Quentin Musy

Full Stack Engineer | Writer | Musician | Knowledge is meant to be shared, not kept. That's why I write.

No responses yet