# How to place objects/entities randomly in JS?

I'm making a game and I have a script (running it with Node) on the server that currently just randomly places things on the map... I'd like to change that. I saw something about Perlin noise but I'm not sure if that's the thing I want and I'm even less sure how to implement it...

I want something like this, green dots represent trees, red ones represent enemies and grey ones represent rocks. Where can I get a simple JS algorithm to achieve this?

• What are the properties you're looking for in the generated map? Should the "enemies" and "rocks" be clusters (as shown in the image)? It also seems like the rocks are put at the opposite of the enemies.. is there a minimum distance between certain features? You need to clarify what you need in order to get a good/detailed answer. Dec 20 '11 at 15:49

From your picture there seems to be a bit of randomness and clustering. Here's a way to do something similar without using noise.

You could start by dividing the playing field into sections. For instance, in the image above you could have divided it into a 5x3 grid.

|-----|-----|-----|-----|-----|    ---
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|-----|-----|-----|-----|-----|     |
|     |     |     |     |     |     |
|     |     |     |     |     |     | Map Height
|     |     |     |     |     |     |
|-----|-----|-----|-----|-----|     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|     |     |     |     |     |     |
|-----|-----|-----|-----|-----|    ---

|-----------------------------|
Map Width


Then for each cell in that grid you generate a probability for each type of entity existing in that tile. This is where you can add some entity specific clustering.

For example you could start by filling everything with some default probabilities: Tree = 50%, Rock = 50%, Enemy = 0%

// Default probabilities
// Equal chance of tree and rock, no enemies

|-----|-----|-----|-----|-----|
|T=50 |T=50 |T=50 |T=50 |T=50 |
|R=50 |R=50 |R=50 |R=50 |R=50 |
|E=0  |E=0  |E=0  |E=0  |E=0  |
|-----|-----|-----|-----|-----|
|T=50 |T=50 |T=50 |T=50 |T=50 |
|R=50 |R=50 |R=50 |R=50 |R=50 |
|E=0  |E=0  |E=0  |E=0  |E=0  |
|-----|-----|-----|-----|-----|
|T=50 |T=50 |T=50 |T=50 |T=50 |
|R=50 |R=50 |R=50 |R=50 |R=50 |
|E=0  |E=0  |E=0  |E=0  |E=0  |
|-----|-----|-----|-----|-----|


And then let's consider that you'd like your map to have exactly one cluster of enemies, and one zone with higher concentration of rocks.

You'd pick one cell at random and change the values of that cell to Tree = 20%, Rock = 0%, Enemy = 80%. Then do the same for rocks. You can also use a radius of cells if you like to make the transitions smoother. You'll end up with something like:

// Added two random clusters:
// One enemy cluster on the bottom right
// One rock cluster on the top left

|-----|-----|-----|-----|-----|
|T=0  |T=30 |T=50 |T=50 |T=50 |
|R=100|R=70 |R=50 |R=50 |R=50 |
|E=0  |E=0  |E=0  |E=0  |E=0  |
|-----|-----|-----|-----|-----|
|T=30 |T=40 |T=50 |T=80 |T=70 |
|R=70 |R=60 |R=50 |R=10 |R=0  |
|E=0  |E=0  |E=0  |E=10 |E=30 |
|-----|-----|-----|-----|-----|
|T=50 |T=50 |T=50 |T=70 |T=20 |
|R=50 |R=50 |R=50 |R=0  |R=0  |
|E=0  |E=0  |E=0  |E=30 |E=80 |
|-----|-----|-----|-----|-----|


Finally, with this information in place, you only need to decide the maximum number of entities there can be in any cell (i.e the density of the cell) and start adding entities in random positions and using the probabilities above to decide the type of each of them.

This will provide you with a nice mix of randomness, and at the same time clustering based on the rules you define when filling in the probabilities grid.

• This looks truly awesome! I already had something similar in my first version of my map generator, but the cells were much smaller and everything was random, no specific algorithm... I'll give you the rep later. Dec 20 '11 at 16:35

If you just want a number of items placed randomly within a range (which, from your description, sounds like that may be all you want) that could be done pretty easily. Randomly choose a number of trees to place, then iterate through a loop where you randomly pick an X and Y coordinate and put a tree there. Do similarly with enemies, rocks, anything else. This simple method would be easy (a few random numbers and a few loops that make more random numbers) to set up but wouldn't necessarily clump things together.

If you mean you want actual terrain randomized, Perlin noise is a commonly used way to generate heightmaps or other clustered groups. You could use it to determine forest areas or enemy campsites, etc. in addition to a simple heightmap by changing some of its generation parameters.

EDIT:

Googling "Javascript Perlin Noise" provides a good number of results if you want code to adapt. I came across this code which may be useful for you.

As for how to use it, you can generate 2D textures using whatever code you decide and use one as a height map, another as tree density, or enemy density, or rock density, or water depth, or whatever.

• Hi, I want something like Perlin noise but: "I saw something about Perlin noise but I'm not sure if that's the thing I want and I'm even less sure how to implement it..." I'm starting a bounty, and I'd be glad to give the rep to you if you broaden your answer. Dec 20 '11 at 15:40