TerrainVer

Generate Worms-style cartoon terrain in JavaScript. You can see a full demo on this page.

Generate a random terrain mask

For browsers that support es6 modules: ```html ```

To support other browsers, you can put this javascript in a

main.js

rollup main.js --o js-bundle.js --f iife

The terrain type image is a low resolution image with red, blue, and black zones representing the general shape of a terrain. See the explanation in the demo page and

type-x.png

If you have already loaded a terrain type image that you want to use, you can call the constructor directly:

javascript
const terrainGenerator = new TerrainGenerator({ width: 874, height: 546, terrainTypeImg: myImgElt })
const terrainShape = terrainGenerator.generate(Math.random())

The example above should produce an image like this:

Simple rendering of a terrain mask

You can apply a simple rendering pass to the terrain shape mask:

html

  
  
  
  

import TerrainRenderer from './src/TerrainRenderer.js'

TerrainRenderer.fromImgUrl(terrainShape, {
  groundImg: './img/ground.png', // Required, url of a texture image for the terrain ground
  backgroundImg: './img/background.png', // Required, url of a background image
  charaImg: './img/chara.png', // Required, url of an image representing a grid of 'characters' to display
  charaWidth: 44, // Width of one character, if missing charaImg is assumed to be only one character
  charaHeight: 41, // Height of one character, if missing charaImg is assumed to be only one character
  nbCharas: 7, // Optional, default 10, Number of characters to display in the rendering
  borderWidth: 8, // Optional, default 8, width of the terrain border
  borderColor: '#89c53f', // Optional, default #89c53f, color of the terrain border
  waveColor: '#2f5a7e', // Optional, default #2f5a7e, color of the water
  waveFps: 20, // Optional, default 20, frame per second for the water animation
  waveDuration: 60000 // Optional, default 60000, duration of the animation in milliseconds, use 0 for infinite
}).then((terrainRenderer) => {
  terrainRenderer.drawTerrain(
    Math.random(),
    document.getElementById('bgcanvas'),
    document.getElementById('bgwater'),
    document.getElementById('fgcanvas'),
    document.getElementById('fgwater')
  )
})

Like for the terrain mask, if you have already loaded the images to use you can call the TerrainRenderer constructor directly.