//[https://editor.p5js.org/pyeseul/sketches/S1em_16T]

// He añadido parametros de color y sliders para controlar movimientos sinusoidal y cambios de color.

​

//This Lissajous curve example is a test to recreate a part of John Whitney work titled "Permutation" from 1966. 

​

//School for Poetic Computation

//Recreaing the Past.

​

//Este código crea una animación en la que varias elipses se dibujan en la pantalla en posiciones calculadas mediante funciones senoides, con colores y tamaños controlados por deslizadores interactivos.

​

var t = 0;

// Inicializa la variable t en 0. Esta variable se utilizará para controlar el tiempo y generar animaciones.

​

var slidercolor;

// Declara una variable para el control deslizante que ajustará el color.

​

var angle = 90;

// Declara una variable para el ángulo y la inicializa en 90 grados.

​

function setup() {

  createCanvas(580, 580);

  // Crea un lienzo de 580x580 píxeles.

​

  colorMode(HSB, 255);

  // Establece el modo de color a HSB (Hue, Saturation, Brightness) con un rango de 0 a 255.

​

  slidercolor = createSlider(0, 255, 1);

  // Crea un control deslizante (slider) con un rango de 0 a 255 y un valor inicial de 1.

​

  fill(slidercolor.value());

  // Establece el color de relleno usando el valor actual del control deslizante.

​

  aSlider = createSlider(0, 255, 127);

  // Crea un control deslizante para la variable 'a' con un rango de 0 a 255 y un valor inicial de 127.

​

  bSlider = createSlider(0, 255, 127);

  // Crea un control deslizante para la variable 'b' con un rango de 0 a 255 y un valor inicial de 127.

​

  cSlider = createSlider(0, 255, 127);

  // Crea un control deslizante para la variable 'c' con un rango de 0 a 255 y un valor inicial de 127.

}

​

function draw() {

  background(0, 09, 0, 10);

  // Establece el color de fondo con una ligera transparencia para crear un efecto de arrastre (trailing effect).

​

​

  var x = map(sin(angle), -1, 1, 0, 255);

  // Mapea el valor del seno del ángulo de -1 a 1 a un rango de 0 a 255 para la variable 'x'.

​

  slidercolor.value();

  // Actualiza el valor del control deslizante (aunque este código no afecta nada).

​

  colorMode(HSB, 255);

  // Establece nuevamente el modo de color a HSB con un rango de 0 a 255.

​

  fill(slidercolor.value(), 255, 255, 255);

  // Establece el color de relleno usando el valor del control deslizante y el máximo valor de saturación y brillo.

​

  var a = aSlider.value();

  var b = bSlider.value();

  var c = cSlider.value();

  // Obtiene los valores actuales de los controles deslizantes 'a', 'b' y 'c'.

​

  for (i = 0; i < 10; i++) {

    x = slidercolor.value() * sin(a * t + PI / 2);

    y = slidercolor.value() * sin(b * t);

    x2 = slidercolor.value() * sin(a * t + PI / 2);

    y2 = slidercolor.value() * sin(b * t);

    x3 = slidercolor.value() * sin(a * t + PI / 2);

    y3 = slidercolor.value() * sin(b * t);

    x4 = slidercolor.value() * sin(a * t + PI / 2);

    y4 = slidercolor.value() * sin(b * t);

    // Calcula las coordenadas x y y usando funciones senoides y los valores de los controles deslizantes.

​

    ellipse(width / 2 + x, height / 2 + y, 8, 8);

    // Dibuja una elipse en la pantalla en la posición calculada con un diámetro de 8 píxeles.

​

    ellipse(width / 2 + y, height / 2 + x, 7, 7);

    // Dibuja otra elipse con las coordenadas invertidas y un diámetro de 7 píxeles.

​

    ellipse(width / 2 + y2 / 1.3, height / 2 + x2 / 1.3, 6, 7);

    // Dibuja una elipse con las coordenadas ajustadas y un tamaño diferente.

​

    t += 9;

    // Incrementa t para animar las elipses en la siguiente iteración.

  }

​

  // Dibuja elipses adicionales con diferentes colores y posiciones.

  fill(247, 127, 250);

  ellipse(width / 2 + x3 / 1.5, height / 2 + y3 / 1.5, 7, 7);

  fill(247, 127, 250);

  ellipse(width / 2 + y3 / 1.5, height / 2 + x3 / 1.5, 7, 7);

  fill(247, 127, 250);

  ellipse(width / 2 + x3 / 1.5, height / 2 + y3 / 1.5, 6, 6);

​

  fill(120, 247, 250);

  ellipse(width / 2 + y3 / 1.5, height / 2 + x3 / 1.5, 6, 6);

  fill(120, 247, 250);

  ellipse(width / 2 + x3 / 1.5, height / 2 + y3 / 1.5, 6, 6);

​

  fill(247, 127, 250);

  ellipse(width / 2 + x4 / 2, height / 2 + y4 / 2, 6, 6);

  fill(247, 147, 250);

  ellipse(width / 2 + y4 / 2, height / 2 + x4 / 2, 6, 6);

​

  fill(210, 210, 250);

  ellipse(width / 2 + x4 / 3, height / 2 + y4 / 3, 6, 6);

  fill(210, 210, 250);

  ellipse(width / 2 + y4 / 3, height / 2 + x4 / 3, 6, 6);

​

  fill(147, 227, 250);

  ellipse(width / 2 + x4 / 2, height / 2 + y4 / 2, 6, 6);

  fill(147, 227, 250);

  ellipse(width / 2 + y4 / 2, height / 2 + x4 / 2, 6, 6);

  fill(147, 227, 250);

  ellipse(width / 2 + x4 / 2, height / 2 + y4 / 2, 7, 7);

​

  fill(247, 255, 150);

  ellipse(width / 2 + x4 / 4, height / 2 + y4 / 4, 6, 6);

  fill(247, 255, 150);

  ellipse(width / 2 + y4 / 4, height / 2 + x4 / 4, 6, 6);

}

​

​