Creating simple GUI to change variables in script

Processing Libraries
1

I wanted to know if its possible to create a simple GUI to change different variables in the script and Re-Re-Render the image. Currently, I change a variable then run the program again to see result. A GUI to see instant change will save a lot of time. So is it possible easily ?

2 Likes
2

Please post the program.

3

There are libraries that can provide buttons.

g4p or controlp5

They come with lot of examples

4

Thanks a lot, I am looking into controlp5. Also, I am looking for behavior as shown in image - there are 2 windows, first small window for controls and the other for design preview. Are you aware of any library to achieve such behavior. I think its possible from controlp5 but I am still investigating how to achieve that.

image
image1112×702 114 KB

5

The source code below will allow you to create two windows controlled by a single sketch: a default Processing window for your controls and a PApplet window that could be used for graphics. Pulling the slider in the default window will change the size of the circle in the graphic window.

import controlP5.*;

ControlP5 cp5;

int radius = 50;
GraphicWindow wnd;

void setup() {
  size(400, 250);
  surface.setTitle("Default Window");
  cp5 = new ControlP5(this);
  cp5.addSlider("radius")
    .setPosition(100, 50)
    .setSize(200, 20)
    .setRange(5, 255)
    ;
  wnd = new GraphicWindow();
}

void draw() {
}

void mousePressed() {
  println("mousePressed in default window");
}

class GraphicWindow extends PApplet {

  public GraphicWindow() {
    PApplet.runSketch(new String[] {this.getClass().getSimpleName()}, this);
  }

  void settings() { // Necessary for PApplet
    size(300, 300);
  }

  void setup() {
  }

  void draw() {
    background(150);
    fill(0, 255, 0);
    circle(width/2, height/2, radius);
  }

  void mousePressed() {
    println("mousePressed in graphic window");
  }
}
6

G4P also supports multiple windows. Also there is the GUI Builder tool which provides a visual design tool to create G4P GUIs including the creation of a control window. Both G4P and GUI Builder can be installed using Processing’s Contribution Manager

More information about G4P and GUI Builder can be found on this website in particular
G4P library info
GUI Builder including some videos on how to use it.

1 Like