p5.js Web Editor | midi cube rotation copy copy

xxxxxxxxxx
let rX = 0;
let rY = 0;
let rZ = 0;
​
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;
    pads[pad].down = cmd === NOTE_ON ? true : false;
    // console.log("pad", pads[pad]);
  }
}
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  connect();
  noStroke()
  blendMode(MULTIPLY)
  rectMode(CENTER)
}
​
function draw() {
  clear()
  background(255);
  
  translate(width/2, height/2)
  
  push()
  fill(255,255,0)
  translate(0,findPosition(pots[5].value))
  rotate(findRotation(pots[1].value));
  square(0,0,findSize(pads[1].velocity));
  pop()
  
    push()
  fill(255,0,255)
  translate(0,findPosition(pots[6].value))
  rotate(findRotation(pots[2].value));
  square(0,0,findSize(pads[2].velocity));
  pop() 
  
    push()
  fill(0, 255,255)
  translate(0,findPosition(pots[7].value))
  rotate(findRotation(pots[3].value));
  square(0,0,findSize(pads[3].velocity));
  pop()
}
​
function findPosition(value){
  return map(value, 0, 127, -width/10, width/10)
}
​
function findRotation(value){
  return map(value, 0, 127, -PI/2, PI/2)
}
​
function findSize(value){
  return map(value, 0, 127, 0, width/2)
}
​
Cookies

Sketch Files

Console

Preview
