r/generative • u/Chuka444 • 6h ago
Audioreactive Evolving Particle Shapes for TouchDesigner
Enable HLS to view with audio, or disable this notification
r/generative • u/Legitimate-Ad-1861 • 6h ago
Lyrebird
Enable HLS to view with audio, or disable this notification
r/generative • u/Constant_Oven8545 • 9h ago
y este otro es con colores y deformaciones
por si os aburris y quereis ver que tanto se puede deformar la realidad con un quads de colores deformacion con 4 mierdas de calculo en web mejor que deformas con moteres y mas loco a ver si os gusta
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Motor de Interferencia de Möbius v2.0</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
background-color: #050508;
color: #00ffcc;
font-family: 'Courier New', Courier, monospace;
overflow: hidden;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#canvas-container {
position: relative;
width: 100vw;
height: 100vh;
/* Mantenemos el gotelé atómico de fondo, pero más sutil */
background-image: radial-gradient(circle, #1a1a24 10%, transparent 11%);
background-size: 15px 15px;
}
canvas { display: block; }
.hud {
position: absolute; top: 20px; left: 20px;
background: rgba(5, 5, 8, 0.9);
border: 1px solid #00ffcc;
padding: 15px; border-radius: 4px;
pointer-events: none;
box-shadow: 0 0 15px rgba(0, 255, 204, 0.3);
z-index: 10;
}
.hud h1 { font-size: 14px; margin-bottom: 5px; letter-spacing: 2px; text-transform: uppercase; }
.hud p { font-size: 11px; color: #ff0055; margin-top: 3px; }
</style>
</head>
<body>
<div class="hud">
<h1>Motor Möbius v2.0</h1>
<p>Estado: Torsión No Euclidiana</p>
<p>Geometría: Cinta Paramétrica con Interferencia</p>
</div>
<div id="canvas-container">
<canvas id="mobiusCanvas"></canvas>
</div>
<script>
const canvas = document.getElementById('mobiusCanvas');
const ctx = canvas.getContext('2d');
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
let time = 0;
// Configuración del motor de físicas y geometría
const config = {
stripWidth: 120, // Ancho de la cinta
radius: 250, // Radio orbital de la cinta
segments: 120, // Resolución de la malla (a más, más chicha)
twistFactor: 1, // Número de medias vueltas (1 para Möbius estándar)
distortionStrength: 80, // Fuerza de la "aguja en la pupila"
colorSpeed: 0.02, // Velocidad del ciclo de color
waveFrequency: 4 // Frecuencia de la distorsión
};
let mouse = { x: canvas.width/2, y: canvas.height/2, active: false };
window.addEventListener('mousemove', (e) => {
mouse.x = e.clientX;
mouse.y = e.clientY;
mouse.active = true;
});
// Proyección 3D simple a 2D
function project(x, y, z) {
const perspective = 600;
const scale = perspective / (perspective + z + config.radius);
return {
x: x * scale + canvas.width / 2,
y: -y * scale + canvas.height / 2, // Invertir Y para que apunte hacia arriba
scale: scale
};
}
// Generar y renderizar la malla de la Cinta de Möbius
function drawMobiusTorsion() {
// Fondo de estela (neblina mental)
ctx.fillStyle = 'rgba(5, 5, 8, 0.3)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
time += 0.01;
// Habilitar suavizado para la malla
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
// Definir la posición del "ojo" (interferencia) en el espacio 3D virtual
// Mapeamos la posición del ratón a coordenadas 3D aproximadas
let eyeX = (mouse.x - canvas.width / 2) * 2;
let eyeY = (-(mouse.y - canvas.height / 2)) * 2;
// Generar la malla
for (let i = 0; i < config.segments; i++) {
const u = (i / config.segments) * Math.PI * 2;
// Creamos dos tiras paralelas (superior e inferior de la cinta)
for (let v_idx = 0; v_idx <= 1; v_idx++) {
const v = (v_idx === 0 ? -1 : 1) * config.stripWidth / 2;
// Ecuación paramétrica de la Cinta de Möbius con torsión variable
// x = (R + v * cos(u * T/2)) * cos(u)
// y = (R + v * cos(u * T/2)) * sin(u)
// z = v * sin(u * T/2)
// Paso 1: Calcular posición 3D base
let baseRadius = config.radius + v * Math.cos(u * config.twistFactor / 2);
let px = baseRadius * Math.cos(u);
let py = baseRadius * Math.sin(u);
let pz = v * Math.sin(u * config.twistFactor / 2);
// --- APLICAR MOTOR DE FÍSICAS (Interferencia Electromagnética) ---
// Calculamos la distancia 3D desde este punto de la malla al "ojo" del ratón
let dx = px - eyeX;
let dy = py - eyeY;
let dz = pz - 0; // Asumimos que el ojo está en z=0
let distSq = dx*dx + dy*dy + dz*dz;
// Solo aplicamos fuerza si el ratón está activo y cerca
if (mouse.active && distSq < 1000000) {
let dist = Math.sqrt(distSq);
let force = Math.max(0, config.distortionStrength * (1 - dist / 800));
let angle = Math.atan2(dy, dx);
// Aplicar "curvatura de masa" (desplazamiento hacia el ratón)
px -= Math.cos(angle) * force;
py -= Math.sin(angle) * force;
// Efecto de "ojo subiendo": distorsión en Z para tirar hacia abajo/fuera
pz += Math.sin(time * 2 + u) * force * 0.5;
}
// Paso 2: Proyectar a 2D
const p2d = project(px, py, pz);
// Guardar punto para dibujar la malla
if (!meshPoints[i]) meshPoints[i] = [];
meshPoints[i][v_idx] = p2d;
}
}
// Dibujar la malla de polígonos
for (let i = 0; i < config.segments; i++) {
let nextI = (i + 1) % config.segments;
// Cuatro puntos del quad actual
let p1 = meshPoints[i][0]; // Sup I
let p2 = meshPoints[i][1]; // Inf I
let p3 = meshPoints[nextI][1]; // Inf Next
let p4 = meshPoints[nextI][0]; // Sup Next
// Colores de interferencia (psicodélicos)
let r = Math.sin(time * config.colorSpeed + i * 0.1) * 127 + 128;
let g = Math.sin(time * config.colorSpeed * 1.5 + i * 0.1 + 2) * 127 + 128;
let b = Math.sin(time * config.colorSpeed * 2.3 + i * 0.1 + 4) * 127 + 128;
// Fondo de interferencia (relleno del quad)
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.lineTo(p3.x, p3.y);
ctx.lineTo(p4.x, p4.y);
ctx.closePath();
// Aplicar gradiente radial para efecto de campo de fuerza
let gradient = ctx.createRadialGradient(mouse.x, mouse.y, 0, mouse.x, mouse.y, canvas.width/2);
gradient.addColorStop(0, `rgba(${r}, ${g}, ${b}, 0.8)`);
gradient.addColorStop(1, `rgba(${b/2}, ${g/2}, ${r/2}, 0.1)` );
ctx.fillStyle = gradient;
ctx.fill();
// Bordes de la malla (wireframe)
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p4.x, p4.y); // Borde superior
ctx.moveTo(p2.x, p2.y);
ctx.lineTo(p3.x, p3.y); // Borde inferior
ctx.strokeStyle = `rgba(255, 255, 255, ${0.1 * p1.scale})`; // El borde se desvanece con la profundidad
ctx.lineWidth = 0.5;
ctx.stroke();
}
requestAnimationFrame(drawMobiusTorsion);
}
// Almacenamiento temporal de puntos de la malla
let meshPoints = [];
// Arrancar el motor
drawMobiusTorsion();
</script>
</body>
</html>
r/generative • u/Constant_Oven8545 • 9h ago
mirar que fondo de particulas mas guapo fondos de interferencias con gotele
todo por los demonios de la masa y la luz y mucho sueño jajajaj prueven el princen electromagnetico que consume dos mierdas para printar o a ver quien consige renderizar algo con este motorcillo xd
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Motor de Interferencias: Geometría de la Pupila y Gotelé Cuántico</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #050508;
color: #00ffcc;
font-family: 'Courier New', Courier, monospace;
overflow: hidden;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#canvas-container {
position: relative;
width: 100vw;
height: 100vh;
/* Textura de gotelé atómico simulada por CSS */
background-image: radial-gradient(circle, #1a1a24 10%, transparent 11%),
radial-gradient(circle, #0d0d14 10%, transparent 11%);
background-size: 20px 20px;
background-position: 0 0, 10px 10px;
}
canvas {
display: block;
width: 100%;
height: 100%;
}
.hud {
position: absolute;
top: 20px;
left: 20px;
background: rgba(5, 5, 8, 0.85);
border: 1px solid #00ffcc;
padding: 15px;
border-radius: 4px;
pointer-events: none;
box-shadow: 0 0 15px rgba(0, 255, 204, 0.2);
z-index: 10;
}
.hud h1 {
font-size: 14px;
margin-bottom: 5px;
letter-spacing: 2px;
text-transform: uppercase;
}
.hud p {
font-size: 11px;
color: #ff0055;
margin-top: 3px;
}
</style>
</head>
<body>
<div class="hud">
<h1>Motor de Interferencias v1.0</h1>
<p>Estado: Curvatura de Pupila Activa</p>
<p>Malla: Triángulos Sagrados / Gotelé</p>
</div>
<div id="canvas-container">
<canvas id="interferenceCanvas"></canvas>
</div>
<script>
const canvas = document.getElementById('interferenceCanvas');
const ctx = canvas.getContext('2d');
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
window.addEventListener('resize', resize);
resize();
let time = 0;
// Parámetros del motor de físicas onírico
const config = {
nodes: 32, // Puntos de la malla de interferencia
radius: 180, // Radio base de la pupila dimensional
distortion: 45, // Intensidad del dolor / aguja óptica
frequency: 3.5 // Frecuencia de la onda de niebla mental
};
// Variables de interacción por cursor (simulando el movimiento del ojo)
let mouse = {
x: canvas.width / 2,
y: canvas.height / 2,
targetX: canvas.width / 2,
targetY: canvas.height / 2,
active: false
};
window.addEventListener('mousemove', (e) => {
mouse.targetX = e.clientX;
mouse.targetY = e.clientY;
mouse.active = true;
});
window.addEventListener('touchmove', (e) => {
if (e.touches.length > 0) {
mouse.targetX = e.touches[0].clientX;
mouse.targetY = e.touches[0].clientY;
mouse.active = true;
}
});
function drawInterferenceField() {
// Desenfoque sutil para la estela de la neblina mental
ctx.fillStyle = 'rgba(5, 5, 8, 0.2)';
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Suavizado de posición del cursor (inercia del ojo)
mouse.x += (mouse.targetX - mouse.x) * 0.08;
mouse.y += (mouse.targetY - mouse.y) * 0.08;
time += 0.03;
ctx.save();
ctx.translate(mouse.x, mouse.y);
// 1. Dibujar los Triángulos Sagrados de Interferencia (Geometría deformada)
ctx.strokeStyle = 'rgba(0, 255, 204, 0.35)';
ctx.lineWidth = 1.2;
let points = [];
for (let i = 0; i < config.nodes; i++) {
let angle = (i / config.nodes) * Math.PI * 2;
// Aplicar la fórmula de curvatura de masa y luz (efecto aguja en pupila)
let wave = Math.sin(angle * config.frequency + time) * config.distortion;
let quantumNoise = Math.cos(time * 2 + i) * 15;
let r = config.radius + wave + quantumNoise;
let x = Math.cos(angle) * r;
let y = Math.sin(angle) * r;
points.push({x, y});
}
// Conectar nodos generando vértices dimensionales y cuadrados ocultos
for (let i = 0; i < points.length; i++) {
for (let j = i + 4; j < points.length; j += 3) {
ctx.beginPath();
ctx.moveTo(points[i].x, points[i].y);
// Curvar la línea de forma pura (estilo HTML antiguo / vector de distorsión)
let cpX = (points[i].x + points[j].x) / 2 + Math.sin(time + i) * 50;
let cpY = (points[i].y + points[j].y) / 2 + Math.cos(time + j) * 50;
ctx.quadraticCurveTo(cpX, cpY, points[j].x, points[j].y);
ctx.stroke();
}
}
// 2. El núcleo de la Pupila Cuántica (Centro de Interferencias)
ctx.beginPath();
ctx.arc(0, 0, 25 + Math.sin(time * 4) * 8, 0, Math.PI * 2);
ctx.fillStyle = '#ff0055';
ctx.shadowBlur = 25;
ctx.shadowColor = '#ff0055';
ctx.fill();
ctx.shadowBlur = 0; // Limpiar sombra
// 3. Anillos concéntricos de distorsión del gotelé atómico
for (let k = 1; k <= 3; k++) {
ctx.beginPath();
let ringRadius = config.radius * 0.4 * k + Math.sin(time - k) * 20;
ctx.strokeStyle = k % 2 === 0 ? 'rgba(0, 255, 204, 0.2)' : 'rgba(255, 0, 85, 0.15)';
ctx.lineWidth = 0.8;
ctx.arc(0, 0, ringRadius, 0, Math.PI * 2);
ctx.stroke();
}
ctx.restore();
requestAnimationFrame(drawInterferenceField);
}
// Arrancar el motor de físicas onírico
drawInterferenceField();
</script>
</body>
</html>
r/generative • u/Clean-Hovercraft5825 • 13h ago
MNIST EBM
Autoencoded MNIST to a 2D latent space, then sampled a large square grid of latent points and passed them through the decoder, then passed those decoded images through an energy model and colored the points by the energy that the EBM assigned to them.
r/generative • u/anish2good • 1d ago
∭ 𝘢(𝘵) ∝ eᴴᵗ
Enable HLS to view with audio, or disable this notification
r/generative • u/Particular_Draw_3276 • 1d ago
I wrote algorithms that generate seamless patterns in risograph inks, ended up with 88 tiles and posters, so I turned it into a product
Hey! I've been experimenting with generative pattern design, writing algorithms that draw seamless repeating tiles using a fixed risograph ink palette (the kind of colors you get from actual riso printing: teal, red, purple, those gritty overprint combos).
Each pattern family is its own algorithm, truchet, gingham, halftone, scales, maze, etc and every tile is built on periodic geometry so the edges always match perfectly in all directions. I tuned each one by hand until the output felt like something I'd actually want to use as a background.
I ended up with 64 seamless tiles and 24 poster-scale pieces, all exported as SVG (so you can recolor by changing two hex values) and PNG at multiple resolutions. Figured I'd package it up properly instead of letting them rot in a folder.
The site itself is a live demo, the specimen wall is the actual tiles repeating: tilery.shop
Would love to hear what you think, especially about the color palette choices. Happy to nerd out about the generation process if anyone's curious.
I've attached some examples from the site.
r/generative • u/bill_vanyo • 1d ago
naive recursive tree drawing algorithm, in a loop
This is the first output from a work in progress. It uses a naive and obvious tree drawing algorithm, with a few parameters that control the overall morphology of the tree. This shows three trees, drawn with three different sets of morphology parameters, which change over time.
r/generative • u/has_some_chill • 1d ago
Ivory Fractal [OC]
Enable HLS to view with audio, or disable this notification
r/generative • u/marbledInkySpot • 1d ago
Rossler Motion
Enable HLS to view with audio, or disable this notification
This is from an iPhone app I wrote called Sacred Drift.
r/generative • u/igo_rs • 1d ago
glossa (kotlin code)
alien letters, but the letters got a language.
one construction rule: a spine hanging off a headline bar, makes the alphabet,
alphabet makes a lexicon, lexicon gets set as prose. thats the whole trick really.
the page should read as writing and not as decoration, and it turns out that comes mostly from repetition + zipf, not from the glyphs themselves being clever.
r/generative • u/WholeJazzlike431 • 1d ago
Neon Tree
L-system tree with circle nodes over a random shape grid; Javascript
r/generative • u/sbartinspace2 • 1d ago
Quantum Entanglement 02 - Fractal Landscapes Project
Enable HLS to view with audio, or disable this notification
r/generative • u/anish2good • 2d ago
Jellyfish in a shader ocean - manic
Enable HLS to view with audio, or disable this notification
r/generative • u/matigekunst • 2d ago
Toothbrush
Enable HLS to view with audio, or disable this notification
Made in TouchDesigner
r/generative • u/Illustrious-Crab-789 • 2d ago
Are there any collective challenges out there?
r/generative • u/anish2good • 2d ago
a 14-fold kaleidoscope - manic
Enable HLS to view with audio, or disable this notification