How do you make a circle shaped button in p5.js?

Question

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.

For example i = 3, states[i] = 1, bit[i] = 8 so I add 8 to a number because the current state of that bit is 1.

Another thing is that it draws a circle that is red/green based on bit state.

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)?

Here is my code so far:

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 < 8; i++){

  }
  for (let i = 0; i < 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 < 8; i++){
    if (array[i] === 1){
      a += values[i];
    }
  }
  return a;
}

My finished code for everyone who just wants to see the 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 < 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 < 8; i++){
    if (array[i] === 1){
      a += values[i];
    }
  }
  return a;
}
function mouseClicked(){
  for (let i = 0; i < 8; i++){
    if (dist(mouseX,mouseY,positonsX[i],50) <= d){
      array[i] = 1 - array[i];
    }
  }
}

score 0 · Accepted Answer · answered Apr 19 '19 at 15:48

0

You can detect whether a point (in your case, mouseX, mouseY) is in a circle by comparing the distance between the point and the center of the circle, and comparing it to the radius of the circle. If the distance is less than the radius, then the point is inside the circle.

You can google "detect if point is inside circle" for a ton of results. Shameless self-promotion: this tutorials explains collision detection, including point-circle collision detection.

answered Apr 19 '19 at 15:48

Kevin Workman

41,537
9
68
107

gonna try that! Thanks! – CppPythonDude Apr 19 '19 at 15:51
I auctally need to compare it to the diameter of the circle. Lol what? – CppPythonDude Apr 19 '19 at 16:13

score 0 · Answer 2 · answered Apr 19 '19 at 15:57

0

I'd check for mouseClicked (https://p5js.org/reference/#/p5/mouseClicked), and then mouseX, mouseY to see if a circle got clicked.

answered Apr 19 '19 at 15:57

JohnnyAwesome

500
3
10

That doesnt answer my question. I want to test if it is clicked --> the way i can see it so for example if it touches it not "well you can test it whit these commands" whitout auctally explaining how do you use them. See kevin's answer. – CppPythonDude Apr 19 '19 at 16:08
@CppPythonDude I think this answer is also helpful. You need to do both: detect the mouse press, then use `mouseX` and `mouseY` to compare the point to the circle. – Kevin Workman Apr 19 '19 at 17:13
@KevinWorkman yeah but it does not explain the way you use them. I knew i needed those commands before i posted the question, but didnt know how to use them. – CppPythonDude Apr 20 '19 at 16:27

heothesennoc · Answer 3 · 2022-01-10T00:27:35.393

I had created this class to add circular buttons for one of my projects. Sharing a link to the sketch, might save others some time: p5.js web editor sketch

To check if the mouse pointer is within a circle:

Get the distance between the center of the circle and the mouse pointer

const distance = dist(circleX, circleY, mouseX, mouseY)
Mouse is within the circle if that distance is less that the circle's radius

const isInside = (distance < circleRadius)

How do you make a circle shaped button in p5.js?

3 Answers3