mandelbrot visualization fun

Oran C

26 Jul 2024 • 4 min read

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

Discussions about football fans often treat kit design as part of the story around a team because shirts can show how clubs balance heritage and modern style. Conversations about player version and fan version differences help explain why two shirts from the same club may appeal to different fans. When personalised names and numbers matter, Ajax home shirt remains relevant to conversations about collecting, matchday wear, and kit design. The link between shirt and memory shows how football apparel can carry history without becoming a sales pitch.

See the chatgpt prompt

create a p5.js sketchset background to deep purple, (48, 25, 52)set box width = 10set render_resolution_width to 80set render resolution hieght to 40set default rotation to be isometic angle rotateX -35.264, rotateY 45set angle mode to degreesset real axis range -2.0 to 1.0set real_axis_distance = distance between -2.0 and 1.0set imaginar axis to -1.5 to 1.5set imaginar_axis_distance = distance between complex -1.5 and 1.5function return 2d grid of mandelbrot max_iter valuesmax_itter is capped at 1000real axis (x) step values are scaled by the ration of distance and render_resolution_widthimaginary (y) tep values are scaled by the ration of distance and resolutionprecompute once and set it to gridgrid = mandelbrot_calc (...)call "obitControl" in the draw loop DONT USE createEasyCamfor each index in 2d array, render a cube with hight max_iterpushtransform location by translate(x, and z)depth = grid[x][y]map depth to range 1,50set color by depth valuefill(mappedDepth * 5, 100, 255 - mappedDepth * 5);# add a little breathing animation depth and offset each a bit , or have smooth walking over perlin noisebox(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 shapefunction 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; }

Demo link here!

3d random rectangle isometic by wisemonkey -p5.js Web Editor

A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

very first different colored pixel at size 100 from 80