Member-only story
How to Make A Map Generator Using The MERN Stack And TypeScript — Part 3: Adding Colors
Make this world shine
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!
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
};