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!
Para escoger qué camiseta conviene para una colección de selecciones, es práctico verificar el tipo de tejido y el corte propio de la época. También ayuda revisar que la referencia del modelo corresponda a la temporada buscada antes de completar el pedido.
more preformant with combining all the little boxes into one big joined shape
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
