Switch with createCheckbox()

p5.js Coding Questions
1

Hi Again
Sorry, I’m a beginner, I didn’t understand what was formatting the code. I hope now I will get some help :slightly_smiling_face:

I would like to be able to select different circle A and B with a createCheckbox()

What I want is when the A is selected then we select the B, the circle A should disappear and the checkbox A must be unchecked

Right now when I check the A then I check the B the A remain checked

What is wrong with my code?

Thank you for your help

Here is the exemple :


var checkbox_a, checkbox_b;
var checkbox_a_go, checkbox_b_go;

function setup() {
createCanvas(400, 400);
checkbox_a = createCheckbox(“A”, false);
checkbox_a.position(20, height + 20);
checkbox_a.changed(aaa);
checkbox_b = createCheckbox(“B”, false);
checkbox_b.position(60, height + 20);
checkbox_b.changed(bbb);
}

aaa = function(){
checkbox_a_go = !checkbox_a_go;
if(this.checked()){
//checkbox_b_go = false;
//checkbox_c_go = false;
}
}

bbb = function(){
checkbox_b_go = !checkbox_b_go;
if(this.checked()){
//checkbox_a_go = false;
// checkbox_c_go = false;
}
}

function draw() {
background(220);
if(checkbox_a_go === true){
ellipse(50,50,100,100)
}

if(checkbox_b_go === true){
ellipse(200,200,200,200)
}
}
1 Like
2

Hi,

you have several ways to achieve it. The best way would be to use radio inputs instead of checkbox ones. By grouping them, you will be able to select only one of them by default.
Then you’ll need only to hide your input.

If we stay on what you already have here, you’ll need first to uncheck the input, accessible by the elt property of your checkbox_b :

    checkbox_a.elt.children[0].checked = false; // elt is actually a div containing both the input and its label. We use the children property to access to your input
    console.log('hide a', checkbox_a.elt.children)

And then, hide the element by using the built-in fonction of p5.element : hide().

So, in total, you’ll have :

function bbb(){
if (checkbox_a_go){ // if a already checked
    checkbox_a.elt.children[0].checked = false;
    console.log('hide a', checkbox_a.elt)
    // checkbox_b_go = false; // depends on what you want
    checkbox_a.hide();
  }
}
2 Likes
3

createRadio works well if the values are numbers or color names. Thank for your help :slightly_smiling_face:

But if I’d like to switch different shapes likes circle, rectangle etc… or, call several functions with radio, what should I do?

Thank you in advance.

4

If you want to go wild you can use the value as a function name
https://editor.p5js.org/micuat/sketches/2mpnvWg0b
But I would recommend using switch-case instead :slight_smile:

2 Likes
5

Thank you for your recommendation but my level is not good enough to associate checkbox and switch-case. Unless you know tutorial that fit my goal.

If I stick with radio.
I understood that the radio.value() works when its parameters correspond to the pre-existing functions like “rect”, “circle”.
But is it possible to switch between different functions created by me?

Thank you for your help

6

for example: p5.js Web Editor

But if you are a beginner, I recommend you to follow tutorials first:

7

Thanks, not a such beginner :joy: but Dan is fantastic I watched like more than 100 of this video

Still have the same question :slightly_smiling_face:

8

did you check the sketch I posted?

sorry but I’m not kidding - switch-case is a basic structure, and even though you don’t know it, you can achieve basically the same thing with if-else in this case.

9

Hello thanks for your help,
Yes, I red your code exemple
I was not clear enough
I would like to use my own function (not the pre-existing function like circle, rect)

Like this: function candy(), function car(), etc.
I’d like to associate them to createRadio.
Is it possible ?

let radio;
function setup() {
  createCanvas(400, 400);
  radio = createRadio();
  radio.option('rect');
  radio.option('circle');
  radio.selected('rect');
}

function draw() {
  background(220);
  this[radio.value()](200,200,100)
}

function candy(){
  triangle(50,50,100,75,50,100);
  circle(150,75,100);
  triangle(200,75,250,50,250,100);
}
10

sorry, forget about this[radio.value()] because it’s not a good practice.

could you simply do something like this? (not tested)

switch(radio.value()) {
case "candy":
  candy();
  break;
case "car":
  car();
  break;
}

or is this still not clear to you?

1 Like
11

Great help Micuat. I got it, It’s working ! :slightly_smiling_face: