Skip to content

Instantly share code, notes, and snippets.

@markhillard

markhillard/p5-js-microphone-toggle.markdown

Last active December 15, 2021 05:16
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save markhillard/88efb930e26005df334e86b94a79d293 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save markhillard/88efb930e26005df334e86b94a79d293 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. markhillard revised this gist Dec 15, 2021. 2 changed files with 35 additions and 40 deletions.
    68 changes: 32 additions & 36 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,10 @@
    // global variables
    var on, off, mic, amp, hover;
    var listening = false;
    var on, off, mic, amp, hover, listening = false;

    // preload images
    function preload() {
    on = createImg('http://www.markhillard.com/sandbox/micon.png');
    off = createImg('http://www.markhillard.com/sandbox/micoff.png');
    on = createImg('https://www.markhillard.com/sandbox/micon.png');
    off = createImg('https://www.markhillard.com/sandbox/micoff.png');
    }

    // initialize processing
    @@ -37,23 +36,23 @@ function draw() {
    // 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 distance between mouse position is less than inner ellipse radius
    if (d < 35) {
    // * set hover status to true
    // set hover status to true
    hover = true;
    // if distance between mouse position is greater than inner ellipse radius... *
    // if distance between mouse position is greater than inner ellipse radius
    } else {
    // * set hover status to false
    // set hover status to false
    hover = false;
    }

    // if hover status is true... *
    // if hover status is true
    if (hover === true) {
    // * display pointer cursor
    // display pointer cursor
    cursor(HAND);
    // if hover status is false... *
    // if hover status is false
    } else {
    // * display default cursor
    // display default cursor
    cursor(ARROW);
    }
    // --------------------------
    @@ -63,34 +62,34 @@ function draw() {
    // microphone volume level
    var vol = amp.getLevel();

    // if microphone is enabled... *
    // if microphone is enabled
    if (listening === true && mic.enabled) {
    // * use "enabled" fill color
    // use "enabled" fill color
    fill('#c1212d');
    // if microphone is enabled... *
    // if microphone is enabled
    } else {
    // * use "disabled" fill color
    // use "disabled" fill color
    fill('#01aea1');
    }

    noStroke();
    ellipseMode(CENTER);
    ellipse(width / 2, height / 2, 80 + vol * 200, 80 + vol * 200);
    ellipse(width / 2, height / 2, 80 + vol * 300, 80 + vol * 300);
    // --------------------------

    // inner ellipse
    // --------------------------
    // if microphone is enabled... *
    // if microphone is enabled
    if (listening === true && mic.enabled) {
    // * use "enabled" fill color
    // use "enabled" fill color
    fill('#da454f');
    // if microphone is enabled... *
    // if microphone is enabled
    } else {
    // * use "disabled" fill color
    // use "disabled" fill color
    fill('#25bab0');
    }

    stroke('rgba(0,0,0,.05)');
    stroke('rgba(0, 0, 0, .05)');
    strokeWeight(2);
    ellipseMode(CENTER);
    ellipse(width / 2, height / 2, 70, 70);
    @@ -100,13 +99,13 @@ function draw() {
    // --------------------------
    imageMode(CENTER);

    // if microphone is enabled... *
    // if microphone is enabled
    if (listening === true && mic.enabled) {
    // * display "on" icon
    // display "on" icon
    image(on, windowWidth / 2, windowHeight / 2);
    // if microphone is disabled... *
    // if microphone is disabled
    } else {
    // * display "off" icon
    // display "off" icon
    image(off, windowWidth / 2, windowHeight / 2);
    }
    // --------------------------
    @@ -118,20 +117,17 @@ function windowResized() {
    }

    // microphone toggle
    function mouseClicked(e) {
    // prevent default action
    e.preventDefault();

    // if hover status is true... *
    function mouseClicked() {
    // if hover status is true
    if (hover === true) {
    // and if microphone is enabled... *
    // if microphone is enabled
    if (listening === true && mic.enabled) {
    // * stop listening
    // stop listening
    listening = false;
    mic.stop();
    // and if microphone is disabled... *
    // if microphone is disabled
    } else {
    // * start listening
    // start listening
    listening = true;
    mic.start();
    }
    @@ -143,4 +139,4 @@ $(document).ready(function () {
    draw(); // draw canvas
    windowResized(); // responsive canvas
    mouseClicked(); // microphone toggle
    });
    });
    7 changes: 3 additions & 4 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,3 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.sound.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/p5.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.10.2/addons/p5.sound.js"></script>
  2. markhillard revised this gist Apr 12, 2017. 1 changed file with 0 additions and 7 deletions.
    7 changes: 0 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,7 +0,0 @@
    <div id="loading-outer">
    <div id="loading-inner">
    <img src="http://www.markhillard.com/sandbox/micoff.png" alt="">
    </div>
    </div>

    <div id="microphone"></div>
  3. markhillard revised this gist Apr 12, 2017. 2 changed files with 9 additions and 2 deletions.
    7 changes: 7 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    <div id="loading-outer">
    <div id="loading-inner">
    <img src="http://www.markhillard.com/sandbox/micoff.png" alt="">
    </div>
    </div>

    <div id="microphone"></div>
    4 changes: 2 additions & 2 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -20,7 +20,7 @@ function setup() {
    mic.stop();

    // microphone volume
    amp = new p5.Amplitude(0.9);
    amp = new p5.Amplitude(.9);
    amp.setInput(mic);

    // remove loading placeholder
    @@ -75,7 +75,7 @@ function draw() {

    noStroke();
    ellipseMode(CENTER);
    ellipse(width / 2, height / 2, 80 + vol * 50, 80 + vol * 50);
    ellipse(width / 2, height / 2, 80 + vol * 200, 80 + vol * 200);
    // --------------------------

    // inner ellipse
  4. markhillard renamed this gist Mar 12, 2017. 1 changed file with 0 additions and 0 deletions.
    0 index.html → test.html
    View file
    File renamed without changes.
  5. markhillard created this gist Mar 12, 2017.
    7 changes: 7 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    <div id="loading-outer">
    <div id="loading-inner">
    <img src="http://www.markhillard.com/sandbox/micoff.png" alt="">
    </div>
    </div>

    <div id="microphone"></div>
    7 changes: 7 additions & 0 deletions p5-js-microphone-toggle.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    p5.js Microphone Toggle
    -----------------------
    Using the p5.js canvas drawing library, I was able to create a toggle button that enables/disables your computer microphone when clicked. It listens to this audio channel in real time and produces an animated ellipse that increases/decreases in amplitude based on the input volume.

    A [Pen](http://codepen.io/markhillard/pen/dGGwmV) by [Mark Hillard](http://codepen.io/markhillard) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/markhillard/pen/dGGwmV/license).
    146 changes: 146 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,146 @@
    // global variables
    var on, off, mic, amp, hover;
    var listening = false;

    // preload images
    function preload() {
    on = createImg('http://www.markhillard.com/sandbox/micon.png');
    off = createImg('http://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(0.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 * 50, 80 + vol * 50);
    // --------------------------

    // 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(e) {
    // prevent default action
    e.preventDefault();

    // if hover status is true... *
    if (hover === true) {
    // and if microphone is enabled... *
    if (listening === true && mic.enabled) {
    // * stop listening
    listening = false;
    mic.stop();
    // and 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
    });
    4 changes: 4 additions & 0 deletions scripts
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/p5.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.dom.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.7/addons/p5.sound.js"></script>
    40 changes: 40 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    html,body {
    background-color:#161616;
    overflow:hidden;
    }

    #loading-outer {
    background-color:#01aea1;
    border-radius:50%;
    display:block;
    height:80px;
    left:50%;
    margin:-40px 0 0 -40px;
    position:absolute;
    text-align:center;
    top:50%;
    width:80px;
    }

    #loading-inner {
    background-color:#25bab0;
    border-radius:50%;
    box-shadow:0 0 2px rgba(0,0,0,.05);
    display:block;
    height:70px;
    left:50%;
    margin:-35px 0 0 -35px;
    position:absolute;
    text-align:center;
    top:50%;
    width:70px;
    }

    #loading-inner img {
    bottom:0;
    left:0;
    margin:auto;
    position:absolute;
    right:0;
    top:0;
    }