​

// Roger Argueta

// After Daniel Shiffman - Coding Train

​

// testing for MIDI keys

let isPitchPrinted = false; // flag

​

let cnv; // store canvas for resizing

​

// time variables for the time limit of program

let start_min;

let time_limit = 2;

let time_limit_reached = false;

​

// variables for saving canvas

// time variables for moment of save; REVISE AUTOMATIC TIME-SAVING

let save_month;

let save_day;

let save_year;

let am_or_pm;

let save_hour;

let save_minute;

let save_second;

let is_canvas_saved = false; // one-time save flag

let start_recording = true; // saveGif flag; set to FALSE

​

// flow field variables

let inc = 0.1; // increment for Perlin noise

let scl = 10; // scaling factor

let col, rows;

let zoff = 0; // z-offset that remains global

​

let keys = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];

let number_keys_pressed;

​

let particles = [];

​

let flowfield = [];

​

let mySounds = [];

​

let midiDevice;

let lastMidiMsg = null;

let p_MidiMsg;

let isPitchValid;

​

let isPlaying = false;

​

let clear_cnv = false; // one-time canvas clearing flag

​

function centerCanvas() {

  let x = (windowWidth - width) / 2;

  let y = (windowHeight - height) / 2;

  cnv.position(x, y);

}

​

function preload() {

  soundFormats("wav");

  sound1 = loadSound("minor_blues_1_01.wav");

  mySounds.push(sound1);

​

  sound2 = loadSound("phrygian_mode_1_01.wav");

  mySounds.push(sound2);

​

  sound3 = loadSound("iwato_1_01.wav");

  mySounds.push(sound3);

​

  sound4 = loadSound("minor_blues_2_01.wav");

  mySounds.push(sound4);

​

  sound5 = loadSound("phrygian_mode_2_01.wav");

  mySounds.push(sound5);

​

  sound6 = loadSound("iwato_2_01.wav");

  mySounds.push(sound6);

​

  sound7 = loadSound("dorian_mode_1_01.wav");

  mySounds.push(sound7);

​

  sound8 = loadSound("dorian_mode_2_01.wav");

  mySounds.push(sound8);

​

  sound9 = loadSound("dorian_mode_3_01.wav");

  mySounds.push(sound9);

​

  sound0 = loadSound("major_chord_1_01.wav");

  mySounds.push(sound0);

  controls = loadImage("controls.jpg")

}

​

function setup() {

  cnv = createCanvas(400, 400);

  // cnv = createCanvas(600, 600);

  centerCanvas();

  start_min = minute();

  midiDevice = new MidiDevice(

    (data) => midiInputMessage(data),

    (err) => midiError(err)

  );

  cols = floor(width / scl);

  rows = floor(height / scl);

​

  flowfield = new Array(cols * rows);

​

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

  // for (let i = 0; i < 1500; i++) {

  // for (let i = 0; i < 2500; i++) {

    particles[i] = new Particle();

  }

  background(255);

  noCursor();

  rectMode(CENTER);

  image(controls, 0, height / 9, width, height / 2.55);

}

​

function midiInputMessage(msg) {

  if (msg.velocity != 0) lastMidiMsg = msg;  // store midi message

}

​

function midiError(err) {

  print(`Error: ${err}`);

}

​

function draw() {

  describe("A white canvas. Click or tap the screen center to start interacting. For MIDI keyboard users, use its black keys. Computer keyboard users may use its number keys. Mobile device users tap the screen's center and use the keyboard's number keys. To save the canvas as an image, press the 's' key. Mobile device users can tap and hold the zoomed-in image to save.")

  let yoff = 0;

  for (let y = 0; y < rows; y++) {

    let xoff = 0;

    for (let x = 0; x < cols; x++) {

      let index = x + y * cols;

      let angle = noise(xoff, yoff, zoff) * TWO_PI * 4;

      let v = p5.Vector.fromAngle(angle);

      v.setMag(0.5);

      flowfield[index] = v;

      xoff += inc;

      stroke(0, 50);

    }

    yoff += inc;

​

    zoff += 0.0003;

  }

​

  number_keys_pressed = key in keys;

​

  if (number_keys_pressed) {

    if (!start_recording) {

      start_recording = true;

      saveGif("myCanvas", 120);

    }

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

      particles[i].follow(flowfield);

      particles[i].update();

      particles[i].edges();

      particles[i].show(random_hue);

    }

  }

  midiPressed();

  // let current_min = minute();

  // minutesPassed(current_min);

  if (is_canvas_saved) {

    location.reload(); // refresh or reload the program or webpage

  }

}

​

function midiPressed() {

  // map color/sound of number keys to black keys

  let pitch_hue;

  if (lastMidiMsg) {

    pitch = lastMidiMsg.pitch;

    velocity = lastMidiMsg.velocity;

    isPitchValid = pitch == 49 || pitch == 51 || pitch == 54 || pitch == 56 || pitch == 58 || pitch == 61 || pitch == 63 || pitch == 66 || pitch == 68 || pitch == 70;

    console.log(pitch);

    if (isPitchValid) {

      if (!isPlaying && lastMidiMsg != null && lastMidiMsg != p_MidiMsg) {

        p_MidiMsg = lastMidiMsg;

        switch (pitch) {

          case 49:

            whichSound = mySounds[0];

            random_hue = 265;

            break;

          case 51:

            whichSound = mySounds[1];

            random_hue = 310;

            break;

          case 54:

            whichSound = mySounds[2];

            random_hue = 360;

            break;

          case 56:

            whichSound = mySounds[3];

            random_hue = 218;

            break;

          case 58:

            whichSound = mySounds[4];

            random_hue = 241;

            break;

          case 61:

            whichSound = mySounds[5];

            random_hue = 200;

            break;

          case 63:

            whichSound = mySounds[6];

            random_hue = 185;

            break;

          case 66:

            whichSound = mySounds[7];

            random_hue = 171;

            break;

          case 68:

            whichSound = mySounds[8];

            // random_hue = 146;

            random_hue = 155;

            break;

          case 70:

            whichSound = mySounds[9];

            random_hue = 57;

            break;

          default:

            whichSound = null;

            break;

        }

        if (whichSound) {

          whichSound.play();

        }

        isPlaying = true;

      }

      if (!whichSound.isPlaying()) {

        isPlaying = false;

        print(lastMidiMsg)

      }

      if (!start_recording) {

        start_recording = true;

        saveGif("myCanvas", 15);

      }

    }

    if (isPlaying) {

      if (!clear_cnv) {

        background(255);

        clear_cnv = true;

      }

      if (p_MidiMsg.pitch != pitch || p_MidiMsg.velocity != velocity) {

        if (isPitchValid) {

          // if (!isPitchPrinted) {

          //   print(pitch);

          //   isPitchPrinted = true;

          // }

          switch (pitch) {

            case 49:

              whichSound = mySounds[0];

              random_hue = 265;

              break;

            case 51:

              whichSound = mySounds[1];

              random_hue = 310;

              break;

            case 54:

              whichSound = mySounds[2];

              random_hue = 360;

              break;

            case 56:

              whichSound = mySounds[3];

              random_hue = 218;

              break;

            case 58:

              whichSound = mySounds[4];

              random_hue = 241;

              break;

            case 61:

              whichSound = mySounds[5];

              random_hue = 200;

              break;

            case 63:

              whichSound = mySounds[6];

              random_hue = 185;

              break;

            case 66:

              whichSound = mySounds[7];

              random_hue = 171;

              break;

            case 68:

              whichSound = mySounds[8];

              // random_hue = 146;

              random_hue = 155;

              break;

            case 70:

              whichSound = mySounds[9];

              random_hue = 57;

              break;

            default:

              whichSound = null;

              break;

          }

          whichSound.play();

          p_MidiMsg = lastMidiMsg;

          p_MidiMsg.velocity = velocity;

        }

      }

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

      particles[i].follow(flowfield);

      particles[i].update();

      particles[i].edges();

      particles[i].show(random_hue);

    }

    }

  }

}

​

function minutesPassed(current_minute) {

  if (start_min == 58) {

    if (current_minute == 0) time_limit_reached = true;

  } else if (start_min == 59) {

    if (current_minute == 1) time_limit_reached = true;

  } else if (current_minute == start_min + 2) time_limit_reached = true;

  if (time_limit_reached) {

    save_month = month();

    save_day = day();

    save_year = year();

    save_hour = hour();

    // hour conversions

    if (save_hour >= 12) {

      // convert to PM time

      am_or_pm = "pm";

      if (save_hour > 12) save_hour -= 12; // 12pm is unaffected

    } else {

      // AM hours

      am_or_pm = "am";

      if (save_hour == 0) {

        // the special case of midnight

        save_hour = 12;

      }

    }

    save_minute = minute();

    if (save_minute < 10) save_minute = "0" + str(save_minute);

    save_second = second();

    console.log(save_second);

    if (save_second < 10) save_second = "0" + str(save_second);

    if (!is_canvas_saved) {

      saveCanvas(`${save_month}-${save_day}-${save_year} at ${save_hour}_${save_minute}_${save_second}${am_or_pm}`, 

  "jpg");

      saveCanvas(`${save_month}-${save_day}-${save_year} at ${save_hour}_${save_minute}_${save_second}${am_or_pm}`, 

  "png");

      is_canvas_saved = true;

    }

  }

}

​

function keyPressed() {

  number_keys_pressed = key in keys;

  if (!clear_cnv && number_keys_pressed) {

    background(255);

    clear_cnv = true;

  }

  switch (key) {

    case "1":

      mySounds[0].play();

      random_hue = 265;

      break;

    case "2":

      mySounds[1].play();

      random_hue = 310;

      break;

    case "3":

      mySounds[2].play();

      random_hue = 360;

      break;

    case "4":

      mySounds[3].play();

      random_hue = 218;

      break;

    case "5":

      mySounds[4].play();

      random_hue = 241;

      break;

    case "6":

      mySounds[5].play();

      random_hue = 200;

      break;

    case "7":

      mySounds[6].play();

      random_hue = 185;

      break;

    case "8":

      mySounds[7].play();

      random_hue = 171;

      break;

    case "9":

      mySounds[8].play();

      // random_hue = 146;

      random_hue = 155;

      break;

    case "0":

      mySounds[9].play();

      random_hue = 57;

      break;

    case "s":

      saveCanvas("myCanvas", "jpg");

      // saveCanvas("myCanvas", "png");

      break;

  }

}

​

function windowResized() {

  centerCanvas();

}