|
// global variables |
|
var on, off, mic, amp, hover, listening = false; |
|
|
|
// preload images |
|
function preload() { |
|
on = createImg('https://www.markhillard.com/sandbox/micon.png'); |
|
off = createImg('https://www.markhillard.com/sandbox/micoff.png'); |
|
} |
|
|
|
// initialize processing |
|
function setup() { |
|
// create canvas element |
|
var canvas = createCanvas(windowWidth, windowHeight); |
|
canvas.id('canvas'); |
|
canvas.parent('microphone'); |
|
|
|
// audio input (microphone) |
|
mic = new p5.AudioIn(); |
|
mic.stop(); |
|
|
|
// microphone volume |
|
amp = new p5.Amplitude(.9); |
|
amp.setInput(mic); |
|
|
|
// remove loading placeholder |
|
$('#loading-outer').remove(); |
|
} |
|
|
|
// draw canvas |
|
function draw() { |
|
// canvas background color |
|
background('#161616'); |
|
|
|
// microphone button |
|
// -------------------------- |
|
// distance between mouse position and inner ellipse |
|
var d = dist(mouseX, mouseY, windowWidth / 2, windowHeight / 2); |
|
|
|
// if distance between mouse position is less than inner ellipse radius |
|
if (d < 35) { |
|
// set hover status to true |
|
hover = true; |
|
// if distance between mouse position is greater than inner ellipse radius |
|
} else { |
|
// set hover status to false |
|
hover = false; |
|
} |
|
|
|
// if hover status is true |
|
if (hover === true) { |
|
// display pointer cursor |
|
cursor(HAND); |
|
// if hover status is false |
|
} else { |
|
// display default cursor |
|
cursor(ARROW); |
|
} |
|
// -------------------------- |
|
|
|
// outer ellipse |
|
// -------------------------- |
|
// microphone volume level |
|
var vol = amp.getLevel(); |
|
|
|
// if microphone is enabled |
|
if (listening === true && mic.enabled) { |
|
// use "enabled" fill color |
|
fill('#c1212d'); |
|
// if microphone is enabled |
|
} else { |
|
// use "disabled" fill color |
|
fill('#01aea1'); |
|
} |
|
|
|
noStroke(); |
|
ellipseMode(CENTER); |
|
ellipse(width / 2, height / 2, 80 + vol * 300, 80 + vol * 300); |
|
// -------------------------- |
|
|
|
// inner ellipse |
|
// -------------------------- |
|
// if microphone is enabled |
|
if (listening === true && mic.enabled) { |
|
// use "enabled" fill color |
|
fill('#da454f'); |
|
// if microphone is enabled |
|
} else { |
|
// use "disabled" fill color |
|
fill('#25bab0'); |
|
} |
|
|
|
stroke('rgba(0, 0, 0, .05)'); |
|
strokeWeight(2); |
|
ellipseMode(CENTER); |
|
ellipse(width / 2, height / 2, 70, 70); |
|
// -------------------------- |
|
|
|
// swap images |
|
// -------------------------- |
|
imageMode(CENTER); |
|
|
|
// if microphone is enabled |
|
if (listening === true && mic.enabled) { |
|
// display "on" icon |
|
image(on, windowWidth / 2, windowHeight / 2); |
|
// if microphone is disabled |
|
} else { |
|
// display "off" icon |
|
image(off, windowWidth / 2, windowHeight / 2); |
|
} |
|
// -------------------------- |
|
} |
|
|
|
// responsive canvas |
|
function windowResized() { |
|
resizeCanvas(windowWidth, windowHeight); |
|
} |
|
|
|
// microphone toggle |
|
function mouseClicked() { |
|
// if hover status is true |
|
if (hover === true) { |
|
// if microphone is enabled |
|
if (listening === true && mic.enabled) { |
|
// stop listening |
|
listening = false; |
|
mic.stop(); |
|
// if microphone is disabled |
|
} else { |
|
// start listening |
|
listening = true; |
|
mic.start(); |
|
} |
|
} |
|
} |
|
|
|
$(document).ready(function () { |
|
setup(); // initialize processing |
|
draw(); // draw canvas |
|
windowResized(); // responsive canvas |
|
mouseClicked(); // microphone toggle |
|
}); |