html,
body {
  height: 100%;
  background: black;
}

body {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

//play with the three static circle toggles at the bottom. Some setting will make things look like they move when the don't.
//medium post is here: https://sophiawood.medium.com/toggled-existence-3b6107ee0ec0
//codepen challenge - another stream of conscious coding session

let aCenterOfBeing; //we are but canvases with centers and symmetry
let strandsOfThought = []; //that hold strands - threads of thought
let memories = []; //separate from memory
let timeOfMemory = 0; //memories have a shelf life
let timeOfThought = 0; //thoughts are but moments of mind
let timeOfCurrent = 0; //currents flow around us - carry us - true time
let gourami = 100; //understand fish as we understand our capacity for memories - a sea unknown
let motionOfMemory = true;
let motionOfThought = true;
let motionOfUniverse = true;
function setup() {
  createCanvas(720, 720); //a canvas to be forgotten
  aCenterOfBeing = width / 2;
  originOfThought(); //we all begin
  originOfMemory(); //and sometimes remember
}
function draw() {
  translate(width / 2, height / 2); //with a position relative
  background(20); //light is relative
  flowOfTime(); //the current of time is relative
  theExistenceOfThought(); //thought is relative
  theExistenceOfMemory(); //memory is relative
  togglesOfTime(); //until it's not
}

function togglesOfTime() {
  if (motionOfThought) {
    fill(100, 100, 100, 150);
    timeOfThought = 20 * PI * sin(frameCount / 1000);
  } else {
    fill(30, 30, 30, 150);
    frameCount--;
  }

  circle(-30, height / 2 - 20, 30);

  if (motionOfUniverse) {
    fill(150, 100, 150, 150);
    timeOfCurrent += 0.01;
  } else {
    fill(60, 30, 60, 150);
  }

  circle(0, height / 2 - 20, 30);

  if (motionOfMemory) {
    fill(100, 90, 150, 150);
    timeOfMemory += 0.01;
  } else {
    fill(20, 20, 60, 150);
  }

  circle(30, height / 2 - 20, 30);
}
function theExistenceOfMemory() {
  for (let i = 0; i < memories.length; i++) {
    for (let j = 0; j <= int(memories[i].z + 1); j++) {
      stroke(
        100 + 50 * sin(memories[i].x / 100 + j / 100),
        100 + 50 * sin(memories[i].y / 100 + j / 100),
        100 + (100 * sin(memories[i].z + j / 100)) / 100,
        40
      );
      deltaB = circle(
        memories[i].x + 20 * sin((timeOfMemory * memories[i].z) / 20),
        memories[i].y +
          height * sin((timeOfMemory * memories[i].z) / 200 + memories[i].z),
        memories[i].z - j
      );
    }
  }
}
function originOfMemory() {
  for (let i = 0; i < gourami; i++) {
    memories[i] = createVector(
      random(-aCenterOfBeing, aCenterOfBeing),
      random(-height / 2, height / 2),
      random(4, 20)
    );
  }
}
function theExistenceOfThought() {
  noFill();

  for (let i = 0; i < strandsOfThought.length; i++) {
    beginShape();
    for (let j = 0; j < strandsOfThought[i].length; j++) {
      stroke(
        0 + 100 * abs(sin((timeOfThought + i) / 50 + j - i)),
        20 + 80 * abs(sin(timeOfThought / 50 + j - i)),
        40 + 120 * abs(sin((timeOfThought + j + i) / 50 + j - i)),
        200
      );
      strokeWeight(5 * abs(sin(i * 2 + j * 2 - timeOfThought / 100)));
      vertex(
        strandsOfThought[i][j].x +
          ((height / 2 - j) / 5) *
            sin(
              j / 200 +
                timeOfThought / 10 +
                j / 50 +
                (sqrt(i + j) * timeOfThought) / 50 +
                (i * j) / 1000
            ),
        strandsOfThought[i][j].y
      );
    }
    endShape();
  }
}
function originOfThought() {
  for (let i = 0; i <= aCenterOfBeing / 4; i += 2) {
    strandsOfThought[i / 2] = [];
    delta = random(-2, 2);
    for (let j = 0; j <= height; j += 2) {
      delta = delta + 1 * sin(j / 1000 + i);
      x = -aCenterOfBeing / 2 + i * 4 + delta;
      y = -height / 2 + j;
      strandsOfThought[i / 2][j / 2] = createVector(x, y);
    }
  }
}
function flowOfTime() {
  push();
  strokeWeight(4);
  for (let i = -height / 2; i <= height; i += 1) {
    stroke(215 - i, 215 - i / 1.5, 220 - i / 4, 60);
    line(
      -aCenterOfBeing / 2 +
        (aCenterOfBeing / 4) * sin(timeOfCurrent / 3 + i / 50),
      -height / 2 + 1.2 * i,
      aCenterOfBeing / 2 +
        (aCenterOfBeing / 4) * sin(timeOfCurrent / 7 + i / 50),
      -height / 2 + i
    );
  }
  for (let i = -height / 2; i <= height; i += 1) {
    stroke(255 - i / 4, 205 - i / 1.5, 200 - i / 4, 30);
    line(
      -aCenterOfBeing / 2 +
        (aCenterOfBeing / 4) * sin(timeOfCurrent / 5 - i / 70),
      height / 2 - 1.2 * i,
      aCenterOfBeing / 2 +
        (aCenterOfBeing / 4) * sin(timeOfCurrent / 6 - i / 70),
      height / 2 - i
    );
  }
  pop();
}
function mousePressed() {
  if (dist(mouseX, mouseY, width / 2 - 30, height - 20) < 15) {
    motionOfThought = !motionOfThought;
  }
  if (dist(mouseX, mouseY, width / 2, height - 20) < 15) {
    motionOfUniverse = !motionOfUniverse;
  }
  if (dist(mouseX, mouseY, width / 2 + 30, height - 20) < 15) {
    motionOfMemory = !motionOfMemory;
  }
}