# Creating simple GUI to change variables in script

**URL:** https://discourse.processing.org/t/creating-simple-gui-to-change-variables-in-script/37912
**Category:** Libraries
**Created:** [July 10, 2022, 11:41pm UTC](https://discourse.processing.org/t/creating-simple-gui-to-change-variables-in-script/37912 "2022-07-10T23:41:22Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![NikhilPundir](https://avatars.discourse-cdn.com/v4/letter/n/ed8c4c/32.png) [@NikhilPundir](https://discourse.processing.org/u/NikhilPundir)
#### Post date: [July 10, 2022, 11:41pm UTC](https://discourse.processing.org/t/creating-simple-gui-to-change-variables-in-script/37912/1 "2022-07-10T23:41:22Z")

</div>

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 ?

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [July 11, 2022, 12:37am UTC](https://discourse.processing.org/t/creating-simple-gui-to-change-variables-in-script/37912/2 "2022-07-11T00:37:57Z")

</div>

> [@NikhilPundir](#):
>
> I change a variable then run the program again to see result

Please post the program.

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [July 11, 2022, 10:02am UTC](https://discourse.processing.org/t/creating-simple-gui-to-change-variables-in-script/37912/3 "2022-07-11T10:02:38Z")

</div>

There are libraries that can provide buttons.

g4p or controlp5

They come with lot of examples

---

<div class="post-metadata">

### Author: ![NikhilPundir](https://avatars.discourse-cdn.com/v4/letter/n/ed8c4c/32.png) [@NikhilPundir](https://discourse.processing.org/u/NikhilPundir)
#### Post date: [July 12, 2022, 3:47am UTC](https://discourse.processing.org/t/creating-simple-gui-to-change-variables-in-script/37912/4 "2022-07-12T03:47:32Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/e/ee972e68df86427dd3c04f253c679c919abd026d.jpeg)

---

<div class="post-metadata">

### Author: ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)
#### Post date: [July 12, 2022, 5:58am UTC](https://discourse.processing.org/t/creating-simple-gui-to-change-variables-in-script/37912/5 "2022-07-12T05:58:03Z")

</div>

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.

```auto
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");
  }
}

```

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [July 12, 2022, 1:26pm UTC](https://discourse.processing.org/t/creating-simple-gui-to-change-variables-in-script/37912/6 "2022-07-12T13:26:13Z")

</div>

**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](http://www.lagers.org.uk/) in particular  
[G4P](http://www.lagers.org.uk/g4p/index.html) library info  
[GUI Builder](http://www.lagers.org.uk/g4p/index.html) including some [videos](http://www.lagers.org.uk/g4ptool/v1-introduction.html) on how to use it.
