The Tarot of Dolls

Processing 5

The Tarot of Dolls of Dolls consta de las siguientes animaciones desarrolladas con p5js

al interior del marco
el cielo y las estrellas
Llueve
Crecemos
Giramos
Nos Vamos...
Genesis
Enlaces
Destino
Volvemos
Arbol Genealogico de un Trueno
Al Interior del Diamante
Diamante al Interior del Oceano
De Sorox y otros Planetas

Al Interior del Marco

Al Interior del Marco es, como todas las animaciones de mega doll, basica en cuanto a su tridimensionalidad y con una expresión profunda en lo personal, en lo geometrico y en su propio existir, me da curiosidad que cuando observamos (yo se leer el tarot egipcio) las cartas el marco, en el caso de algunas versiones del tarot egipcio, porque hay dos versiones, las cartas de la arena y otro mas antiguo tambien muy interesante que lo estoy aprendiendo todavia pero, los marcos de las cartas de arena son de color arena y a veces pienso que son muy acertadas, tienen su forma de coincidir sin necesidad de forzar las cosas, pero tambien pienso en el marco. El otro día estaba caminando por mi granja y me encontré muchos cuarzos, miré al cielo y lo primero que pensé fue: "llueven estrellas" el cuarzo es una estrella, una estrella es una roca que brilla en los cielos mientras esta viva, y cuando explota y su luz se extingue caen a la tierra, desde el cielo, como la lluvia, como el agua, como la luz, como todo, dibujé una estrellita dentro del marco porque cuando invocas las cartas pensando que al interior del marco habita un cuarzo estás ubicando la protección del solicitante, hay casos diferentes y enfoques diferentes con los cuales observar a alguien, hacerse a una idea de quien ese, de donde viene, para donde va y contarle como se ve desde la perspectiva que uno esta leyendo...


// al interior del marco

let xPos = -200; // Posición inicial en el eje x
let angle = 0; // Ángulo de rotación inicial
let speed = 6; // Velocidad de movimiento hacia el centro
let colorSwitch = true; // Alternar entre colores
let points = []; // Almacenamiento de puntos de la estrella

function setup() {
  createCanvas(800, 600, WEBGL); // Usar modo WEBGL para efectos tridimensionales
  rectMode(CENTER); // Centrar el rectángulo

  // Generar puntos para la estrella de puntos
  generateStarPoints(0, 0, 150, 75, 5);
}

function draw() {
  background("#5E50A0"); // Fondo de color púrpura

  // Ajustar la cámara para dar un efecto de perspectiva
  let fov = PI / 3; // Campo de visión de la cámara
  let cameraZ = (height / 2.0) / tan(fov / 2.0);
  perspective(fov, width / height, cameraZ / 10.0, cameraZ * 10.0);

  // Dibujar la estrella de puntos detrás de todo
  drawPointStar(0, 0, frameCount); // frameCount como parámetro para animar

  // Dibujar estrella detrás del marco
  let outerRadius = 150 + 30 * sin(frameCount * 0.05); // Cambia de tamaño con el tiempo
  let innerRadius = 75 + 15 * sin(frameCount * 0.05); // Cambia de tamaño con el tiempo
  drawStar(0, 0, outerRadius, innerRadius, 5); // Coordenadas (x, y), radios, número de puntas

  // Mover el marco hacia el centro del lienzo
  if (xPos < 0) {
    xPos += speed;
  }

  // Rotar y desplazar el marco de la carta de tarot
  push();
  translate(xPos, 0, 0); // Mover el marco hacia la posición actual
  rotateY(angle); // Rotar en torno al eje Y para efecto 3D
  noFill(); // No llenar el marco, sólo mostrar el borde
  stroke(colorSwitch ? '#2696CB' : '#7DD1F5'); // Alternar entre los dos colores
  strokeWeight(5); // Grosor del borde del marco
  beginShape(); // Iniciar la forma del marco
  vertex(-75, -125); // Esquina superior izquierda
  vertex(75, -125); // Esquina superior derecha
  vertex(75, 125); // Esquina inferior derecha
  vertex(-75, 125); // Esquina inferior izquierda
  endShape(CLOSE); // Cerrar la forma del marco
  pop();

  // Aumentar el ángulo de rotación para el efecto 3D
  angle += 0.03;

  // Cambiar el color después de cada rotación completa
  if (angle > TWO_PI) {
    angle = 0; // Reiniciar el ángulo
    colorSwitch = !colorSwitch; // Alternar el color
  }
}

function drawStar(x, y, outerRadius, innerRadius, npoints) {
  push();
  rotateY(-angle); // Contrarrestar la rotación del marco para mantener la estrella fija
  fill('#F4E3BE'); // Color de relleno para la estrella
  stroke('#D4AC0D'); // Color del borde para la estrella
  strokeWeight(3);

  let starAngle = TWO_PI / npoints; // Usamos un nombre diferente para la variable de ángulo aquí
  let halfAngle = starAngle / 2.0;
  beginShape();
  for (let a = 0; a < TWO_PI; a += starAngle) {
    let sx = x + cos(a) * outerRadius;
    let sy = y + sin(a) * outerRadius;
    vertex(sx, sy, -10); // Estrella detrás del marco, en -10 en el eje z
    sx = x + cos(a + halfAngle) * innerRadius;
    sy = y + sin(a + halfAngle) * innerRadius;
    vertex(sx, sy, -10);
  }
  endShape(CLOSE);
  pop();
}

// Función para generar puntos de estrella y almacenarlos
function generateStarPoints(x, y, outerRadius, innerRadius, npoints) {
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;

  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * outerRadius;
    let sy = y + sin(a) * outerRadius;
    points.push({ x: sx, y: sy }); // Agregar punto externo

    sx = x + cos(a + halfAngle) * innerRadius;
    sy = y + sin(a + halfAngle) * innerRadius;
    points.push({ x: sx, y: sy }); // Agregar punto interno
  }
}

// Función para dibujar la estrella de puntos con animación
function drawPointStar(x, y, frameCount) {
  push();
  rotateY(-angle); // Contrarrestar la rotación del marco para mantener la estrella fija
  translate(0, 0, -15); // Poner detrás de la otra estrella

  let maxPoints = map(sin(frameCount * 0.05), -1, 1, 0, points.length);
  fill(255);
  noStroke();

  for (let i = 0; i < maxPoints; i++) {
    ellipse(points[i].x, points[i].y, 5, 5); // Dibujar cada punto
  }
  pop();
}

El Cielo y las Estrellas

Me gusta mirar al cielo y soñar que llueven cuarzos y estrellas de todo tipo, un dia, estaba triste viajando en mi avión a un viaje de mierda por un rollo de mierda horrible de esas responsabilidades que no puedes evadir y que te toca y que detestas en fin, y llevaba un cuarzo conmigo porque queria cuando estuvieramos en altamar tirarlo al agua, y sembrarlo, empecé a bajar el avion casi al nivel del agua y abrí la puerta, es un jet turbo pequeño con dos motores, entonces es mucho mas estable que un avion grande, mucho mas liviano y comodo, abri la puerta, inhalé profundo, me despedí del cuarzo y lo arrojé con todas mis fuerzas al agua, cuando calló en el agua sentí como todo ese nucleo morado del cuarzo empezó a desteñirse y a mezclarse con el agua, fue una experiencia inolvidable, quiero volver a pasar por ahi, por las noches a veces, sueño que paso en mi avion por ahí y se ve una luz que va desde el agua hacia el cielo, una linea gruesa, morada, viva, hermosa... sembrar un cuarzo en lo profundo del mar, hasta lo mas profundo de los cielos


// el cielo y las estrellas
let crosses = []; // Array para almacenar las cruces
const numCrosses = 3000; // Número total de cruces
const colors = ['#9C1D00', '#FF5529', '#46389B', '#FFFFFF']; // Colores de las cruces

function setup() {
  createCanvas(1920, 1080);
  noStroke(); // Sin borde para las cruces
  // Inicializar las cruces con posiciones, tamaños, y colores aleatorios
  for (let i = 0; i < numCrosses; i++) {
    crosses.push({
      x: random(width), // Posición x aleatoria
      y: random(height), // Posición y aleatoria
      size: random(10, 20), // Tamaño aleatorio entre 10 y 20 píxeles
      opacity: random(50, 200), // Opacidad inicial
      opacityChange: random(0.5, 2), // Velocidad de cambio de opacidad
      colorIndex: floor(random(colors.length)) // Índice de color inicial
    });
  }
}

function draw() {
  background('#46389B'); // Fondo oscuro
  for (let i = 0; i < crosses.length; i++) {
    let cross = crosses[i];
    
    // Ajustar opacidad para simular parpadeo
    cross.opacity += cross.opacityChange;
    
    // Invertir dirección del cambio de opacidad si está fuera de los límites
    if (cross.opacity > 255 || cross.opacity < 50) {
      cross.opacityChange *= -1;
    }
    
    // Cambiar el color intermitente cada ciertos frames
    if (frameCount % 10 === 0) { // Cambia el color cada 10 frames
      cross.colorIndex = (cross.colorIndex + 1) % colors.length; // Oscilar el índice de color
    }
    
    // Asignar el color actual a la cruz
    let currentColor = colors[cross.colorIndex];
    fill(color(currentColor + hex(floor(cross.opacity), 2))); // Añadir transparencia al color

    // Dibujar la cruz
    drawCross(cross.x, cross.y, cross.size);
  }
}

function drawCross(x, y, size) {
  // Línea horizontal
  rect(x - size / 2, y - 1, size, 2);
  
  // Línea vertical
  rect(x - 1, y - size / 2, 2, size);
}

Llueve

a veces cuando cae agua, cuando las gotas son mias, cuando puedo volar bajo la lluvia y sentir mis brazos hacia el cielo... (Esta animacion iría originalmente en el videoclip pero se eliminó porque tenia muchos fallos, adjunto el codigo porque los fallos están depurados pero en su momento parecían imposibe de reparar y depurar)


// Llueve

const numThunderbolts = 480; // Cantidad de truenos
const thunderColor = '#7DD1F5'; // Color de los truenos
const bgColor = '#EAEEF0'; // Color de fondo

let thunderbolts = []; // Array para almacenar los truenos

function setup() {
  createCanvas(800, 600); // Tamaño del canvas
  for (let i = 0; i < numThunderbolts; i++) {
    thunderbolts.push(new Thunderbolt(random(width), random(height)));
  }
}

function draw() {
  background(bgColor);

  // Actualizar y dibujar cada trueno
  for (let bolt of thunderbolts) {
    bolt.update();
    bolt.display();
  }
}

class Thunderbolt {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.alpha = 0; // Transparencia inicial
    this.size = random(5, 20); // Tamaño del trueno
    this.shapeType = floor(random(3)); // Tipo de forma del trueno
    this.blinkState = 0; // Estado del parpadeo
    this.lastBlinkTime = 0; // Último tiempo de parpadeo
  }

  update() {
    // Movimiento aleatorio
    this.x += random(-1, 1);
    this.y += random(-1, 1);

    // Actualizar el estado de parpadeo
    const currentTime = millis();
    if (this.blinkState === 0) {
      if (currentTime - this.lastBlinkTime > 1000) { // Una vez por segundo
        this.alpha = this.alpha === 0 ? 150 : 0;
        this.lastBlinkTime = currentTime;
        this.blinkState = 1; // Cambiar al siguiente estado
      }
    } else if (this.blinkState === 1) {
      if (currentTime - this.lastBlinkTime > 500) { // Dos veces por segundo
        this.alpha = this.alpha === 0 ? 150 : 0;
        this.lastBlinkTime = currentTime;
        this.blinkState = 0; // Cambiar al primer estado
      }
    }
  }

  display() {
    // Dibujar el trueno
    push();
    translate(this.x, this.y);
    fill(thunderColor + hex(this.alpha, 2));
    stroke(thunderColor + hex(this.alpha, 2));
    strokeWeight(2);

    beginShape();
    if (this.shapeType === 0) {
      // Trueno tipo 1
      vertex(-this.size, 0);
      vertex(-this.size / 2, -this.size);
      vertex(0, -this.size / 2);
      vertex(this.size / 2, -this.size);
      vertex(this.size, 0);
      vertex(this.size / 2, this.size);
      vertex(0, this.size / 2);
      vertex(-this.size / 2, this.size);
    } else if (this.shapeType === 1) {
      // Trueno tipo 2
      vertex(0, -this.size);
      vertex(this.size / 3, -this.size / 3);
      vertex(this.size, 0);
      vertex(this.size / 3, this.size / 3);
      vertex(0, this.size);
      vertex(-this.size / 3, this.size / 3);
      vertex(-this.size, 0);
      vertex(-this.size / 3, -this.size / 3);
    } else if (this.shapeType === 2) {
      // Trueno tipo 3
      vertex(-this.size, -this.size / 2);
      vertex(0, -this.size);
      vertex(this.size, -this.size / 2);
      vertex(this.size / 2, 0);
      vertex(this.size, this.size / 2);
      vertex(0, this.size);
      vertex(-this.size, this.size / 2);
      vertex(-this.size / 2, 0);
    }
    endShape(CLOSE);
    pop();
  }
}

Crecemos...

crecemos porque oscilamos y vibramos, crecemos porque bebemos agua de la fuente de la sabiduria y la juventud se extiende de manera indefinida, crecemos porque aun sin madurar la experiencia extiende sus raices bajo nuestra superficie


// Crecemos

const numTriangles2 = 96;
const colors2 = ['#9C1D00', '#FF5529', '#46389B', '#FFFFFF'];
let triangles2 = [];

function setup() {
  createCanvas(1920, 1080);
  for (let i = 0; i < numTriangles2; i++) {
    triangles2.push(new BreathingTriangle(random(width), random(height)));
  }
}

function draw() {
  background('#5E50A0');

  for (let t of triangles2) {
    t.update();
    t.display();
  }
}

class BreathingTriangle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.baseSize = random(20, 50);
    this.size = this.baseSize;
    this.growth = random(0.1, 0.5);
    this.color = color(random(colors2)); // Convierte el color inicial a formato de color p5.js
    this.targetColor = color(random(colors2));
    this.colorTransitionSpeed = random(0.01, 0.03); // Velocidad de transición de color
    this.colorLerpAmount = 0; // Cantidad de interpolación de color
  }

  update() {
    // Actualizar el tamaño del triángulo
    this.size += this.growth;

    if (this.size > this.baseSize + 10 || this.size < this.baseSize - 10) {
      this.growth *= -1;
    }

    // Movimiento aleatorio del triángulo
    this.x += random(-1, 1);
    this.y += random(-1, 1);

    if (this.x < 0 || this.x > width) {
      this.x = constrain(this.x, 0, width);
    }
    if (this.y < 0 || this.y > height) {
      this.y = constrain(this.y, 0, height);
    }

    // Transición de color
    this.color = lerpColor(this.color, this.targetColor, this.colorTransitionSpeed);
    this.colorLerpAmount += this.colorTransitionSpeed;

    // Si la transición de color ha alcanzado su destino, elige un nuevo color objetivo
    if (this.colorLerpAmount >= 1) {
      this.targetColor = color(random(colors2));
      this.colorLerpAmount = 0;
    }
  }

  display() {
    push();
    translate(this.x, this.y);
    noFill();
    stroke(this.color);
    strokeWeight(2);
    beginShape();
    vertex(-this.size, -this.size);
    vertex(this.size, -this.size);
    vertex(0, this.size);
    endShape(CLOSE);
    pop();
  }
}

Giramos...

parece ser un ciclo, parece ser fortuna, parece que incrementa, parece ser que florece y abunda, es hermoso porque es intenso y no se detiene, es hermoso porque enloquece, es fantastico porque en esa fantasía giramos sin detenernos


// Giramos

const numTriangles3 = 96;
const colors3 = ['#9C1D00', '#FF5529', '#46389B', '#FFFFFF'];
let triangles3 = [];

function setup() {
  createCanvas(1920, 1080);
  for (let i = 0; i < numTriangles3; i++) {
    triangles3.push(new BouncingTriangle(random(width), random(height)));
  }
}

function draw() {
  background('#794897');

  for (let t of triangles3) {
    t.update();
    t.display();
  }
}

class BouncingTriangle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = random(48, 96);
    this.vx = random(-3, 3);
    this.vy = random(-3, 3);
    this.color = random(colors3);
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;

    if (this.x < 0 || this.x > width) {
      this.vx *= -1;
    }
    if (this.y < 0 || this.y > height) {
      this.vy *= -1;
    }
  }

  display() {
    push();
    translate(this.x, this.y);
    noFill();
    stroke(this.color);
    strokeWeight(12);
    beginShape();
    vertex(-this.size, -this.size);
    vertex(this.size, -this.size);
    vertex(0, this.size);
    endShape(CLOSE);
    pop();
  }
}

nos vamos...

en el centro del lago, en el centro del oceano, es en ese centro, hacia el cual nos dirigimos, de una u otra manera, ese centro nos espera, nos atrae, nos seduce, nos busca y aunque nos parezca muy temprano para llegar, de alguna forma nos encuentra y de alguna forma nosotros sabemos donde queda ese centro, hay un brujula interna que nos guía hacia ese final, solo ahí


// nos vamos

const numTriangles4 = 192;
const colors4 = ['#9C1D00', '#FF5529', '#46389B', '#FFFFFF'];
let triangles4 = [];

function setup() {
  createCanvas(1920, 1080);
  for (let i = 0; i < numTriangles4; i++) {
    triangles4.push(new ConvergingTriangle(random(width), random(height)));
  }
}

function draw() {
  background('#4A1767');

  for (let t of triangles4) {
    t.update();
    t.display();
  }
}

class ConvergingTriangle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = random(96, 192);
    this.angle = atan2(height / 2 - this.y, width / 2 - this.x);
    this.speed = random(0.6, 3);
    this.color = random(colors4);
  }

  update() {
    this.x += cos(this.angle) * this.speed;
    this.y += sin(this.angle) * this.speed;

    // Restablecer la posición si el triángulo alcanza el centro
    if (dist(this.x, this.y, width / 2, height / 2) < 10) {
      this.x = random(width);
      this.y = random(height);
      this.angle = atan2(height / 2 - this.y, width / 2 - this.x);
    }
  }

  display() {
    push();
    translate(this.x, this.y);
    noFill();
    stroke(this.color);
    strokeWeight(18);
    beginShape();
    vertex(-this.size, -this.size);
    vertex(this.size, -this.size);
    vertex(0, this.size);
    endShape(CLOSE);
    pop();
  }
}

Genesis

el lado izquierdo se ve en purpura estatico, dentro del lienzo utiliza el trackpad o el mouse para navegar hacia el centro del lienzo con la palabra genesis me refiero a la semilla cuando está en la tierra, la tierra es como los cielos, tiene nubes que son las semillas, y tiene truenos que son las raices de esos tallos, funciona igual que el cielo, es hermoso ver que llueven estrellas mas pequeñas


// Genesis

const numTriangles5 = 24;
const colors5 = ['#9C1D00', '#FF5529', '#46389B', '#FFFFFF'];
let triangles5 = [];

function setup() {
  createCanvas(1920, 1080);
  for (let i = 0; i < numTriangles5; i++) {
    triangles5.push(new GrowingTriangle(width / 3, height / 6));
  }
}

function draw() {
  background('#DFE4E3');

  for (let t of triangles5) {
    t.update();
    t.display();
  }
}

class GrowingTriangle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = random(24, 96);
    this.growthRate = random(0.3, 0.6);
    this.color = random(colors5);
  }

  update() {
    this.size += this.growthRate;

    // Reiniciar si el tamaño supera cierto límite
    if (this.size > 480) {
      this.size = random(12, 96);
      this.color = random(colors5);
    }
  }

  display() {
    push();
    translate(this.x, this.y);
    rotate(TWO_PI * (this.size / 192));
    noFill();
    stroke(this.color);
    strokeWeight(2);
    beginShape();
    vertex(-this.size, -this.size);
    vertex(this.size, -this.size);
    vertex(0, this.size);
    endShape(CLOSE);
    pop();
  }
}

Enlaces

el lado izquierdo se ve en purpura estatico, dentro del lienzo utiliza el trackpad o el mouse para navegar hacia el centro del lienzo En esta animacion quise retratar el mecanismo de la rueda de la fortuna, una carta del tarot egipcio, la rueda de la fortuna nos dice que la fortuna está rotando sobre su eje, incrementando tu fortuna, nunca se detiene, solo se incrementa y aunque algunos nos perdemos del camino, es fácil encontrarla, es facil de buscar, hay personas, me incluyo que al interior del desierto han vivido tormentas de arena de mas de 8 horas caminando sin poder ver el camino, pero aun y con esos inconvenientes, la fortuna sigue creciendo y en algun momento la encontraré y seremos una misma instancia de ese movimiento...


// Enlaces

const numTriangles7 = 70;
const colors7 = ['#9C1D00', '#FF5529', '#46389B', '#FFFFFF'];
let triangles7 = [];

function setup() {
  createCanvas(1920, 1080);
  for (let i = 0; i < numTriangles7; i++) {
    triangles7.push(new VortexTriangle(random(width), random(height)));
  }
}

function draw() {
  background('#794897');

  for (let t of triangles7) {
    t.update();
    t.display();
  }
}

class VortexTriangle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = random(24, 48);
    this.angle = random(TWO_PI);
    this.radius = random(192, 384);
    this.color = random(colors7);
  }

  update() {
    this.angle += 0.01;
    this.x = width / 2 + cos(this.angle) * this.radius;
    this.y = height / 2 + sin(this.angle) * this.radius;
  }

  display() {
    push();
    translate(this.x, this.y);
    rotate(this.angle);
    noFill();
    stroke(this.color);
    strokeWeight(24);
    beginShape();
    vertex(-this.size, -this.size);
    vertex(this.size, -this.size);
    vertex(0, this.size);
    endShape(CLOSE);
    pop();
  }
}

Destino

el lado izquierdo de esta animacion se ve gris, la animacion comienza desde el extremo derecho del lienzo. de ilusión vive el hombre... navegar remando un pequeño bote que me llevará desde el infinito hacia el infinito a través del oceano al interior de alguien que me espera en otro lugar, el bote tiene una llama de fuego en la punta frontal y mi mente, tranquila, lo mantiene encendido, la luna salió mas temprano hoy... deben ser las 5:00 pm pero, porque hay luna llena desde tan temprano? hoy la noche llegá un poco antes, todo ocurre un poco antes, parece una noche extensa


// destino

let x;
let y;
let move = false; // Controlador para iniciar el movimiento
let strokeColor;
let timeElapsed = 0;

function setup() {
  createCanvas(800, 600);
  x = width; // Inicia en el borde derecho del lienzo
  y = height / 2; // Inicia en el centro vertical del lienzo
  strokeWeight(18);
  frameRate(60); // Asegura que la animación sea suave
  background('#BDC1C2');
}

function draw() {
  if (!move) {
    // Dibuja el punto inicial
    strokeColor = color('#EAEEF0');
    stroke(strokeColor);
    point(x, y);
    
    // Inicia el movimiento después de 2 milisegundos
    if (millis() > 2) {
      move = true;
      timeElapsed = millis();
    }
  } else {
    // Cambia el color de la línea oscilante
    if ((frameCount % 60) < 30) {
      strokeColor = color('#EAEEF0');
    } else {
      strokeColor = color('#DFE4E3');
    }
    
    // Dibuja la línea en movimiento
    stroke(strokeColor);
    line(x, y, x - 1, y);
    x--; // Mueve el punto hacia la izquierda

    // Verifica si el tiempo de animación ha alcanzado 2 milisegundos
    if (millis() - timeElapsed >= 2) {
      move = false;
    }
  }
}

Volvemos

esta animacion comienza en el centro del lienzo. Siempre pienso en el sol y lo veo por capas, me gusta sentir cada capa, el calor absoluto, el fuego absurdo con tanto poder con tanto tiempo, con tanta vida, en astrologia el sol se asocia con la infancia, por eso me gustaba tanto teletubbies; con toda esa energía es sorprendente, me gusta mucho, quizá ese sea el centro que nos busca y nos atrae


// volvemos

let x;
let y;
let move = false; // Controlador para iniciar el movimiento
let strokeColor;
let timeElapsed = 0;

function setup() {
  createCanvas(1280, 800);
  x = 960; // Inicia en el borde derecho del lienzo
  y = height / 2; // Inicia en el centro vertical del lienzo
  strokeWeight(960);
  frameRate(60); // Asegura que la animación sea suave
  background('#BDC1C2');
}

function draw() {
  if (!move) {
    // Dibuja el punto inicial
    strokeColor = color('#EAEEF0');
    stroke(strokeColor);
    point(x, y);
    
    // Inicia el movimiento después de 2 milisegundos
    if (millis() > 2) {
      move = true;
      timeElapsed = millis();
    }
  } else {
    // Cambia el color de la línea oscilante
    if ((frameCount % 60) < 30) {
      strokeColor = color('#EAEEF0');
    } else {
      strokeColor = color('#DFE4E3');
    }
    
    // Dibuja la línea en movimiento
    stroke(strokeColor);
    line(x, y, x - 1, y);
    x++; // Mueve el punto hacia la izquierda

    // Verifica si el tiempo de animación ha alcanzado 2 milisegundos
    if (millis() - timeElapsed >= 2) {
      move = false;
    }
  }
}

arbol genealogico de un trueno

los truenos tambien fueron niños y pequeños ingenuos, y se perdían, crecieron estallaron y se evaporaron en una atmosfera paralela, en la cual las nubes no cargan agua sino energia, el vapor es corriente y la lluvia es imagen, paralelo a todo


// arbol genealogico de un trueno

function setup() {
  createCanvas(1280, 800);
  background("#EAEEF0");
  noStroke();
  frameRate(12);
}

function draw() {
  // Desvanecer gradualmente el fondo
  fill("#EAEEF0"); 
  rect(0, 0, width, height);

  // Dibujar 480 triángulos en posiciones aleatorias
  for (let i = 0; i < 366; i++) {
    let x1 = random(width);
    let y1 = random(height);
    let x2 = x1 + random(-96, 288);
    let y2 = y1 + random(-96, 288);
    let x3 = x1 + random(-96, 288);
    let y3 = y1 + random(-96, 288);
    
    fill("#2696CB");
    triangle(x1, y1, x2, y2, x3, y3);
  }
}

al interior del diamante

este loop es particularmente especial para mi, pues es parte de un sencillo de tres canciones que se llama "love potion that touches the tissues" en el cual el cristal se rompe en una explosion y ella queda completamente libre... es una imagen muy linda que me inspiró a observar mil posibles angulos diferentes de lo que a veces llamo encierro o libertad y formularmelo a mi mismo con geometria me libera muchisimo, se siente genial


// al interior del diamante 

let numParts = 8;
let colors = ['#EAEEF0', '#2696CB', '#7DD1F5'];
let points = [];
let t = 0;

function setup() {
  createCanvas(1280, 800);
  // Configuración inicial de puntos
  let A = createVector(200, 400);
  let B = createVector(1080, 400);
  let C = createVector(200, 100);
  
  // División de la semirrecta AC en 8 partes iguales
  for (let i = 0; i <= numParts; i++) {
    let pt = p5.Vector.lerp(A, C, i / numParts);
    points.push(pt);
  }
  
  frameRate(30);
}

function draw() {
  background(255);
  
  let A = createVector(200, 400);
  let B = createVector(1080, 400);
  
  // Dibujar el segmento AB
  stroke("#2696CB");
  strokeWeight(48);
  line(A.x, A.y, B.x, B.y);
  
  // Dibujar segmentos en la semirrecta AC
  for (let i = 0; i < numParts; i++) {
    let pt = points[i];
    let nextPt = points[i + 1];
    stroke(random(colors));
    line(pt.x, pt.y, nextPt.x, nextPt.y);
  }
  
  // Dibujar líneas paralelas
  for (let i = 0; i < numParts; i++) {
    let parallelPt = p5.Vector.lerp(A, B, i / numParts);
    let pt = points[i];
    stroke(random(colors));
    line(pt.x, pt.y, parallelPt.x, parallelPt.y);
  }
  
  // Animación con movimiento de los puntos en la semirrecta AC
  t += 0.01;
  for (let i = 1; i <= numParts; i++) {
    points[i].y = points[i].y + sin(t + i) * 36;
    points[i].x = points[i].x + cos(t + i) * 24;
  }
}

diamante al interior del oceano

todos estamos al interior de un oceano, todos vemos hacia afuera desde un mundo interno, desde un universo infinito, brillando con nuestras virtudes y cualidades, corrigiendo los defectos y eliminando el ego, liberando el alma y purificando la mente, en un cuerpo libre de culpas y libre de errores, libres elasticos al interior de un oceano


// diamante al interior del oceano

let numParts = 24;
let colors = ['#EAEEF0', '#BDC1C2', '#DFE4E3'];
let points = [];
let t = 0;

function setup() {
  createCanvas(1280, 800);
  // Configuración inicial de puntos
  let A = createVector(200, 400);
  let B = createVector(1080, 400);
  let C = createVector(200, 100);
  
  // División de la semirrecta AC en 8 partes iguales
  for (let i = 0; i <= numParts; i++) {
    let pt = p5.Vector.lerp(A, C, i / numParts);
    points.push(pt);
  }
  
  frameRate(30);
}

function draw() {
  background("#2696CB");
  
  let A = createVector(200, 400);
  let B = createVector(1080, 400);
  
  // Dibujar el segmento AB
  stroke("#2696CB");
  strokeWeight(24);
  line(A.x, A.y, B.x, B.y);
  
  // Dibujar segmentos en la semirrecta AC
  for (let i = 0; i < numParts; i++) {
    let pt = points[i];
    let nextPt = points[i + 1];
    stroke(random(colors));
    line(pt.x, pt.y, nextPt.x, nextPt.y);
  }
  
  // Dibujar líneas paralelas
  for (let i = 0; i < numParts; i++) {
    let parallelPt = p5.Vector.lerp(A, B, i / numParts);
    let pt = points[i];
    stroke(random(colors));
    line(pt.x, pt.y, parallelPt.x, parallelPt.y);
  }
  
  // Animación con movimiento de los puntos en la semirrecta AC
  t += 0.01;
  for (let i = 1; i <= numParts; i++) {
    points[i].y = points[i].y + sin(t + i) * 12;
    points[i].x = points[i].x + cos(t + i) * 12;
  }
}

de Sorox y otros Planetas

De los lugares que mas me ha gustado visitar uno que me marco fue un planeta llamado Sorox, es muy curioso porque es redondo como la tierra pero la superficie es agua por todas partes, agua y nubes, no me acerqué mucho porque no se como se la superficie y la verdad quería regresar a ver a valen y a laura, pero si es un planeta especial, tiene muchas nubes, en su momento pensé que ese es el destino del planeta tierra, pero después pense que quizá es un planeta que apenas se está formando, este loop esta diseñado retratando nubes superpuestas en diferentes dimensiones y en diferentes planos multidimensionales y quizá porque no, diferentes planos intergalacticos, la diferencia entre multi dimensional e intergalactico es la siguiente, multidimensional: mismo espacio distinta ubicacion; intergalactico: distinto sistema solar distinta ubicación. Asi pues no sabemos si en otra galaxia existe un planeta cuya ubicación es junto a la luna de nuestro planeta, pero podemos averiguarlo superponiendo capas y leyendo sus resultados si es ruido no hay vida y si es silencio podría ser agua, lo cual implica vida... son nubes de todas partes girando como parte de un mismo origen, el cosmos creador de cada planeta y luna, de cada estrella y cada destino


// de sorox y otros planetas

let numParts = 48;
let colors = ['#EAEEF0', '#2696CB', '#7DD1F5'];
let points = [];
let t = 0;
let spiralFactor = 1;

function setup() {
  createCanvas(1280, 800);
  // Configuración inicial de puntos
  let A = createVector(200, 400);
  let C = createVector(200, 100);
  
  // División inicial de la semirrecta AC en 8 partes iguales
  for (let i = 0; i <= numParts; i++) {
    let pt = p5.Vector.lerp(A, C, i / numParts);
    points.push(pt);
  }
  
  frameRate(30);
}

function draw() {
  background("#EAEEF0");
  
  let A = createVector(240, 480);
  let B = createVector(1080, 400);
  
  // Dibujar el segmento AB
  stroke("#2696CB");
  strokeWeight(192);
  line(A.x, A.y, B.x, B.y);
  
  // Animación de los puntos en AC con espirales
  for (let i = 1; i <= numParts; i++) {
    let angle = t + i * (TWO_PI / numParts);
    let r = spiralFactor * i * 5;
    
    points[i].x = A.x + r * cos(angle);
    points[i].y = A.y + r * sin(angle);
    
    stroke(random(colors));
    line(points[i].x, points[i].y, points[i - 1].x, points[i - 1].y);
  }
  
  // Dibujar líneas paralelas dinámicas desde los puntos en AC a AB
  for (let i = 1; i <= numParts; i++) {
    let parallelPt = p5.Vector.lerp(A, B, i / numParts);
    stroke(random(colors));
    line(points[i].x, points[i].y, parallelPt.x, parallelPt.y);
  }
  
  // Actualización de variables para la animación
  t += 0.02;
  spiralFactor = 1 + 0.12 * sin(t * 2);
}