// Coding Challenge #116: Lissajous Curve Table: https://www.youtube.com/watch?v=--6eyLO78CY&ab_channel=TheCodingTrain

// ChatGPT for debugging and questions

var seed = Math.random() * 1000;

var a = 2,

  b = 3;

var th = 0,

  seg = 0.01;

var r;

var mySize;

let colors1 = "ACEBD4-ACDEEB-21D8EA-3CC1FF-6DE4AA"

  .split("-")

  .map((a) => "#" + a);

let colors2 = "CEA7EB-3890FF-C330C6-D5FF52-A6DBF7"

  .split("-")

  .map((a) => "#" + a + "00");

let colorbg = "AEF6D2".split("-").map((a) => "#" + a);

let colorbg2 = "C1CCEA".split("-").map((a) => "#" + a);

let numOrganisms = 25;

let organisms = [];

let overAllTexture;

​

function setup() {

  mySize = min(windowWidth, windowHeight);

  createCanvas(windowWidth, windowHeight);

  colorMode(HSB, 360, 100, 100, 100);

  r = mySize / 2;

  background(colorbg);

​

  //

  let filter = new makeFilter();

​

  // Create organisms

  for (let i = 0; i < numOrganisms; i++) {

    let organism = createOrganism();

    organisms.push(organism);

  }

}

​

function draw() {

  randomSeed(seed);

  noFill();

  strokeCap(SQUARE);

​

  // semi transparent bg

  fill(colorbg[0] + "15");

  noStroke();

  rect(0, 0, width, height);

​

  push();

  translate(width / 2, height / 2);

​

  // draw Lissajous curves

  for (let i = 0; i < 10; i += random(0.5)) {

    a = random(1.5, 2.5);

    b = random(2, 3);

    strokeWeight(random(2, 5));

    rotate(random(0.01));

    stroke(random(colors1) + "30"); // Reduce opacity

    ellipse(

      random(-i * 10, i * 10) + r * cos(a * th) * 0.2,

      random(-i * 10, i * 10) + r * sin(b * th) * 0.2,

      r * cos(a * (th + seg)) * 0.4,

      r * sin(b * (th + seg)) * 0.4

    );

  }

​

  // draw organisms

  for (let i = 0; i < organisms.length; i++) {

    updateOrganism(organisms[i]);

    displayOrganism(organisms[i]);

  }

​

  pop();

  th += seg;

​

  // texture!

  image(overAllTexture, 0, 0);

}

​

function createOrganism() {

  let type = floor(random(4)); // 4 types of organism

  let size = random(25, 60);

​

  return {

    x: random(-width / 2, width / 2),

    y: random(-height / 2, height / 2),

    size: size,

    type: type,

    color: random(colors1),

    secondColor: random(colors2),

    speedX: random(-0.3, 0.3),

    speedY: random(-0.3, 0.3),

    wiggleOffset: random(10),

    rotation: random(TWO_PI),

    segments: floor(random(8, 6)),

    flagella: floor(random(2, 4)),

    pulseRate: 0.03,

  };

}

​

function updateOrganism(org) {

  // movements

  let commonWiggle = sin(frameCount * 0.02) * 0.3;

​

  // 更新位置，减少个体差异

  org.x += org.speedX + sin(frameCount * 0.03 + org.wiggleOffset) * 1.5;

  org.y += org.speedY + cos(frameCount * 0.02) * 1.2;

​

  org.rotation += 0.005;

​

  // boundary check

  let maxX = width / 2;

  let maxY = height / 2;

  if (org.x < -maxX || org.x > maxX) {

    org.speedX *= -1;

    org.x = constrain(org.x, -maxX, maxX);

  }

  if (org.y < -maxY || org.y > maxY) {

    org.speedY *= -1;

    org.y = constrain(org.y, -maxY, maxY);

  }

​

  // add some randomness...

  if (random(100) < 0.5) {

    org.speedX = random(-0.3, 0.3);

    org.speedY = random(-0.3, 0.3);

  }

}

​

function displayOrganism(org) {

  push();

  translate(org.x, org.y);

  rotate(org.rotation);

​

  //

  let pulseSize = org.size * (1 + sin(frameCount * 0.03) * 0.1);

​

  // ORGANISMS

  switch (org.type) {

    case 0: // 1

      // 主体

      noStroke();

      fill(org.color);

      ellipse(0, 0, pulseSize, pulseSize * 0.8);

​

      // add flagella

      for (let i = 0; i < org.flagella; i++) {

        let angle = (TWO_PI / org.flagella) * i;

        stroke(org.color + "80");

        strokeWeight(1);

        let flagellaLength = org.size * random(0.8, 1.2);

        let wiggle = sin(frameCount * 0.2 + i) * 3;

        bezier(

          0,

          0,

          (flagellaLength / 3) * cos(angle),

          (flagellaLength / 3) * sin(angle) + wiggle,

          (flagellaLength / 2) * cos(angle),

          (flagellaLength / 2) * sin(angle) - wiggle,

          flagellaLength * cos(angle),

          flagellaLength * sin(angle)

        );

      }

      break;

​

    case 1: // 2

      // 2's body

      noStroke();

      fill(org.color);

      for (let i = 0; i < org.segments; i++) {

        let segOffset =

          (i - org.segments / 2) * ((pulseSize / org.segments) * 0.8);

        let segSize = pulseSize - (pulseSize / org.segments) * i * 0.3;

        ellipse(

          segOffset,

          sin(frameCount * 0.1 + i * 0.5) * (i * 0.5),

          segSize,

          segSize * 0.7

        );

      }

      break;

​

    case 2: // 3,more like a jelly fish

      // jelly fish head

      noStroke();

      fill(org.color);

      ellipse(0, 0, pulseSize, pulseSize * 0.7);

​

      // jelly fish tentacle

      for (let i = 0; i < 8; i++) {

        let angle = (PI * i) / 4 + PI / 2;

        stroke(org.secondColor.slice(0, -2) + "60");

        strokeWeight(1.5);

        noFill();

        let tentLength = org.size * (0.8 + sin(frameCount * 0.05 + i) * 0.2);

        beginShape();

        for (let j = 0; j < 8; j++) {

          let y = (j * tentLength) / 8;

          let x = sin(frameCount * 0.1 + j + i) * (j * 0.8);

          curveVertex(x, y);

        }

        endShape();

      }

      break;

​

    case 3: // 4

      noStroke();

      fill(org.color);

      beginShape();

      for (let a = 0; a < TWO_PI; a += 0.2) {

        let noiseFactor = noise(

          cos(a) + 1,

          sin(a) + 1,

          frameCount * 0.01 + org.wiggleOffset

        );

        let r = (pulseSize / 2) * (0.7 + noiseFactor * 0.6);

        let x = cos(a) * r;

        let y = sin(a) * r;

        curveVertex(x, y);

      }

      endShape(CLOSE);

​

      fill(org.secondColor.slice(0, -2) + "50");

      ellipse(0, 0, pulseSize * 0.4, pulseSize * 0.3);

      break;

  }

​

  pop();

}

​

function makeFilter() {

  randomSeed(seed);

  // Grain noise texture

  colorMode(HSB, 360, 100, 100, 100);

  drawingContext.shadowColor = color(0, 0, 5, 10);

  overAllTexture = createGraphics(windowWidth, windowHeight);

  overAllTexture.loadPixels();

  for (var i = 0; i < width; i++) {

    for (var j = 0; j < height; j++) {

      overAllTexture.set(

        i,

        j,

        color(230, 230, 230, noise(i / 5, j / 3, (i * j) / 100) * random(1, 5))

      );

    }

  }

  overAllTexture.updatePixels();

}

​

function windowResized() {

  mySize = min(windowWidth, windowHeight);

  resizeCanvas(windowWidth, windowHeight);

  r = mySize / 2;

  makeFilter();

}

​