How do I send variables from text fields in processing to Arduino?

In my Arduino project, I’ve been sending data to the board via serial monitor in Arduino IDE.
Here’s a part of my code from the Arduino:

`while (Serial.available() > 0) {

    // look for the next valid integer/float in the incoming serial stream:
    float voltage_1 = Serial.parseFloat();     //Voltage amplitude
    float widthF_1  = Serial.parseFloat();     //Pulse width 
    float interF_1  = Serial.parseFloat();
    int frequency_1 = Serial.parseInt  ();     //frequency of pulses
    int number_1    = Serial.parseInt  ();     //number of pulses
    int delayy_1    = Serial.parseInt  ();     //The delay before applying the pulse

    float voltage_2 = Serial.parseFloat();     //Voltage amplitude
    float widthF_2  = Serial.parseFloat();     //Pulse width 
    float interF_2  = Serial.parseFloat();
    int frequency_2 = Serial.parseInt  ();     //frequency of pulses
    int number_2    = Serial.parseInt  ();     //number of pulses
    int delayy_2    = Serial.parseInt  ();     //The delay before applying the pulse
    if ( == '\n') {` // ....

So, basically I type 12 numbers separated by commas in the serial monitor each time I want to give an input to my board. I want to do this with Processing instead. I have put 12 text field and drawn a rectangle as a button in Processing. I want the user to be able to type the variables in those text fields and click on the button to send the data to the Arduino board. Here’s how I have set up the text fields in processing:

println("Available serial ports:");

    port = new Serial(this, Serial.list()[0], 9600);
  cp5 = new ControlP5(this);
  cp5.addTextfield("textInput_1").setPosition(210, 80).setSize(70, 33).setAutoClear(false).setFont(f).setColor(0).setColorBackground(#f2f2f2);
  cp5.addTextfield("textInput_2").setPosition(210, 130).setSize(70, 33).setAutoClear(false).setFont(f).setColor(0).setColorBackground(#f2f2f2);
  cp5.addTextfield("textInput_3").setPosition(210, 180).setSize(70, 33).setAutoClear(false).setFont(f).setColor(0).setColorBackground(#f2f2f2);
  cp5.addTextfield("textInput_4").setPosition(210, 230).setSize(70, 33).setAutoClear(false).setFont(f).setColor(0).setColorBackground(#f2f2f2);
  cp5.addTextfield("textInput_5").setPosition(210, 280).setSize(70, 33).setAutoClear(false).setFont(f).setColor(0).setColorBackground(#f2f2f2);
  cp5.addTextfield("textInput_6").setPosition(210, 330).setSize(70, 33).setAutoClear(false).setFont(f).setColor(0).setColorBackground(#f2f2f2);
  cp5.addTextfield("textInput_7").setPosition(535, 80).setSize(70, 33).setAutoClear(false).setFont(f).setColor(0).setColorBackground(#f2f2f2);
  cp5.addTextfield("textInput_8").setPosition(535, 130).setSize(70, 33).setAutoClear(false).setFont(f).setColor(0).setColorBackground(#f2f2f2);
  cp5.addTextfield("textInput_9").setPosition(535, 180).setSize(70, 33).setAutoClear(false).setFont(f).setColor(0).setColorBackground(#f2f2f2);
  cp5.addTextfield("textInput_10").setPosition(535, 230).setSize(70, 33).setAutoClear(false).setFont(f).setColor(0).setColorBackground(#f2f2f2);
  cp5.addTextfield("textInput_11").setPosition(535, 280).setSize(70, 33).setAutoClear(false).setFont(f).setColor(0).setColorBackground(#f2f2f2);
  cp5.addTextfield("textInput_12").setPosition(535, 330).setSize(70, 33).setAutoClear(false).setFont(f).setColor(0).setColorBackground(#f2f2f2);

How do I do this? It’s my first time using processing, and I have only come across few simple examples of sending data through Processing.

Thank you in advance.

Hi Mahrokh,

I guess you’ll find some lead over there: Send 3 variable to arduino?