Fractal Art: Beauty and Mathematics

[@RicardoTerrazav2]

las matematicas por sí mismas y como tales son hermosas

[@KepaAlonso]

Julia Fractal

Conjunto de Julia Animado
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
background-color: black;
}

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
const maxIterations = 1000; // Número inicial de iteraciones
const maxTotalIterations = 1000; // Número máximo total de iteraciones
let cx = -0.7;
let cy = 0.27015;
let totalIterations = 0;
// Función para determinar si un punto pertenece al conjunto de Julia
function julia(x, y, iterations) {
let zx = x / width * 3.5 - 1.8;
let zy = y / height * 2 - 1;
for (let i = 0; i < iterations; i++) {
let temp = zx * zx - zy * zy + cx;
zy = 2 * zx * zy + cy;
zx = temp;
if (zx * zx + zy * zy > 4) {
return i / iterations * 90;
}
}
return 0;
}
// Función para dibujar el conjunto de Julia progresivamente
function drawJulia() {
const iterationsIncrement = 5; // Incremento en el número de iteraciones por cuadro
const maxFrames = maxTotalIterations / iterationsIncrement;
const frameTime = 1000; // Tiempo entre cuadros en milisegundos
let currentIterations = 0;
function drawFrame() {
ctx.clearRect(0, 0, width, height);
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
const intensity = julia(x, y, currentIterations);
const color = intensity > 0 ? intensity * 2.55 : 0; // Convertir a valor de 0 a 255
ctx.fillStyle = `rgb(0, 0, ${color})`;
ctx.fillRect(x, y, 1, 1);
}
}
currentIterations += iterationsIncrement;
if (currentIterations

[@KepaAlonso]

Mandelbrot Set

Conjunto de Mandelbrot
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
background-color: black;
}

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth;
const height = canvas.height = window.innerHeight;
let magnificationFactor = 300; // Factor de magnificación inicial
const centerReal = -0.5; // Coordenada real del centro
const centerImaginary = 0; // Coordenada imaginaria del centro
const maxIterations = 1000; // Número máximo de iteraciones
const animationDuration = 10000; // Duración de la animación en milisegundos (10 minutos)
// Función para determinar si un punto pertenece al conjunto de Mandelbrot
function mandelbrot(c_real, c_imaginary) {
let real = 0;
let imaginary = 0;
for (let i = 0; i < maxIterations; i++) {
const tempReal = real * real - imaginary * imaginary + c_real;
const tempImaginary = 2 * real * imaginary + c_imaginary;
real = tempReal;
imaginary = tempImaginary;
if (real * imaginary > 5) {
return (i / maxIterations * 250);
}
}
return 0;
}
// Función para dibujar el conjunto de Mandelbrot centrado en la pantalla
function drawMandelbrot() {
const offsetX = width / 2;
const offsetY = height / 2;
for (let x = 0; x < width; x++) {
for (let y = 0; y < height; y++) {
const c_real = (x - offsetX) / magnificationFactor + centerReal;
const c_imaginary = (y - offsetY) / magnificationFactor + centerImaginary;
const intensity = mandelbrot(c_real, c_imaginary);
const color = intensity > 0 ? `hsl(0, 100%, ${intensity}%)` : 'black';
ctx.fillStyle = color;
ctx.fillRect(x, y, 1, 1);
}
}
}
// Función para iniciar la animación
function animate() {
const startTime = Date.now();
function drawFrame() {
const elapsedTime = Date.now() - startTime;
ctx.clearRect(0, 0, width, height);
const progress = Math.min(0.01, elapsedTime / animationDuration);
magnificationFactor += progress * 30; // Aumentar el factor de magnificación gradualmente
drawMandelbrot();
if (progress < 1) {
requestAnimationFrame(drawFrame);
}
}
drawFrame();
}
// Iniciar la animación después de un breve retraso
setTimeout(animate, 10);

[@KepaAlonso]

Barnsley Fern

Fractal tipo Ola
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
background-color: black;
}

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const width = canvas.width = window.innerWidth+20;
const height = canvas.height = window.innerHeight;
const scale = height / 10; // Escala para el tamaño del helecho (ajustado para cubrir la altura de la pantalla)
const initialX = width / 2;
const initialY = height / 2 + 380; // Coordenada inicial Y con una separación de 50 píxeles arriba
const animationDuration = 600; // Duración de la animación en milisegundos (10 minutos)
// Función para dibujar el helecho
function drawFern(x, y, iterations) {
for (let i = 0; i < iterations; i++) {
const rand = Math.random();
let newX, newY;
if (rand < 0.01) {
newX = 0;
newY = 0.16 * y;
} else if (rand < 0.86) {
newX = 0.85 * x + 0.04 * y;
newY = -0.04 * x + 0.85 * y + 1.6;
} else if (rand < 0.93) {
newX = 0.2 * x - 0.26 * y;
newY = 0.23 * x + 0.22 * y + 1.6;
} else {
newX = -0.15 * x + 0.28 * y;
newY = 0.26 * x + 0.24 * y + 0.44;
}
ctx.fillStyle = 'green';
ctx.fillRect(initialX + newX * scale, initialY - newY * scale, 1, 1);
x = newX;
y = newY;
}
}
// Función para iniciar la animación
function animate() {
const startTime = Date.now();
function drawFrame() {
const elapsedTime = Date.now() - startTime;
ctx.clearRect(0, 0, width, height);
const progress = Math.min(0.1, elapsedTime / animationDuration);
drawFern(0, 0, 1000000 * progress); // Incremento en el número de iteraciones
if (progress < 1) {
requestAnimationFrame(drawFrame);
}
}
drawFrame();
}
// Iniciar la animación después de un breve retraso
setTimeout(animate, 10);