# mandelbrot visualization fun

color lerp

getting warmer

added inspector

learning how to do 3d vis in p5js

random isometic cubes

way retro looking! love it

## first real try

It kinda just worked! f yeah

here we go!

more preformant with combining all the little boxes into one big joined shape

#### See the chatgpt prompt

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

#### See the unpolished code

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;

}