p5.js Interactivity - mousePressed()

When the mouse is pressed, the circle changes colors from black to white. Note: you don't have to click inside the circle, just somewhere on the canvas.

by Juan Muñoz

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.12/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.12/addons/p5.sound.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.12/p5.min.js"></script>
<h2>Processing Interaction Example</h2>
<p>Inspired by <a href="http://p5js.org/examples/demos/Hello_P5_Interactivity_1.php">p5.js mousePressed()</a></p>

JavaScript

var colorValue = 0;

function setup() {
    createCanvas(300, 300);
    background(100,200,220);
}

function draw() {
    fill(colorValue);
    ellipse(150, 150, 50, 50);
}

function mousePressed() {
    if (colorValue === 0) {
        colorValue = 255;
    } else {
        colorValue = 0;
    }
}