// 1: estimated fundamental pitch: generally 0-127

// 2: peak amplitude and analysis: generally 0-99

// 3: chromatic note: 0-11

// 4: deviation in sense: 0-100 where 50 is the median (0-50 is flat, 50-100 is sharp)

// 5: if an onset is detected: 0 and 1

​

let vals = [100, 58, 7, 72, 1, 1, 1, 1, 127];

let new_vals = [];

let state = 0;

​

let sum = 126/2

​

let rand1 = 1;

let rand2 = 1;

let rand3 = 1;

​

let opac = 20;

​

// vars for state 0 (memory)

var whiteAlpha = 255;

​

var sampleFact = 0.25;

​

var fontSize = 100;

let letters = [];

let letters2 = [];

​

let realPosX = [];

let realPosY = [];

​

let realMovX = [];

let realMovY = [];

​

let memoryPosX = [];

let memoryPosY = [];

​

let memoryMovX = [];

let memoryMovY = [];

​

let startTime;

​

let timeToExplode = 7000;

​

let exploded = false;

​

// vars for state 1 (circles)

let filler;

let xSpeed = 5;

let ySpeed = 0.5;

let numObjs = 50;

​

// vars for state 2 (topography)

const cell_n = 4;

const line_n = 1000;

const step = 0.01;

const amplitude = 4.0;

​

let cells = [];

let points = [];

let cell_size;

​

// vars for state 3 (watercolor)

var brushes;

​

// vars for state 4 (magic circle)

let ude = [];

​

let sliders = []

​

function preload() {

  font = loadFont("font.otf");

​

  options = {

    sampleFactor: sampleFact,

    simplifyThreshold: 0,

  };

}

​

function setup() {

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

    sliders[j] = createSlider(0, 127, 60);

    sliders[j].position(10, 10+j*20);

    sliders[j].style('width', '200px'); 

    vals[j] = sliders[j].value()

  }

  createCanvas(windowWidth, windowHeight);

  background(0);

  filler = createGraphics(width, height);

  filler.background(0, 20);

  filler.noStroke();

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

    let x = random(width);

    let y = random(height);

    let s = noise(x * 0.01, y * 0.01) * 2;

    filler.fill(0, 0, 0, 50);

    filler.rect(x, y, s, s);

  }

​

  ipx = 0;

  ipy = 0;

​

  pts = font.textToPoints("memory", ipx, ipy, fontSize, options);

​

  pts2 = font.textToPoints("real", ipx, ipy, fontSize, options);

​

  background("black");

​

  textSize(fontSize / 2);

  let myText = "though it may feel";

  let currentX = 60;

  let currentY = (9 / 32) * height;

​

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

    randX = random(-0.25, 0.5);

    while (randX == 0) {

      randX = random(-0.25, 0.5);

    }

​

    randY = random(-0.5, 0.5);

    while (randY == 0) {

      randY = random(-0.5, 0.5);

    }

​

    let letterObj = {

      letter: myText.charAt(i),

      yPos: currentY,

      xPos: currentX,

      xDir: randX,

      yDir: randY,

    };

    letters.push(letterObj);

    currentX += textWidth(myText.charAt(i));

  }

​

  myText = "this is all just a";

  currentX = 60;

  currentY = (15 / 32) * height;

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

    randX = random(-0.25, 0.5);

    while (randX == 0) {

      randX = random(-0.25, 0.5);

    }

​

    randY = random(-0.5, 0.5);

    while (randY == 0) {

      randY = random(-0.5, 0.5);

    }

​

    randX = randX;

    randY = randY;

​

    let letterObj = {

      letter: myText.charAt(i),

      yPos: currentY,

      xPos: currentX,

      xDir: randX,

      yDir: randY,

    };

    letters2.push(letterObj);

    currentX += textWidth(myText.charAt(i));

  }

​

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

    randX = random(-0.1, 0.25);

    while (randX == 0) {

      randX = random(-0.1, 0.25);

    }

​

    randY = random(-0.25, 0.25);

    while (randY == 0) {

      randY = random(-0.25, 0.25);

    }

​

    realMovX[i] = randX;

    realPosX[i] = randX;

    realMovY[i] = randY;

    realPosY[i] = randY;

  }

​

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

    randX = random(-0.25, 0.5);

    while (randX == 0) {

      randX = random(-0.25, 0.5);

    }

​

    randY = random(-0.5, 0.5);

    while (randY == 0) {

      randY = random(-0.5, 0.5);

    }

​

    memoryMovX[i] = randX;

    memoryPosX[i] = randX;

    memoryMovY[i] = randY;

    memoryPosY[i] = randY;

  }

​

  for (let i = 0; i < (cell_n * width) / height; i++) {

    let cells_x = [];

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

      cells_x.push({ x: random(width), y: random(height) });

    }

    cells.push(cells_x);

  }

​

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

    points.push({ x: random(width), y: random(height) });

  }

​

  brushes = [];

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

    brushes[i] = new Brush(random(0, 255), random(0, 255), random(0, 255));

  }

​

  angleMode(DEGREES);

  let radius = height / 3; //半径

  for (let i = 0; i < 360; i += 1) {

    let ex = radius * sin(i);

    let ey = radius - 0.2 * radius * cos(i);

​

    ude[i] = new Ude(ex, ey);

  }

​

  angleMode(RADIANS);

​

  colval = [1, 1, 1, 1]

  startTime = millis();

}

function draw() {

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

    vals[j] = sliders[j].value()

    if (j == 1) vals[j] = map(vals[j], 0, 127, 0, 30)

    if (j == 2) vals[j] = map(vals[j], 0, 127, 0, 11)

    if (j == 3) vals[j] = map(vals[j], 0, 127, 0, 100)

    if (j == 4) vals[j] = map(vals[j], 0, 127, 0, 1)

  }

  temp = vals[4]

  vals[4] = vals[3]

  vals[3] = temp

  if (vals[4] == 127) vals[4] = 1

​

  new_vals[0] = map(vals[0], 0, 127, 50, 250);

  new_vals[1] = map(vals[1], 0, 30, 50, 250);

  new_vals[2] = map(vals[2], 0, 11, 50, 250);

  new_vals[3] = map(vals[3], 0, 100, 50, 250);

  new_vals[4] = vals[4]; // either 0 or 1

  adjuster1 = map(vals[6], 0, 127, 0.5, 1.5)

  colval[0] = new_vals[0] * adjuster1

  colval[1] = new_vals[1] * adjuster1

  colval[3] = new_vals[3] * adjuster1

  // print(vals[3])

  // print(new_vals[0] + ", " + new_vals[1] + ", " + new_vals[3])

​

  let colorCombos = [

    color(colval[0], colval[1], colval[3]),

    color(colval[0], colval[3], colval[1]),

    color(colval[1], colval[0], colval[3]),

    color(colval[1], colval[3], colval[0]),

    color(colval[3], colval[1], colval[0]),

    color(colval[3], colval[0], colval[1]),

  ];

​

  if (state == 0) {

    new_exp_spd = map(vals[2], 0, 11, 0.5, 4) //* map(vals[5], 0, 127, 0.75, 2);

    alpha_spd = map(vals[0], 0, 127, 0.5, 3);

    wiggle_spd = map(vals[3], 0, 100, 0.5, 2);

​

    if (millis() > startTime + timeToExplode) {

      exploded = true;

    }

​

    // print(vals[6])

    // background(vals[6], 1, 127, 0, 255);

    background(0)

    fill("white");

    textSize(fontSize / 2);

​

    if (!exploded) {

      noStroke();

      push();

      translate(60, (height * 9) / 32);

      text("though it may feel", 0, 0);

      pop();

​

      push();

      translate(60, (height * 15) / 32);

      text("this is all just a", 0, 0);

      pop();

    } else {

      noStroke();

      fill(255, 255, 255, whiteAlpha);

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

        text(letters[i].letter, letters[i].xPos, letters[i].yPos);

        letters[i].xPos += letters[i].xDir * new_exp_spd;

        letters[i].yPos += letters[i].yDir * new_exp_spd;

      }

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

        text(letters2[i].letter, letters2[i].xPos, letters2[i].yPos);

        letters2[i].xPos += letters2[i].xDir * new_exp_spd;

        letters2[i].yPos += letters2[i].yDir * new_exp_spd;

      }

​

      whiteAlpha -= 2 * alpha_spd;

    }

​

    push();

    translate(60, (height * 3) / 8);

    stroke(255);

    strokeWeight(2);

    if (!exploded) {

      // modified from textToPoints tutorial from p5

      beginShape(POINTS);

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

        vertex(

          pts2[i].x + sin(frameCount * 0.05 + pts2[i].y * 0.1) * 5 * wiggle_spd,

          pts2[i].y

        );

      }

      endShape();

    } else {

      // modified from textToPoints tutorial from p5

      beginShape(POINTS);

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

        vertex(

          realPosX[i] +

            pts2[i].x +

            sin(frameCount * 0.05 + pts2[i].y * 0.1) * 5 * wiggle_spd,

          realPosY[i] + pts2[i].y

        );

      }

      endShape();

​

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

        realPosX[i] += realMovX[i] * new_exp_spd;

        realPosY[i] += realMovY[i] * new_exp_spd;

      }

    }

​

    if (!exploded) {

      pop();

​

      stroke(255);

      strokeWeight(2);

      noFill();

​

      push();

      translate(60, (height * 35) / 64);

​

      // modified from textToPoints tutorial from p5

      beginShape(POINTS);

      // stroke(0);

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

        vertex(

          pts[i].x + sin(frameCount * 0.05 + pts[i].y * 0.1) * 5 * wiggle_spd,

          pts[i].y

        );

      }

      endShape();

​

      // modified from textToPoints tutorial from p5

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

        line(

          pts[i].x + sin(frameCount * 0.05 + pts[i].y * 0.1) * 5 * wiggle_spd,

          pts[i].y,

          pts[i].x + random(-5, 5),

          pts[i].y + random(-5, 5)

        );

      }

​

      pop();

    } else {

      pop();

​

      stroke(255);

      strokeWeight(2);

      noFill();

​

      push();

      translate(60, (height * 35) / 64);

​

      beginShape(POINTS);

      // stroke(0);

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

        vertex(

          memoryPosX[i] +

            pts[i].x +

            sin(frameCount * 0.05 + pts[i].y * 0.1) * 5 * wiggle_spd,

          memoryPosY[i] + pts[i].y

        );

      }

      endShape();

​

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

        line(

          memoryPosX[i] + pts[i].x + sin(frameCount * 0.05),

          memoryPosY[i] + pts[i].y,

          memoryPosX[i] + pts[i].x + random(-5, 5),

          memoryPosY[i] + pts[i].y + random(-5, 5)

        );

      }

​

      pop();

​

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

        memoryPosX[i] += memoryMovX[i] * new_exp_spd;

        memoryPosY[i] += memoryMovY[i] * new_exp_spd;

      }

    }

  }

​

  // if (frameCount % 30) {

  //   let sum = 0;

  //   for (let i = 5; i < vals.length; i++) {

  //     sum += vals[i];

  //   }

  // }

  // modified from https://openprocessing.org/sketch/875086

  if (state == 1) {

    image(filler, 0, 0);

    randomSeed(0);

​

    // sizeChange = map(vals[5], 0, 127, 0.5, 2)

    sizeChange = vals[5]/127 * 1.5 + 0.5

    noStroke();

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

      ordering = int(random(0, 6));

      myCol = colorCombos[ordering]

      myCol._array[3] = map(vals[8], 0, 127, 0.15, 1)

      fill(myCol)

​

      // if (vals[4] == 0) {

      //   if (random(1) < 0.33) {

      //     fill("white");

      //   }

      // }

​

      spd_mult = map(vals[7], 0, 127, 0.2, 3)

​

      let s =

        random(20, 40) *

        (random(1, 2) + (sin(frameCount / 100 + random(100)) + 1) * 0.5);

      let x =

        ((random(width) + frameCount * random(1, spd_mult * xSpeed)) %

          (width + s)) -

        s;

      let y =

        ((random(height) +

          sin(frameCount / 100) * height * random(0.2, spd_mult * ySpeed) +

          height) %

          (height + s)) -

        s;

      ellipse(x, y, s*sizeChange, s*sizeChange);

    }

  }

​

  // modified from https://openprocessing.org/sketch/1471542

  if (state == 2) {

    frameRate(20);

    adjuster = map(vals[6], 0, 127, 0.5, 1.5)

    spd_mult = map(vals[7], 0, 127, 0.2, 3)

    thickness = map(vals[5], 0, 127, 0.5, 2)

​

    cell_size = height / cell_n;

​

    // if (frameCount % 30 == 0) {

    //   rand1 = random(0.2, 2);

    //   rand2 = random(0.2, 2);

    //   rand3 = random(0.2, 2);

    // }

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

      v = curl(points[i].x * 2, points[i].y);

​

      strokeWeight(2*thickness);

      stroke(color(new_vals[0]*adjuster, new_vals[1]*adjuster, new_vals[3]*adjuster));

      line(points[i].x, points[i].y, points[i].x + v[0], points[i].y + v[1]);

​

      points[i].x += v[0]*spd_mult;

      points[i].y += v[1]*spd_mult;

    }

  } else {

    frameRate(60);

  }

​

  // modified from https://openprocessing.org/sketch/110105

  if (state == 3) {

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

      brushes[i].paint();

    }

​

    colchange1 = map(vals[5], 0, 127, 0.5, 1.5)

    colchange2 = map(vals[6], 0, 127, 0.5, 1.5)

    colchange3 = map(vals[7], 0, 127, 0.5, 1.5)

    if (frameCount % 60 == 0) {

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

        c = colorCombos[int(random(6))];

        brushes[i].changeColors(

          c._array[0] * 255 * colchange1,

          c._array[1] * 255 * colchange2,

          c._array[2] * 255 * colchange3

        );

      }

    }

  }

​

  // modified from https://openprocessing.org/sketch/989004

  if (state == 4) {

    myCol = color(0, 0, 0)

    opac2 = map(vals[8], 0, 127, 1, 0.05)

    myCol._array[3] = opac2

    background(myCol)

    translate(width / 2, height / 2);

    sizeChange = vals[5]/127 * 1.5 + 0.5

    spd_mult = map(vals[7], 0, 127, 1, 3)

​

    for (let i = 0, len = ude.length; i < len; i += 1) {

      ude[i].update(spd_mult);

      ude[i].show();

    }

​

    if (frameCount % 30 == 0) {

      for (let i = 0, len = ude.length; i < len; i += 1) {

        ude[i].changeColor(colorCombos[int(random(6))]);

      }

    }

​

    if ((frameCount + 30) % 30 == 0) {

      for (let i = 0, len = ude.length; i < len; i += 1) {

        if (random(1) < 0.5) {

          ude[i].changeSize(map(vals[2], 0, 11, 3, 12) * sizeChange);

        }

      }

    }

  }

}

​

function keyPressed() {

  if (keyCode == LEFT_ARROW) {

    if (state == 0) {

      startTime = millis();

      exploded = false;

      resetWords();

    } else if (state == 1) {

      state -= 1;

      startTime = millis();

      exploded = false;

      resetWords();

    } else if (state == 2) {

      state -= 1;

    } else if (state == 3) {

      state -= 1;

      background(0);

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

        points[i].x = random(width);

        points[i].y = random(height);

      }

    } else if (state == 4) {

      state -= 1;

      background(0);

    } else {

      state -= 1;

    }

  }

​

  if (keyCode == RIGHT_ARROW) {

    if (state == 4) {

    } else if (state == 1) {

      state += 1;

      background(0);

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

        points[i].x = random(width);

        points[i].y = random(height);

      }

    } else if (state == 2) {

      state += 1;

      background(0);

    } else {

      state += 1;

    }

  }

​

  if (keyCode == ENTER) {

    exploded = true;

  }

}

​

function resetWords() {

  myText = "though it may feel";

  currentX = 60;

  currentY = (9 / 32) * height;

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

    letters[i].xPos = currentX;

    letters[i].yPos = currentY;

    currentX += textWidth(myText.charAt(i));

  }

​

  myText = "this is all just a";

  currentX = 60;

  currentY = (15 / 32) * height;

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

    letters2[i].xPos = currentX;

    letters2[i].yPos = currentY;

    currentX += textWidth(myText.charAt(i));

  }

​

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

    randX = random(-0.1, 0.25);

    while (randX == 0) {

      randX = random(-0.1, 0.25);

    }

​

    randY = random(-0.25, 0.25);

    while (randY == 0) {

      randY = random(-0.25, 0.25);

    }

​

    randX = randX;

    randY = randY;

​

    realMovX[i] = randX;

    realPosX[i] = randX;

    realMovY[i] = randY;

    realPosY[i] = randY;

  }

​

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

    randX = random(-0.25, 0.5);

    while (randX == 0) {

      randX = random(-0.25, 0.5);

    }

​

    randY = random(-0.5, 0.5);

    while (randY == 0) {

      randY = random(-0.5, 0.5);

    }

​

    randX = randX;

    randY = randY;

​

    memoryMovX[i] = randX;

    memoryPosX[i] = randX;

    memoryMovY[i] = randY;

    memoryPosY[i] = randY;

  }

​

  whiteAlpha = 255;

}

​

function calculate_d(x, y) {

  const xn = int(x / cell_size);

  const yn = int(y / cell_size);

  let min_d = 1e3;

  for (let i = max(-1, -xn); i <= min(1, cells.length - xn - 1); i++) {

    for (let j = max(-1, -yn); j <= min(1, cell_n - yn - 1); j++) {

      d = dist(

        (xn + i + cells[xn + i][yn + j].x) * cell_size,

        (yn + j + cells[xn + i][yn + j].y) * cell_size,

        x,

        y

      );

      min_d = min(min_d, d);

    }

  }

​

  return min_d;

}

​

function curl(x, y) {

  x1 =

    calculate_d(x + 1, y) / cell_size +

    noise((x + 1) * step, y * step) * amplitude;

  x2 =

    calculate_d(x - 1, y) / cell_size +

    noise((x - 1) * step, y * step) * amplitude;

  y1 =

    calculate_d(x, y + 1) / cell_size +

    noise(x * step, (y + 1) * step) * amplitude;

  y2 =

    calculate_d(x, y - 1) / cell_size +

    noise(x * step, (y - 1) * step) * amplitude;

​

  return [((y1 - y2) / 2) * cell_size, ((x2 - x1) / 2) * cell_size];

}

​