# Processing 4 and Arduino with Serial communication

## Processing 4
[download](https://processing.org/download)

!!! attention
    Use **MacOS(Intel 64-bit)** even your mac is Apple Silicon.
    JAVA error will happen if you use MacOS(Apple Silicon)



## Basic codes

Arduino

```
void setup(){
  Serial.begin(9600);
}

void loop(){
  Serial.write(100);// 1 byte = 0-255
  delay(1000);
  Serial.write(200);// 256 goes to 0
  delay(1000);
}
```

Processing

```
import processing.serial.*;
Serial myPort;
int x;

void setup(){
  size(256, 256);// canvas size

  myPort = new Serial(this, "/dev/tty.usbmodem1411", 9600); //port
}

void draw(){
  background(255);
  ellipse(x,100,50,50); //(center_x,center_y,width,height)
}

void serialEvent(Serial p){
  x = p.read(); // read value from serial
  println(x);
}
```
## Example_1

Ref. [Distance 2D](https://processing.org/examples/distance2d.html)

<hr />
=== "Distance 2D"

    ```
    /**
     * Distance 2D.
     *
     * Move the mouse across the image to obscure and reveal the matrix.  
     * Measures the distance from the mouse to each square and sets the
     * size proportionally.
     */

    float max_distance;

    void setup() {
      size(640, 360);
      noStroke();
      max_distance = dist(0, 0, width, height);
    }

    void draw() {
      background(0);

      for(int i = 0; i <= width; i += 20) {
        for(int j = 0; j <= height; j += 20) {
          float size = dist(mouseX, mouseY, i, j);
          size = size/max_distance * 66;
          ellipse(i, j, size, size);
        }
      }
    }
    ```

=== "Distance 2D + Arduino serial"

    ```
    ////////////////////////////////////////////////////////add
    import processing.serial.*;
    Serial myPort;
    int x;
    //////////////////////////////////////////////////////added

    float max_distance;

    void setup() {
      size(640, 360);
      noStroke();
      max_distance = dist(0, 0, width, height);

      ////////////////////////////////////////////////////////add
      myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port
      //////////////////////////////////////////////////////added

    }

    void draw() {
      background(0);

      for(int i = 0; i <= width; i += 20) {
        for(int j = 0; j <= height; j += 20) {
          float size = dist(x, mouseY, i, j);//////// changed mouseX to X
          size = size/max_distance * 66;
          ellipse(i, j, size, size);
        }
      }
    }

    ////////////////////////////////////////////////////////add
    void serialEvent(Serial p){
      x = p.read(); // read value from serial
      println(x);
    }
    //////////////////////////////////////////////////////added
    ```

## Example_2

Ref. [Storing Input](https://processing.org/examples/storinginput.html)

<hr />
=== "Storing Input"
    ```
    /**
     * Storing Input.
     *
     * Move the mouse across the screen to change the position
     * of the circles. The positions of the mouse are recorded
     * into an array and played back every frame. Between each
     * frame, the newest value are added to the end of each array
     * and the oldest value is deleted.
     */

    int num = 60;
    float mx[] = new float[num];
    float my[] = new float[num];

    void setup() {
      size(640, 360);
      noStroke();
      fill(255, 153);
    }

    void draw() {
      background(51);

      // Cycle through the array, using a different entry on each frame.
      // Using modulo (%) like this is faster than moving all the values over.
      int which = frameCount % num;
      mx[which] = mouseX;
      my[which] = mouseY;

      for (int i = 0; i < num; i++) {
        // which+1 is the smallest (the oldest in the array)
        int index = (which+1 + i) % num;
        ellipse(mx[index], my[index], i, i);
      }
    }
    ```

=== "Storing Input + Arduino serial"

    ```
    /**
     * Storing Input.
     *
     * Move the mouse across the screen to change the position
     * of the circles. The positions of the mouse are recorded
     * into an array and played back every frame. Between each
     * frame, the newest value are added to the end of each array
     * and the oldest value is deleted.
     */

     ////////////////////////////////////////////////////////add
    import processing.serial.*;
    Serial myPort;
    int x;
    //////////////////////////////////////////////////////added

    int num = 60;
    float mx[] = new float[num];
    float my[] = new float[num];

    void setup() {
      size(640, 360);
      noStroke();
      fill(255, 153);

      ////////////////////////////////////////////////////////add
      myPort = new Serial(this, "/dev/cu.usbmodem14401", 9600); //port
      //////////////////////////////////////////////////////added

    }

    void draw() {
      background(51);

      // Cycle through the array, using a different entry on each frame.
      // Using modulo (%) like this is faster than moving all the values over.
      int which = frameCount % num;
      mx[which] = x;//mouseX;////// changed mouseX to X
      my[which] = mouseY;

      for (int i = 0; i < num; i++) {
        // which+1 is the smallest (the oldest in the array)
        int index = (which+1 + i) % num;
        ellipse(mx[index], my[index], i, i);
      }
    }



    ////////////////////////////////////////////////////////add
    void serialEvent(Serial p){
      x = p.read(); // read value from serial
      println(x);
    }
    //////////////////////////////////////////////////////added
    ```

## Export as Applications

![](../images/processing/processing_export_app.png)  
![](../images/processing/processing_export_options.png)  
![](../images/processing/processing_app_made.png)


<video width="400"  controls>
  <source src="../../images/processing/app.mp4" type="video/mp4">
</video>


## Processing to P5.js Converter

moved to [this tip](./processing_to_p5_js.md)