JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

JavaScript

class HeightmapGenerator {

	constructor(size){
  
  	this.size = size;
  
  	this.canvas = document.createElement('canvas');
    
    this.canvas.width = size;
    this.canvas.height = size;
    
    document.body.appendChild(this.canvas);
    
    this.ctx = this.canvas.getContext("2d");
    
    //const grad=ctx.createRadialGradient(150,75,15,150,75,150);
	 // grad.addColorStop(0,"lightblue");
	  //grad.addColorStop(1,"darkblue");
    
    this.ctx.fillStyle = "black";
		this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
    
    /*
    
    let resolution = 1;
    let count = (this.canvas.width*this.canvas.height)*resolution;
    
    let clusterCount = 120;
    let clusterIndex = 0;
    
    let currentClusterX = this._randomNumberBetween(0,this.canvas.width);
    let currentClusterY = this._randomNumberBetween(0,this.canvas.height);
    let currentClusterRadius = this._randomNumberBetween(10,180);
    let currentClusterMinElevation = this._randomNumberBetween(50,100);
    let currentClusterMaxElevation = this._randomNumberBetween(100,255);
    
    
    for(let i=0;i<count;i++){
    
    	this._drawTerrain({
        x: currentClusterX+this._randomNumberBetween(0,currentClusterRadius),
        y: currentClusterY+this._randomNumberBetween(0,currentClusterRadius),
        radius: this._randomNumberBetween(0,1),
        elevation: this._randomNumberBetween(currentClusterMinElevation,currentClusterMaxElevation),
        arcStart: this._randomNumberBetween(0,Math.PI),
        arcEnd: this._randomNumberBetween(Math.PI,Math.PI*2)
      });
      
      clusterIndex++;
      
      if(clusterIndex > clusterCount){
      
      	clusterIndex = 0;
        
        currentClusterRadius = this._randomNumberBetween(10,180);
        currentClusterMinElevation = this._randomNumberBetween(50,100);
    		currentClusterMaxElevation = this._randomNumberBetween(50,255);
        
        currentClusterX = this._randomNumberBetween(0,this.canvas.width);
   ...