Arduino and Processing GUI basics

Hello everyone,

I'm trying to learn how to create a GUI with processing G4A & G4A tools for my arduino code. And I didn't find much threads about it though I know a lot of people are using Processing to create a GUI. So if someone could show me some basic drills I can figure out the rest.

In this particular case, say, we use arduino motor shield to drive a DC motor, very simple.

The arduino code:

void setup() {
  pinMode(12, OUTPUT); //Initiates Motor Channel A pin
  pinMode(9, OUTPUT); //Initiates Brake Channel A pin
}

void loop(){
  digitalWrite(12, HIGH); //orward direction
  digitalWrite(9, LOW);   //Disengage the Brake
  analogWrite(3, 255);   //full speed
  
  delay(3000);

  analogWrite(3, 0);    //stop
}

And I'd like to build a window in processing in which there're a text field and a button (picture in the attachment). What I wanted to do is you insert a number (1-255) in the text field, then press the button to make the motor rotate.

The Processing code (just the interface):

// Need G4P library
import g4p_controls.*;


public void setup(){
  size(480, 320, JAVA2D);
  createGUI();
  customGUI();
  // Place your setup code here
  
}

public void draw(){
  background(230);
  
}

// Use this method to add additional statements
// to customise the GUI controls
public void customGUI(){

}

public void button1_click1(GButton source, GEvent event) { //_CODE_:button1:728997:
  println("button1 - GButton event occured " + System.currentTimeMillis()%10000000 );
} //_CODE_:button1:728997:

public void textfield1_change1(GTextField source, GEvent event) { //_CODE_:textfield1:846020:
  println("textfield1 - GTextField event occured " + System.currentTimeMillis()%10000000 );
} //_CODE_:textfield1:846020:



// Create all the GUI controls. 
// autogenerated do not edit
public void createGUI(){
  G4P.messagesEnabled(false);
  G4P.setGlobalColorScheme(GCScheme.BLUE_SCHEME);
  G4P.setCursor(ARROW);
  if(frame != null)
    frame.setTitle("Sketch Window");
  button1 = new GButton(this, 130, 184, 80, 30);
  button1.setText("Go");
  button1.addEventHandler(this, "button1_click1");
  textfield1 = new GTextField(this, 98, 128, 160, 30, G4P.SCROLLBARS_NONE);
  textfield1.setText("Speed here");
  textfield1.setOpaque(true);
  textfield1.addEventHandler(this, "textfield1_change1");
}

// Variable declarations 
// autogenerated do not edit
GButton button1; 
GTextField textfield1;

So how can I link my arduino program to the processing program? Do I need to rewrite the arduino code in processing? if so what should we do with functions like digitalWrite, delay, that are built-in in the arduino.h?

And what if there're 2 motors?

I'm really a newbie in this and any advice is greatly appreciated. Many thanks!

catch.PNG