let knobValue = 0; // Default knob value is 0

let img;

let pg; // PGraphics buffer

​

function preload() {

  img = loadImage('https://i0.wp.com/paraminnovation.org/wp-content/uploads/2024/05/Param-Science-Vertical_Color-min.png'); // Replace with your image path or URL

}

​

function setup() {

  createCanvas(400, 400);

  // Create a PGraphics buffer

  pg = createGraphics(width, height);

  // Request MIDI access

  navigator.requestMIDIAccess().then(onMIDISuccess, onMIDIFailure);

}

​

function draw() {

  background(220);

  // Map the knob value (0-127) to blur amount (from high to zero)

  let blurAmount = map(knobValue, 0, 127, 10, 0); // Adjust 10 for maximum blur

  // Draw the image onto the PGraphics buffer

  pg.clear();

  pg.image(img, 0, 0, pg.width, pg.height); // Adjust image size if needed

  // Apply the blur filter if blurAmount is greater than zero

  if (blurAmount > 0) {

    pg.filter(BLUR, blurAmount);

  }

  // Draw the PGraphics buffer onto the main canvas

  image(pg, 0, 0, width, height);

  // Display knob value (optional)

  fill(0);

  noStroke();

  textSize(16);

  text(`Knob Value: ${knobValue}`, 10, height - 10);

}

​

// MIDI Functions

function onMIDISuccess(midi) {

  midiAccess = midi;

  const inputs = midiAccess.inputs.values();

​

  // Find and connect to 'IAC Driver Bus 1' or your specific MIDI device

  for (let input of inputs) {

    console.log('MIDI Input:', input.name);

    if (input.name === 'IAC Driver Bus 1') {

      input.onmidimessage = onMIDIMessage;

      console.log('Connected to IAC Driver Bus 1');

    }

  }

}

​

function onMIDIFailure() {

  console.warn("Could not access your MIDI devices.");

}

​

function onMIDIMessage(event) {

  const [status, data1, data2] = event.data;

​

  // MIDI Control Change messages have status bytes from 176 (channel 1) to 191 (channel 16)

  // Since MIDI channels in code are 0-based, channel 0 corresponds to status 176

  if (status === 176 && data1 === 1) { // Control number 1 on channel 0

    knobValue = data2;

    console.log(`Received CC ${data1} with value ${data2} on channel ${status - 176}`);

  }

}

​