JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

<canvas id="canvas"></canvas>
<canvas id="voxCanvas"></canvas>

JavaScript

var mapCanvas= document.getElementById("canvas"),
                ctx = mapCanvas.getContext("2d"),
                map = [],
                unitSize = 1,
                mapDimension = 256;

            mapCanvas.height=canvas.width = mapDimension;
            
            // make a mayan temple
            for(var x = 0; x < mapDimension; x++){
                map[x] = [];
                 for(var y = 0; y < mapDimension; y++){
                    var startingBound = mapDimension/4,
                        endingBound = (mapDimension/4)*3;
                     
                    if(y > startingBound && y < endingBound && x > startingBound && x < endingBound){
                        var base = endingBound - startingBound,
                            sections = 10,
                            sectionSize = base/sections,
                            baseHeight = 0.2;
                            colIncr = (1-baseHeight)/sections;
                         
                        for(var i = 0; i <sections; i++){
                           if(y > startingBound && y < endingBound && x > startingBound && x < endingBound){
                               map[x][y] = (i*colIncr) + baseHeight;
                           }
                           startingBound += sectionSize/2;
                           endingBound -= sectionSize/2;
                        }
                    }else{
                        map[x][y] = Math.random()*0.1;
                    }
                }
            }
            
            colorMap();
            drawShadowMap(mapDimension, 512,256,2);
            //drawShadowMap(mapDimension, 512,-256,3);
            drawRenderedMap(mapDimension, 300, 4, 200, mapDimension / 2, mapDimension + 50);
           // size, viewAngle, yaw, camHeight, camX, camY
            function colorMap(){
                for(var x = 0; x < mapDimension; x++){
                    for(var y = 0; y < mapDimension; y++){
                        var color =...