let theShader

let capture

let gl

let ball

let synth

​

function preload(){

  theShader = loadShader('shader.vert', 'shader.frag');

}

​

function setup() {

  capture = createCapture(VIDEO);

  capture.size(320, 240);

  capture.hide();

  createCanvas(

    min(640, windowWidth),

    min(480, windowHeight),

    WEBGL

  )

  gl = canvas.getContext('webgl')

  gl.disable(gl.DEPTH_TEST)

  ball = createVector(width/2, height/2)

  monoSynth = new p5.MonoSynth();

}

​

function draw() {

  background(0)

  push()

    theShader.setUniform('u_time', millis()/1000.0);

    theShader.setUniform('width', width*pixelDensity());

    theShader.setUniform('height', height*pixelDensity());

    theShader.setUniform('mouseX', mouseX*pixelDensity());

    theShader.setUniform('mouseY', height*pixelDensity()-mouseY*pixelDensity());

    theShader.setUniform('cam', capture);

    shader(theShader)

    quad(-1, -1, 1, -1, 1, 1, -1, 1)

  pop()

​

  // let mouseColor = getColor(gl, width-mouseX, mouseY)

  // let ballColor = getColor(gl, width-ball.x, ball.y)

  push()

    translate(-width/2, -height/2)

    stroke(255)

    // fill(mouseColor)

    // circle(mouseX, mouseY, 20)

    noFill()

    stroke(0)

    circle(ball.x, ball.y, 20)

  pop()

  if (frameCount % 10 == 0) {

    playSynth()

  }

  ball.x += 1

  ball.x %= width

​

}

​

function windowResized(){

  resizeCanvas(

    min(640, windowWidth),

    min(480, windowHeight)

  )

}

​

function getColor(gl, x, y) {

  let pixel = new Uint8Array(4);

  gl.readPixels(

    width*pixelDensity()-x*pixelDensity(),

    height*pixelDensity()-y*pixelDensity(),

    1, 1,

    gl.RGBA, gl.UNSIGNED_BYTE,

    pixel

  )

  return color(pixel.toString().split(','))

}

​

function mousePressed() {

  playSynth()

}

​

function playSynth() {

  userStartAudio()

  let ballColor = getColor(gl, width-ball.x, ball.y)

​

  let colors = [

    color(255, 0, 0),

    color(255, 255, 0),

    color(0, 255, 0),

    color(0, 255, 255),

    color(0, 0, 255),

    color(255, 0, 255)

  ]

  let colorIndex = colors.findIndex((c) => {

    return red(c) === red(ballColor)

        && green(c) === green(ballColor)

        && blue(c) === blue(ballColor)

  })

  let notes = ['C4', 'D4', 'E4', 'F4', 'G4', 'A4'];

  let velocity = 1;

  let time = 0;

  let dur = 1/6;

​

  console.log(colorIndex, ballColor)

  if (colorIndex != -1) {

    monoSynth.play(notes[colorIndex], velocity, time, dur);

  }

}

​