How to make a Checkbox change images?

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

Answers

  • edited April 2016

    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.

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

  • edited April 2016

    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.

  • 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 :)

  • edited April 2016

    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_/
  • edited April 2016

    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?

  • edited April 2016 Answer ✓
    • 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
  • edited April 2016

    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;
          }
        }
    
  • 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");
      }
    }
    
Sign In or Register to comment.