How to create a buttons

Processing Coding Questions
1

— create a program that will display four radio buttons, each represented by a circle and accompanying text.
— when the user clicks on a circle, it is shown as being filled in. If another circle was previously filled in, it now becomes empty.
---- Each time a radio button is selected, the accompanying text is displayed in the console.

2

Hi, it seems to be a homework related question. Please visit this link to know about the forum homework policy.

3

I made the adjustment thank you.

4

Well… not really, you just copy pasted your exercice.

We won’t do your exercice for you. What we can do, however, is help you figure out where to start, point you in the right direction and gives you advice on what to do and how to do things.

Have you tried something yet? Do you have some piece of code we can work with? Are you stuck at doing one specific thing?

The first part is to draw radio button (=circle) with some text on the side.
Start simple. Can you draw a circle in the center of the window?

1 Like
5

int cX, cY,
r;

void setup(){
size(200,200);
cX = 100;
cY = 100;
r = 50;
circle(cX, cY, 2*r)

}
void draw(){

}

void mouseReleased(){
float d;
d = sqrt(pow((cX-mouseX),2)+pow((cY-mouseY),2));
println(d);
if(d <= r)

not sure if I am heading the right way.

6

Forget about the mouse function for the moment.
Focus on drawing your radio buttons.

So after cleaning a bit your code we have this:

int cX, cY, r;

void setup() {
  size(200, 200);
  cX = 100;
  cY = 100;
  r = 50;
  circle(cX, cY, 2*r);
}

void draw() {
}

Perfect, we now know how to draw one circle in the middle of the screen.
Now try to draw 4 of them one under each other.

7

int cX, cY, r;

void setup() {
size(200, 200);
cX = 100;
cY = 50;
r = 20;
circle(cX, cY, 2r);
cX = 100;
cY = 100;
r = 20;
circle(cX, cY, 2r);
cX = 100;
cY = 150;
r = 20;
circle(cX, cY, 2*r);

}

void draw() {
}

is there a way to only type it once and create 3 of them?

8

Please format you code with the </> icon.

You can indeed only type it once and have it 4 times. For that you want to use a for loop.

Here is a code to demonstrate how to use a for loop:

void setup() {
  // The first part of the for loop "int i = 0" indicate to create a variable named i of type integer equals to 0
  // The second part "i < 3" is the condition that i should validate to keep going.
  // In other word, as long as i is lower than 3 we continue to loop.
  // The last part "i++" is what happens after a loop. In this case we increment i by 1.
  
  // So the first time i is 0 and 0 < 3 so we execute what is in the loop. It should print 2 * 0 = 0
  // Then we increment i by one (i++)
  // The second time i is 1 and 1 < 3 so we evecute the loop. It prints 2 * 1 = 2
  // We increment i
  // The third time i is 2 and 2 < 3 so we excute the loop. It prints 2 * 2 = 4
  // We increment i
  // The fourth time i is 3 and 3 is not < 3 so we dont execute the loop
  for (int i = 0; i < 3; i++){
    println(2 * i);
  }
  println("We are out of the loop");
}

Now you can try to apply this to your program. Each for loop you need to draw an ellipse but every time you need to change your cY value.

1 Like
10

for loops confuses me…i don’t know where to begin

11

Hi @Pokeyace,

A good place to start if you are new to programming might be to read and watch some tutorials :yum: :

2 Likes
12

When you have a for loop with i you can calculate your y value for this


y= i*50 + 50;

Use this in the circle command

1 Like