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
las matematicas por sí mismas y como tales son hermosas
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
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);
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);