Get value from slider in child window to main window

Processing Libraries
1

Hi, I have a sketch that builds on top of the MultipleWindows example provided with the Processing IDE. I am trying to use the controlP5 library sliders to change variables in the main sketch but I don’t know why it isn’t working. I am using the code provided with the MultipleWindows example because the controlP5frame example code doesn’t build for me; I’m using a 2021 MacBookPro with M1 chip, Ventura 13.4.1 OS and Processing 4.1.2.

import controlP5.*;

ChildApplet contrls;
boolean mousePressedOnParent = false;

ControlP5 cp5;

/* code from controlP5 sliders example
int sliderValue = 100;
int sliderTicks1 = 100;
//int sliderTicks2 = 30;
Slider abc;
*/

//variables for controling main drawing shape
int diam = 100; //initial diameter for main arc
float incr = 0; //initial increment for main arc length
//value arcEnds is for dividing diam value and placing end point of red helper lines 
//at end of arc or extending beyond or before arc end points
float arcEnds = 2;
int numSlics = 32; //value for slicing circle into equal increments
int posX, posY;

void setup() {
    size(800, 800);
    posX = width/2;
    posY = height/2;

    windowTitle("Main sketch");
    surface.setLocation(500, 50);
    contrls = new ChildApplet();
    
}

void draw() {

    /////////////////draw BG / clear canvas
    fill(200);
    noStroke();
    rect(0, 0, width, height);

    //grid
    for (int i = 0; i < width; i+=100) {
        stroke(0,50);
        strokeWeight(1);
        line(i, 0, i, height);
    }

    /////////////////draw variables info texts for visual "debug" 
    textSize(15);
    fill(0);
    text("diam: "+diam, 25, 25);
    text("incr: "+nf(incr,1,2), 25, 50);
    float deg = degrees(incr);
    text("deg: "+nf(deg,2,2), 25, 75);

    ////////////////draw main black arc
    stroke(0);
    strokeWeight(25);
    noFill();
    //centerX, centerY, width, height, arc start, arc stop
    arc(posX, posY, diam, diam, 0+incr, PI-incr);

    //// code below contains 1) red arc (at end); 2) red lines for angle deg viz + text;
    //// 3) black straights extending from arc ends
    push();
    //controlP5 sliders will control values passed into translate function below
    //used to control center of elements on canvas
    translate(width/2, height/2);
        text(nf(180-2*deg,3,1),-20,25); //viz arc total degrees
        
        //////////////left side of arc
        push();
        rotate(-1*incr);
        
        stroke(0); //color change for testing / debugging or not
        strokeWeight(25);
        //line that makes left side straight that "extends" arc end point
        line( -1*diam/arcEnds, 0, -1*diam/2, -1*diam/2);
        
        //red line from center of arc to left end point
        strokeWeight(2);
        stroke(255,0,0,100);
        line(0, 0, -1*diam/arcEnds, 0);
        pop();

        ////////////right side of arc
        push();
        rotate(incr);
        stroke(0);
        strokeWeight(25);
        //line that makes right side straight that "extends"arc end point
        line( diam/arcEnds, 0, diam/2, -1*diam/2);
        
        stroke(255, 0, 0, 100);
        strokeWeight(2);
        line(0, 0, diam/arcEnds, 0); //red helper line right side
        pop();
    pop();

    //red arc
    stroke(255,0,0,100);
    strokeWeight(2);
    arc(posX, posY, diam, diam, 0+incr, PI-incr);
     
}

/////////keys pressed for changing arc variables
// code for using keyboard arrow keys to change arc's variable values
void keyPressed() {
  if (key == CODED) {
    if (keyCode == UP) {
      diam += 100;
    } else if (keyCode == DOWN) {
      diam -= 100;
    } else if (keyCode == LEFT) {
        incr -= 2*PI/numSlics;
    } else if (keyCode == RIGHT) {
        incr += 2*PI/numSlics;
    }
  } else {
    diam = 100;
    incr = 2*PI/numSlics;
  }
}

/////////////////////////////////////////////Class for making new window/////////////////////////
//code from MultipleWindows example 
class ChildApplet extends PApplet {
  //JFrame frame;

  public ChildApplet() {
    super();
    PApplet.runSketch(new String[]{this.getClass().getName()}, this);
  }

  public void settings() {
    size(400, 400);
    smooth();
  }

  public void setup() { 
    windowTitle("Child sketch");
    surface.setLocation(50, 50);

    cp5 = new ControlP5(this);

    //!!!HOW TO MAKE THIS SLIDER'S VALUES CHANGE DIAM VAR IN MAIN SKETCH
    cp5.addSlider("diam")
     .setPosition(10,30)
     .setWidth(350)
     .setRange(0,600) // values can range from big to small as well
     .setValue(300)
     .setNumberOfTickMarks(7)
     .setSliderMode(Slider.FLEXIBLE)
     ;
  }

  public void draw() {
    background(100);

  }

  public void mousePressed() {
    
  }

  public void mouseDragged() {
    
  }
}```
1 Like
2
  1. Set up a global variable called ‘sliderValue’ and make it a float.
  2. Change ‘diam’ type to float also.
  3. At top of draw() for main window add ‘diam = sliderValue’

PApplet changes:

  1. At the top of the class define Slider slider;
  2. In setup(): slider = cp5.addSlider(“diam”);
  3. Add a function called “diam()” to trap value of your slider.
    Should look like this:
  void diam(){ 
    if(this.slider != null){
    sliderValue = this.slider.getValue();
    }
  }

Output:

xx
xx1596×1656 143 KB