How to make a Checkbox change images?

diegostrobelt

Hello,

I posted this in "Programing Questions" and I think it's wrong, but I can't move it or delete, so I'm posting in the right place.

Here's my question: I have the following code to overlap random images. In this case, I only have 2 images, but it will work with more kind of images.

// DECLARE YOUR GLOBAL VARIABLES HERE.
PImage backgroundimage; //IMAGE VARIABLE
PImage foregroundimage; //IMAGE VARIABLE
int rand; //RANDOM NUMBER VARIABLE
int rand2; //RANDOM NUMBER VARIABLE

void setup() {
 size(800, 600);
 rand = int(random(0,4)); //NUMBER OF RANDOM IMAGES
 rand2 = int(random(0,4)); //NUMBER OF RANDOM IMAGES
 randomimage_background("bg_" + nf(rand, 3) + ".jpg"); //IMAGES MUST CALL "bg_XXX.jpg"
 randomimage_foreground("fore_" + nf(rand2, 3) + ".jpg"); //IMAGES MUST CALL "fore_XXX.jpg"
}

// FUNCTION TO LOAD BACKGROUND
void randomimage_background(String fn) {
  backgroundimage = loadImage(fn); //LOAD RANDOM IMAGE
  tint(255, 127); //IMAGE TRANSPARENCY
  image(backgroundimage,0,0);//DISPLAY RANDOM IMAGE
}

// FUNCTION TO LOAD FOREGROUND
void randomimage_foreground(String fn) {
  foregroundimage = loadImage(fn); //LOAD RANDOM IMAGE
  tint(255, 127); //IMAGE TRANSPARENCY
  image(foregroundimage,0,0); //DISPLAY RANDOM IMAGE
}

It is working perfect for what I want, but now I'm trying to make a panel with checkboxes to decide if it will load a certain class of images or not. It's like a checkbox for the "backgroundimage" and one for the "foregroundimage" and it only display the ones that are checked on the list.

I read a little about a library called ControlP5, but I really didn't understood how it works. Anyone knows how I can do it?

Another question: it could run on web too using processing.js?

Thanks :)

GoToLoop

I read a little about a library called ControlP5,
It could run on web too using processing.js?

If you use ControlP5, or any other library, it automatically becomes bound to Java Mode.
In order to cross-work w/ JS Mode (Pjs), a Java library needs to be written in JS too, w/ matching APIs.

diegostrobelt

And you know if there is any way to do this without ControlP5 on Processing?

Or if it is impossible to make that runs on web, you know how I could make this using ControlP5 or other library?

GoToLoop

If you wish for your sketch to be cross-mode compatible, you need to stick w/ Processing API:

1. https://Processing.org/reference/
2. http://ProcessingJS.org/reference/

Either you program your own checkbox using Processing API only or...
Use a Java library for the Java Mode and re-write the whole sketch to use a JS library for the JS Mode.

diegostrobelt

And there is anyway to program these checkboxes using only Processing API?

Sorry, I'm really new to coding, Processing and Java, so I don't know what could be the best solution.

Thank you :)

GoToLoop

Well, a checkbox is merely a small rect() w/ some text() on its right side:

1. http://ProcessingJS.org/reference/rect_/
2. http://ProcessingJS.org/reference/text_/

diegostrobelt

Oh, that's pretty obvious hahaha I didn't tought about it!

Now I've done something like what I desired, here's the code:

// DECLARE YOUR GLOBAL VARIABLES HERE.
PImage backgroundimage; //IMAGE VARIABLE
PImage foregroundimage; //IMAGE VARIABLE
int rand; //RANDOM NUMBER VARIABLE
int rand2; //RANDOM NUMBER VARIABLE
int value = 0;

void setup() {
 size(800, 750);
 rand = int(random(0,15)); //NUMBER OF RANDOM IMAGES
 rand2 = int(random(0,15)); //NUMBER OF RANDOM IMAGES
 randomimage_background("bg_" + nf(rand, 3) + ".png"); //IMAGES MUST CALL "bg_XXX.jpg"
 randomimage_foreground("fore_" + nf(rand2, 3) + ".png"); //IMAGES MUST CALL "fore_XXX.jpg"
}

// FUNCTION TO LOAD BACKGROUND
void randomimage_background(String fn) {
  backgroundimage = loadImage(fn); //LOAD RANDOM IMAGE
//  tint(255, 127); //IMAGE TRANSPARENCY
  image(backgroundimage,0,0);//DISPLAY RANDOM IMAGE
}

// FUNCTION TO LOAD FOREGROUND
void randomimage_foreground(String fn) {
  foregroundimage = loadImage(fn); //LOAD RANDOM IMAGE
  text("teste",35,710);
}

void draw() {
  fill(value);
  rect(10, 700, 15, 15);
}

void mouseClicked() {
  if (value == 0) {
//    tint(255, 127); //IMAGE TRANSPARENCY
    image(foregroundimage,0,0); //DISPLAY RANDOM FOREGROUND IMAGE
    value = 255;
  } else {
    value = 0; 
  }
}

//WHEN PRESS SPACE RESET THE RANDOM FUNC AND BG
void keyReleased()
{
 if (key==' ') {
   clear();
   setup();
 }
}

But I still don't know how to hide the random image displayed when the button is pressed and show another random image when it's pressed again.

I've found this link but I really didn't understand how to implement this to my code. Is it possible?

GoToLoop

• Most reliable & easier approach is loading all resources we're gonna need in setup() .
• In your case, create 2 PImage[] arrays in order to store all of your fore & background images.
• Also have 2 global int variables in order to track down current index for your 2 arrays.
• In draw(), use image() in order to display current fore & background PImage objects.
• Update current indices inside your input events. Don't do anything else there!
• Warning: never directly call setup() nor draw()! [-X

diegostrobelt

It totally worked! Took some time to understand a little more about arrays, but now everything is working!

Thank you very much, GoToLoop!

Here is the code, if someone is looking for that: PImage[] backgroundimage; PImage[] foregroundimage; int rand_background; int rand_foreground; int value = 0; boolean should_draw = true;

    void setup() {
     size(800, 750);
     rand_background = int(random(0,15));
     rand_foreground = int(random(0,15));
     backgroundimage = new PImage[16];
     backgroundimage[0] = loadImage("bg_000.png");
     backgroundimage[1] = loadImage("bg_001.png");
     backgroundimage[2] = loadImage("bg_002.png");
     backgroundimage[3] = loadImage("bg_003.png");
     backgroundimage[4] = loadImage("bg_004.png");
     backgroundimage[5] = loadImage("bg_005.png");
     backgroundimage[6] = loadImage("bg_006.png");
     backgroundimage[7] = loadImage("bg_007.png");
     backgroundimage[8] = loadImage("bg_008.png");
     backgroundimage[9] = loadImage("bg_009.png");
     backgroundimage[10] = loadImage("bg_010.png");
     backgroundimage[11] = loadImage("bg_011.png");
     backgroundimage[12] = loadImage("bg_012.png");
     backgroundimage[13] = loadImage("bg_013.png");
     backgroundimage[14] = loadImage("bg_014.png");
     backgroundimage[15] = loadImage("bg_015.png");
     foregroundimage = new PImage[16];
     foregroundimage[0] = loadImage("fore_000.png");
     foregroundimage[1] = loadImage("fore_001.png");
     foregroundimage[2] = loadImage("fore_002.png");
     foregroundimage[3] = loadImage("fore_003.png");
     foregroundimage[4] = loadImage("fore_004.png");
     foregroundimage[5] = loadImage("fore_005.png");
     foregroundimage[6] = loadImage("fore_006.png");
     foregroundimage[7] = loadImage("fore_007.png");
     foregroundimage[8] = loadImage("fore_008.png");
     foregroundimage[9] = loadImage("fore_009.png");
     foregroundimage[10] = loadImage("fore_010.png");
     foregroundimage[11] = loadImage("fore_011.png");
     foregroundimage[12] = loadImage("fore_012.png");
     foregroundimage[13] = loadImage("fore_013.png");
     foregroundimage[14] = loadImage("fore_014.png");
     foregroundimage[15] = loadImage("fore_015.png");
    }

    void draw() {
      fill(value);
      rect(10, 700, 15, 15);
      text("teste",35,710);
      image(backgroundimage[rand_background],0,0); //DISPLAY RANDOM IMAGE
      if(should_draw){
        image(foregroundimage[rand_foreground],0,0); //DISPLAY RANDOM FOREGROUND IMAGE
      }
    }

    void mouseClicked() {
      if (value == 0) {
        value = 255;
        rand_foreground = int(random(0,15));
        should_draw = false;
      } else {
        value = 0; 
        should_draw = true;
      }
    }

GoToLoop

Nice job! As a bonus, a simplification for loading all of those images: :-bd

static final int IMAGES = 16;
final PImage[] bgImages = new PImage[IMAGES], fgImages = new PImage[IMAGES];
int bgIdx = (int) random(IMAGES), fgIdx = (int) random(IMAGES);

color paint;
boolean drawing = true;

void setup() {
  size(800, 750, FX2D);
  smooth(4);
  imageMode(CORNER);

  for (int i = 0; i < IMAGES; ++i) {
    bgImages[i] = loadImage("bg_" + nf(i, 3) + ".png");
    fgImages[i] = loadImage("fore_" + nf(i, 3) + ".png");
  }
}