title: How do you make a circle shaped button in p5.js?
body: <p>I am making a p5.js project. In it I am generating a list (with 8 elements) and setting them to 1/0. Each one represents a bit (1,2,4,8,16,32,64,128) and if the element is 1, I add the index of the bit array. </p>
  
  <p>For example <code>i = 3</code>, <code>states[i] = 1</code>, <code>bit[i] = 8</code> so I add 8 to a number because the current state of that bit is 1. </p>
  
  <p>Another thing is that it draws a circle that is red/green based on bit state. </p>
  
  <p>Now that you know the basic idea, I want to add the ability for the user to press a circle to change its state (from 1 to 0 and from 0 to 1). I know how to change the state, but how do i test if the user has actually pressed the button (notice that the button is a circle)?</p>
  
  <p>Here is my code so far:</p>
  
  <pre><code>var array = [0,1,0,1,1,1,1,1];
  var values = [128,64,32,16,8,4,2,1];
  function setup(){
    //console.log(array);
    createCanvas(600,600);
    textStyle(BOLDITALIC);
    textSize(50);
  }
  function draw(){
    clear();
    var a = calculate(array);
    background(51);
    fill(255);
    text(a,250,500);
    let crcl = 50;
    let d = 20;
    let r = d/2;
    for (let i = 0; i &lt; 8; i++){
  
    }
    for (let i = 0; i &lt; 8; i++){
      if (array[i] === 1){
        fill(0,255,0);
        circle(crcl, 50, d);
      } else {
        fill(255,0,0);
        circle(crcl, 50, d);
      }
      crcl += 50;
    }
  }
  function calculate(array){
    let a = 0;
    for (let i = 0; i &lt; 8; i++){
      if (array[i] === 1){
        a += values[i];
      }
    }
    return a;
  }
  </code></pre>
  
  <p>My finished code for everyone who just wants to see the code!:</p>
  
  <pre><code>var array = [0,1,0,1,1,1,1,1];
  var values = [128,64,32,16,8,4,2,1];
  var positonsX = [50,100,150,200,250,300,350,400];
  var crcl = 50;
  var d = 20;
  var r = d/2;
  function setup(){
    //console.log(array);
    createCanvas(600,600);
    textStyle(BOLDITALIC);
    textSize(50);
  }
  function draw(){
    clear();
    let crcl = 50;
    d = 20;
    r = d/2;
    a = calculate(array);
    background(51);
    fill(255);
    text(a,250,500);
    for (let i = 0; i &lt; 8; i++){
      if (array[i] === 1){
        fill(0,255,0);
        circle(crcl, 50, d);
      } else {
        fill(255,0,0);
        circle(crcl, 50, d);
      }
      crcl += 50;
    }
  }
  function calculate(array){
    let a = 0;
    for (let i = 0; i &lt; 8; i++){
      if (array[i] === 1){
        a += values[i];
      }
    }
    return a;
  }
  function mouseClicked(){
    for (let i = 0; i &lt; 8; i++){
      if (dist(mouseX,mouseY,positonsX[i],50) &lt;= d){
        array[i] = 1 - array[i];
      }
    }
  }
  </code></pre>