create a p5.js sketch
set background to deep purple, (48, 25, 52)
set box width = 10
set render_resolution_width to 80
set render resolution hieght to 40
set default rotation to be isometic angle rotateX -35.264, rotateY 45
set angle mode to degrees
set real axis range -2.0 to 1.0
set real_axis_distance = distance between -2.0 and 1.0
set imaginar axis to -1.5 to 1.5
set imaginar_axis_distance = distance between complex -1.5 and 1.5
function return 2d grid of mandelbrot max_iter values
max_itter is capped at 1000
real axis (x) step values are scaled by the ration of distance and render_resolution_width
imaginary (y) tep values are scaled by the ration of distance and resolution

precompute once and set it to grid
grid = mandelbrot_calc (...)

call "obitControl" in the draw loop DONT USE createEasyCam

for each index in 2d array, render a cube with hight max_iter
push
transform location by translate(x, and z)
depth = grid[x][y]
map depth to range 1,50
set color by depth value
fill(mappedDepth * 5, 100, 255 - mappedDepth * 5);
# add a little breathing animation depth and offset each a bit , or have smooth walking over perlin noise
box(box_width, depth, box_width)
pop

let grid;
let boxWidth = 10;
let renderResolutionWidth = 80;
let renderResolutionHeight = 80;
let maxIter = 1000;
let shape
function setup() {
createCanvas(windowWidth, windowHeight, WEBGL);
angleMode(DEGREES);
grid = mandelbrotCalc(-2.0, 1.0, -1.5, 1.5);
shape = buildGeometry(createVisualization);

debugMode()
}

function draw() {
background(48, 25, 52);
orbitControl();

rotateX(-35.264);
rotateY(45);

model(shape)
}

function createVisualization(){
push()
for (let i = 0; i < renderResolutionWidth; i++) {
for (let j = 0; j < renderResolutionHeight; j++) {
let depth = grid[i][j];
let mappedDepth = map(depth, 0, maxIter, 1, 50);
let animDepth = mappedDepth + sin((frameCount + i + j) * 0.1) * 5;

push();
translate(
(i - renderResolutionWidth / 2) * boxWidth,
0,
(j - renderResolutionHeight / 2) * boxWidth,

);
fill(mappedDepth * 5, 100, 255 - mappedDepth * 5);
box(boxWidth, animDepth, boxWidth);
pop();
}
}

pop()
}

function mandelbrotCalc(xMin, xMax, yMin, yMax) {
let result = [];
let xStep = (xMax - xMin) / renderResolutionWidth;
let yStep = (yMax - yMin) / renderResolutionHeight;

for (let i = 0; i < renderResolutionWidth; i++) {
result[i] = [];
for (let j = 0; j < renderResolutionHeight; j++) {
let x0 = xMin + i * xStep;
let y0 = yMin + j * yStep;
let x = 0;
let y = 0;
let iter = 0;

while (x * x + y * y <= 4 && iter < maxIter) {
let xtemp = x * x - y * y + x0;
y = 2 * x * y + y0;
x = xtemp;
iter++;
}

result[i][j] = iter;
}
}

return result;
}