p5.js Web Editor | midi shapemaker 1

xxxxxxxxxx
let shapes = [];
​
const padLookup = {
  36: 1,
  37: 2,
  38: 3,
  39: 4,
  40: 5,
  41: 6,
  42: 7,
  43: 8,
};
const pads = {
  1: {
    down: false,
    velocity: 0,
  },
  2: {
    down: false,
    velocity: 0,
  },
  3: {
    down: false,
    velocity: 0,
  },
  4: {
    down: false,
    velocity: 0,
  },
  5: {
    down: false,
    velocity: 0,
  },
  6: {
    down: false,
    velocity: 0,
  },
  7: {
    down: false,
    velocity: 0,
  },
  8: {
    down: false,
    velocity: 0,
  },
};
const pots = {
  1: {
    value: 0,
  },
  2: {
    value: 0,
  },
  3: {
    value: 0,
  },
  4: {
    value: 0,
  },
  5: {
    value: 0,
  },
  6: {
    value: 0,
  },
  7: {
    value: 0,
  },
  8: {
    value: 0,
  },
};
​
function connect() {
  navigator.requestMIDIAccess().then(
    (midi) => midiReady(midi),
    (err) => console.log("Something went wrong", err)
  );
}
​
function midiReady(midi) {
  // Also react to device changes.
  midi.addEventListener("statechange", (event) => initDevices(event.target));
  initDevices(midi); // see the next section!
}
​
function initDevices(midi) {
  // Reset.
  midiIn = [];
  midiOut = [];
​
  // MIDI devices that send you data.
  const inputs = midi.inputs.values();
  for (let input = inputs.next(); input && !input.done; input = inputs.next()) {
    midiIn.push(input.value);
  }
​
  // MIDI devices that you send data to.
  const outputs = midi.outputs.values();
  for (
    let output = outputs.next();
    output && !output.done;
    output = outputs.next()
  ) {
    midiOut.push(output.value);
  }
​
  startListening();
}
​
// Start listening to MIDI messages.
function startListening() {
  midiIn.forEach((input, index) => {
    input.addEventListener("midimessage", midiMessageReceived);
  });
}
​
function midiMessageReceived(event, index) {
  const NOTE_ON = 144;
  const NOTE_OFF = 128;
  const POT = 176;
​
  const cmd = event.data[0];
  const pitch = event.data[1];
  const value = event.data.length > 2 ? event.data[2] : 1;
​
  // You can use the timestamp to figure out the duration of each note.
  const timestamp = Date.now();
​
  // console.log(cmd, pitch, value)
  if (cmd === POT) {
    // console.log("pot", pitch, "value", value);
    pots[pitch].value = value;
  } else {
    const pad = padLookup[pitch];
    if (cmd === NOTE_ON) {
      pads[pad].velocity = value;
      padHit(pads[pad], pad);
    }
    pads[pad].down = cmd === NOTE_ON ? true : false;
    // console.log("pad", pads[pad]);
  }
}
​
function padHit(pad, i) {
  console.log("pad!");
  if (shapes.length < 2) {
    shapes.push({
      size: findSize(pad.velocity),
      rotation: 0
    });
  } else {
    console.log(pad);
    if (i < 3) shapes[i - 1].size = findSize(pad.velocity);
  }
}
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  connect();
  // noStroke();
  noFill();
  blendMode(MULTIPLY);
  rectMode(CENTER);
}
​
function draw() {
  clear();
  background(255);
​
  translate(width / 2, height / 2);
​
  for (let i = 0; i < shapes.length; i++) {
    push();
    rotate(shapes[i].rotation);
    strokeWeight(findStroke(pots[i * 4 + 4].value));
    rect(
      findPosition(pots[i * 4 + 1].value),
      findPosition(pots[i * 4 + 2].value),
      shapes[i].size,
      shapes[i].size,
      findSize(pots[i * 4 + 3].value)
    );
    pop();
  }
}
​
function findPosition(value) {
  return map(value, 0, 127, -width / 2, width / 2);
}
​
function findRotation(value) {
  return map(value, 0, 127, -PI / 2, PI / 2);
}
​
function findSize(value) {
  return map(value, 0, 127, 0, width);
}
​
function findStroke(value) {
  return map(value, 0, 127, 1, width / 4);
}
​
Cookies

Sketch Files

Console

Preview
