​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

}

​

function windowResized(){ // automatically resizes the window

  resizeCanvas(windowWidth, windowHeight)

}

​

function draw() {

  time += round(deltaTime/1000, 3) // updates time using using deltatime

  background(0,0,10);

  stroke(0,255,255)

  fill(0,0,30)

  strokeWeight(1)

  // bar settings

  let barSize = 40

  let barOffset = -60

  let barPosOffset = -150

  let barGap = 12

  // bars

  rect(-barOffset, -barSize/2 + barPosOffset, windowWidth/2 + barOffset + 5, barSize)

  rect(-barOffset, -barSize/2 + (barSize + barGap) + barPosOffset, windowWidth/2 + barOffset + 5, barSize)

  rect(-barOffset, -barSize/2 - (barSize + barGap) + barPosOffset, windowWidth/2 + barOffset + 5, barSize)

  // hit rectangle settings

  let offColor = color(0,0,255)

  let onColor = color(255)

  noFill()

  strokeWeight(1)

  let hitWidth = 10

  let hitHeightOffset = 5

  let onOffset = -4

  // hit rectangles

  stroke(keyIsDown(83)?onColor:offColor)

  rect(-barOffset - hitWidth/2 - (keyIsDown(83)?onOffset/2:0),

       -barSize/2 + barPosOffset - hitHeightOffset - (keyIsDown(83)?onOffset/2:0),

       hitWidth + (keyIsDown(83)?onOffset:0),

       barSize + hitHeightOffset*2 + (keyIsDown(83)?onOffset:0) )

  stroke(keyIsDown(65)?onColor:offColor)

  rect(-barOffset - hitWidth/2 - (keyIsDown(65)?onOffset/2:0),

       -barSize/2 + barPosOffset - hitHeightOffset - (keyIsDown(65)?onOffset/2:0) - (barSize + barGap),

       hitWidth + (keyIsDown(65)?onOffset:0),

       barSize + hitHeightOffset*2 + (keyIsDown(65)?onOffset:0) )

  stroke(keyIsDown(68)?onColor:offColor)

  rect(-barOffset - hitWidth/2 - (keyIsDown(68)?onOffset/2:0),

       -barSize/2 + barPosOffset - hitHeightOffset - (keyIsDown(68)?onOffset/2:0) + (barSize + barGap),

       hitWidth + (keyIsDown(68)?onOffset:0),

       barSize + hitHeightOffset*2 + (keyIsDown(68)?onOffset:0) )

}