DEV Community: matjs

World Creator 2 - Building the World Map.

matjs — Mon, 27 Dec 2021 21:59:48 +0000

Introduction

How is a world created? (Worldbuilding)

In Worldbuilding there is two methods of creation, the first is called "top-down", where you create the world's cultures, its inhabitants, civilizations and then the geographic features, it's the option that i will try to avoid, since i want to create the world historically, so from year 0 to year i-dont-know. The other method is the first but inverted, so it's called "bottom-up", where you create the geographic features, such as continents, tectonic plates, biomes and then the cultures, civilizations and more. I will try to use the "bottom-up" method, it's just what i want.

Ok, so where to start?

I want to create a world organically, so as i'm going to use the "bottom-up" method, i will create the world terrain first and then adapt the cultures on it. So, this is the thing: i will start by creating the world terrain.

PART 1 - The Terrain Generation Process

So, i've read about map generaton, a lot, and there's a very famous process called Voronoi, which uses a polygonal map structure to draw solid terrain and water, it's extremelly cool and looks good. I'll mess with that process and maybe improve that to something more polished.

This is how i want it to look like.

Oh and i didn't said, but i will not code Voronoi by myself, it's a huge waste of time since there's libraries that does that and this is not a university research.
So this is going to be a kind of side-project, a map generator for the biggest project, a fantasy world generator. Looks good for me.

Generating the map

So, we did started the project, that's good. Ok, how is the map going to be generated? For instance, we are just starting to think about that, but the beginning of this adventure starts at seeds. Yes, seeds, remember Minecraft? It has seeds too, and it generates the maps.

This is our code:

const GRIDSIZE = 25;
const JITTER = 0.5;
let points = [];
for (let x = 0; x <= GRIDSIZE; x++) {
    for (let y = 0; y <= GRIDSIZE; y++) {
        points.push({x: x + JITTER * (Math.random() - Math.random()),
                     y: y + JITTER * (Math.random() - Math.random())});
    }
}

What is it doing?

Basically, it's generating grids at the canvas and then we add jitter, because we cannot use the same points for the Voronoi process, this is where jitter enters, it breaks the regular grid lines.
Yeah, cool, but it doesn't really shows anything. So let's draw it!

function drawPoints(canvas, points) {
    let ctx = canvas.getContext('2d');
    ctx.save();
    ctx.scale(canvas.width / GRIDSIZE, canvas.height / GRIDSIZE);
    ctx.fillStyle = "hsl(0, 50%, 50%)";
    for (let {x, y} of points) {
        ctx.beginPath();
        ctx.arc(x, y, 0.1, 0, 2*Math.PI);
        ctx.fill();
    }
    ctx.restore();
}

Awesome! We have points at where the map is going to be drawn, it's where our Voronoi will be drawn too.

Where the Voronoi really comes up

Now we are getting closer to the exciting part of this code! We have just generated some functional randomly disposed points where we are going to deploy our Voronoi elements. How we do this?

First of all we are going to run the Delaunay triangulation algorithm, which will create the Voronoi cells for us (the spaces between the lines, where our points will be at the center)

let delaunay = Delaunator.from(points, loc => loc.x, loc => loc.y);

Ok, we did the triangulation, now we need to calculate the centimeters of the triangles, we will use something called "centroids" which are part of the Voronoi process.

function calculateCentroids(points, delaunay) {
    const numTriangles = delaunay.halfedges.length / 3;
    let centroids = [];
    for (let t = 0; t < numTriangles; t++) {
        let sumOfX = 0, sumOfY = 0;
        for (let i = 0; i < 3; i++) {
            let s = 3*t + i;
            let p = points[delaunay.triangles[s]];
            sumOfX += p.x;
            sumOfY += p.y;
        }
        centroids[t] = {x: sumOfX / 3, y: sumOfY / 3};
    }
    return centroids;
}

Then, we store the information:

let map = {
    points,
    numRegions: points.length,
    numTriangles: delaunay.halfedges.length / 3,
    numEdges: delaunay.halfedges.length,
    halfedges: delaunay.halfedges,
    triangles: delaunay.triangles,
    centers: calculateCentroids(points, delaunay)
};

And finally, we draw the Voronoi cells:

function triangleOfEdge(e)  { return Math.floor(e / 3); }
function nextHalfedge(e) { return (e % 3 === 2) ? e - 2 : e + 1; }

function drawCellBoundaries(canvas, map) {
    let {points, centers, halfedges, triangles, numEdges} = map;
    let ctx = canvas.getContext('2d');
    ctx.save();
    ctx.scale(canvas.width / GRIDSIZE, canvas.height / GRIDSIZE);
    ctx.lineWidth = 0.02;
    ctx.strokeStyle = "black";
    for (let e = 0; e < numEdges; e++) {
        if (e < delaunay.halfedges[e]) {
            const p = centers[triangleOfEdge(e)];
            const q = centers[triangleOfEdge(halfedges[e])];
            ctx.beginPath();
            ctx.moveTo(p.x, p.y);
            ctx.lineTo(q.x, q.y);
            ctx.stroke();
        }
    }
    ctx.restore();
}

Exciting! Looks like a Voronoi-based draw for me.

Island shape

Until now we've created the algorithm for the points, that generates our cells, now we are going to put it in action, that means we are going to draw the terrain. Yeah!

If we want it to look like an island, we need to create a height map, so we aren't going to see any floating random terrain at the ocean. Here it goes:

const WAVELENGTH = 0.5;
function assignElevation(map) {
    const noise = new SimplexNoise();
    let {points, numRegions} = map;
    let elevation = [];
    for (let r = 0; r < numRegions; r++) {
        let nx = points[r].x / GRIDSIZE - 1/2,
            ny = points[r].y / GRIDSIZE - 1/2;
        // start with noise:
        elevation[r] = (1 + noise.noise2D(nx / WAVELENGTH, ny / WAVELENGTH)) / 2;
        // modify noise to make islands:
        let d = 2 * Math.max(Math.abs(nx), Math.abs(ny)); // should be 0-1
        elevation[r] = (1 + elevation[r] - d) / 2;
    }
    return elevation;
}

map.elevation = assignElevation(map);

These are the regions, we have it at the application's memory, now we need to draw it:

function edgesAroundPoint(delaunay, start) {
    const result = [];
    let incoming = start;
    do {
        result.push(incoming);
        const outgoing = nextHalfedge(incoming);
        incoming = delaunay.halfedges[outgoing];
    } while (incoming !== -1 && incoming !== start);
    return result;
}

function drawCellColors(canvas, map, colorFn) {
    let ctx = canvas.getContext('2d');
    ctx.save();
    ctx.scale(canvas.width / GRIDSIZE, canvas.height / GRIDSIZE);
    let seen = new Set();  // of region ids
    let {triangles, numEdges, centers} = map;
    for (let e = 0; e < numEdges; e++) {
        const r = triangles[nextHalfedge(e)];
        if (!seen.has(r)) {
            seen.add(r);
            let vertices = edgesAroundPoint(delaunay, e)
                .map(e => centers[triangleOfEdge(e)]);
            ctx.fillStyle = colorFn(r);
            ctx.beginPath();
            ctx.moveTo(vertices[0].x, vertices[0].y);
            for (let i = 1; i < vertices.length; i++) {
                ctx.lineTo(vertices[i].x, vertices[i].y);
            }
            ctx.fill();
        }
    }
}

drawCellColors(
    document.getElementById("diagram-cell-elevations"),
    map,
    r => map.elevation[r] < 0.5? "hsl(240, 30%, 50%)" : "hsl(90, 20%, 50%)"
);

We have the islands!

Biomes

Every respectfull world has diversified biomes, that's what we need.

For that, we need to generate a second noise map, so we can see where the biomes are on our hemispheres.

function assignMoisture(map) {
    const noise = new SimplexNoise();
    let {points, numRegions} = map;
    let moisture = [];
    for (let r = 0; r < numRegions; r++) {
        let nx = points[r].x / GRIDSIZE - 1/2,
            ny = points[r].y / GRIDSIZE - 1/2;
        moisture[r] = (1 + noise.noise2D(nx / WAVELENGTH, ny / WAVELENGTH)) / 2;
    }
    return moisture;
}

map.moisture = assignMoisture(map);

Then, we just put some colors on it:

function biomeColor(map, r) {
    let e = (map.elevation[r] - 0.5) * 2,
        m = map.moisture[r];
    if (e < 0.0) {
        r = 48 + 48*e;
        g = 64 + 64*e;
        b = 127 + 127*e;
    } else {
        m = m * (1-e); e = e**4; // tweaks
        r = 210 - 100 * m;
        g = 185 - 45 * m;
        b = 139 - 45 * m;
        r = 255 * e + r * (1-e),
        g = 255 * e + g * (1-e),
        b = 255 * e + b * (1-e);
    }
    return `rgb(${r|0}, ${g|0}, ${b|0})`;
}

drawCellColors(
    document.getElementById("diagram-cell-biomes"),
    map,
    r => biomeColor(map, r)
);

Beautiful!

Conclusion

We have created a simple but not so simple map generator, it looks extremely good and i'm honestly very happy with the result, but it wouldn't be possible without the help of these awesome articles about world generation:

Polygonal Map Generation for Games - by amitp from Red Blob Games
Voronoi Maps Tutorial - by amitp from Red Blob Games
MapBox's Delaunator Algorithm
Jwagner's Simplex-Noise Algorithm

Follow me on my social medias, so you won't miss anything:

My Twitter
My Github
My Discord: @matjs#1006

World Creator 2

matjs — Mon, 27 Dec 2021 20:21:46 +0000

A while ago i've created a JS package that creates some random information about a world, it was called WC or World Creator. Well, while this can sound pretty interesting, there isn't so much about the generator, it's just random information being mixed to produce a JSON/Object with a bunch of data so you can format it to a user-friendly interface, but it wasn't so amazing as it sounds like, so i decided to recreate it. This is World Creator 2.

So, how is it going to be made?

While WC was created as a single class that you instantiate and get the information by reading it, WC2 is planned to be made with modules, so different events can happen in different threads, this way the code can run free without barriers and step-by-step instructions that limits the creation process.

That's cool! But... what's new though?

I don't know yet. Yes. I don't know, because the development is only starting up and i will have new ideas as the project evolves into something more solid.

Why are you posting it?

I want to document my journey through the development of this project, just like i did with Planet Sandbox, but this time i will post a new article at every update i commit to the repository. So yeah, that's it.

Follow me on my social medias so you won't miss anything:

My Twitter
My Github
My Discord: @matjs#1006

How i made a planet creator website.

matjs — Mon, 23 Aug 2021 18:54:01 +0000

Hello there! :)

This is my first post here, i'm gonna talk about how i created a planet sandbox website where a universe is generated by the users with their own planets.

Day 1-2

At the first day of the development i was just trying to decide which technology i would learn or improve.
So after a long time, i've decided to choose Javascript, a powerful (and weird) language. Ok, i've decided the technology, but... where do i start?

Codewars is an educational community for computer programming. On the platform, software developers train on programming challenges known as kata.

I was reading that before i clicked at the link, that was a nostalgic feeling. I haven't visited Codewars for like... months, and then i was right there, staring the 2 kyu challenges that i gave up. Well, it's time to comeback.

I've passed day 1 and half of day 2 at codewars, remembering concepts from JS and learning new ones. After these 2 days i went from 8 kyu JS to 5 kyu, that was a HUGE change. That made me confident sufficiently to start one of my dream projects: A Planet Sandbox.

Day 2

Well, after completing the katas i've started to think how would i do (and start) the Planet Sandbox. And then i've remembered about a framework i saw a long time ago: Three.js.

Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.

Of course 3D wasn't my first option, since it's hard and requires a lot of math to work, but with Three.js it becomes understandable. That's it! I'm gonna use that.

After a few tests i've created a cube, a green... ugly... cube.

Yeah... that wasn't a planet for sure, but i was just messing with Three.js tools. That was Day 2 (a proof that not everyday of #100DaysOfCode is ultra productive).

Day 3

Specifically yesterday i've made a HUGE, ULTRA HUGE, advancement at my little Planet Sandbox. Basically, yesterday i've connected the project's DB, made the initial front-end and back-end. At this point you could see the planets at their own coordinates and also, you could add new planets to the DB. IN REAL TIME (i love Firebase, really), it means that, if User A is looking at the coordinate 2, 2, 2 and User B adds a planet at this coordinate, User A will see the scene updating instantly.

Well, at this moment the app just had the options to create a planet with a name and a creator, literally a yellow ugly mesh, and you could also search for a planet and the camera would instantly spawn at the planet location.

This was day 3, although it doesn't seem to be a huge change, it has a great impact on how the app works.

Day 4

At the day 4 (or today), i've shaped up the final version of the project, this was a great improvement to the earlier state of the app. At the beginning of the day i've fixed up the shape of the planets (they don't seem like Minecraft planets anymore) and also, improved the UI, showing information about the planet and a list of planets (not scrollable yet).

It's much more beautiful now! But it isn't good enough yet. I've took a pause to eat something and then came back to work.

At the second turn of my infinite battle against WebGL, i've learned about Textures, a essential part of 3D models, and mostly important for planet models.

Well, after downloading some good textures for planets, i've managed to code a way to apply those textures at the flying balls of this strange universe. Well, it worked!

Now it does looks like a planet! Well, now we just have to decide which texture gonna be applied. Since there are 2 important types of planets (rock and gas) i splitted the images in 2 groups, one for each type of planet. Now the user can also choose the type of planet (you can see in the planet info at the image above).

This final addition have finished up all the things. Now, we have a Planet Sandbox! (You can visit the app right here => Planet Sandbox)

I still wanna add more things to this project, but for now, i'm going to continue my journey. See you in the next post! :)

Hello there!

matjs — Sat, 21 Aug 2021 01:35:44 +0000

Well, i'm matjs and in the next days i'll be learning some front-end concepts (and some back-end if needed), during the process i'll write some posts as part of my #100DaysOfCode, hope it'll be a good experience!