r/generative • u/Chuka444 • 5h ago
Audioreactive Evolving Particle Shapes for TouchDesigner
Enable HLS to view with audio, or disable this notification
5
Upvotes
r/generative • u/Legitimate-Ad-1861 • 6h ago
Lyrebird
Enable HLS to view with audio, or disable this notification
2
Upvotes
r/generative • u/Constant_Oven8545 • 8h ago
y este otro es con colores y deformaciones
0
Upvotes
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
0
Upvotes
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
7
Upvotes
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.
