processing.md

# Processing and Arduino with Serial communication

## Example_1

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_2

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);

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

    }

    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_3

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);

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

    }

    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


[Processing to P5.js Converter](https://pde2js.herokuapp.com/)

![](../images/processing/Processing_to_P5.js_Converter .png)


<hr />
=== "Processing code"
    ```
    /**
     * Mouse 2D.
     *
     * Moving the mouse changes the position and size of each box.
     */

    void setup() {
      size(640, 360);
      noStroke();
      rectMode(CENTER);
    }

    void draw() {
      background(51);
      fill(255, 204);
      rect(mouseX, height/2, mouseY/2+10, mouseY/2+10);
      fill(255, 204);
      int inverseX = width-mouseX;
      int inverseY = height-mouseY;
      rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
    }
    ```

=== "P5.js code "
    ```
    /**
     * Mouse 2D.
     *
     * Moving the mouse changes the position and size of each box.
     */
    function setup() {
        initializeFields();
        createCanvas(640, 360);
        noStroke();
        rectMode(CENTER);
    }

    function draw() {
        background(51);
        fill(255, 204);
        rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
        fill(255, 204);
        var inverseX = width - mouseX;
        var inverseY = height - mouseY;
        rect(inverseX, height / 2, (inverseY / 2) + 10, (inverseY / 2) + 10);
    }

    function initializeFields() {
    }
    ```

## embed p5.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css>
<meta charset="utf-8" />

<script>
/**
* Mouse 2D.
*
* Moving the mouse changes the position and size of each box.
*/
function setup() {
  initializeFields();
  createCanvas(640, 360);
  noStroke();
  rectMode(CENTER);
}

function draw() {
  background(51);
  fill(255, 204);
  rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
  fill(255, 204);
  var inverseX = width - mouseX;
  var inverseY = height - mouseY;
  rect(inverseX, height / 2, (inverseY / 2) + 10, (inverseY / 2) + 10);
}

function initializeFields() {
}
</script>

```
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css>
<meta charset="utf-8" />

<script>
/**
* Mouse 2D.
*
* Moving the mouse changes the position and size of each box.
*/
function setup() {
  initializeFields();
  createCanvas(640, 360);
  noStroke();
  rectMode(CENTER);
}

function draw() {
  background(51);
  fill(255, 204);
  rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
  fill(255, 204);
  var inverseX = width - mouseX;
  var inverseY = height - mouseY;
  rect(inverseX, height / 2, (inverseY / 2) + 10, (inverseY / 2) + 10);
}

function initializeFields() {
}
</script>
```
## Open in other page
```
├── p5_js
│   ├── p5_js.md
│   ├── sketch.js
│   └── style.css
```

<hr />
=== "p5_js.md"
    ```
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>
        <link rel="stylesheet" type="text/css" href="../style.css">
        <meta charset="utf-8" />

      </head>
      <body>
        <main>
        </main>
        <script src="../sketch.js"></script>
      </body>
    </html>
    ```
=== "sketch.js"
    ```

    /**
     * Mouse 2D.
     *
     * Moving the mouse changes the position and size of each box.
     */
    function setup() {
        initializeFields();
        createCanvas(640, 360);
        noStroke();
        rectMode(CENTER);
    }

    function draw() {
        background(51);
        fill(255, 204);
        rect(mouseX, height / 2, mouseY / 2 + 10, mouseY / 2 + 10);
        fill(255, 204);
        var inverseX = width - mouseX;
        var inverseY = height - mouseY;
        rect(inverseX, height / 2, (inverseY / 2) + 10, (inverseY / 2) + 10);
    }

    function initializeFields() {
    }
    ```
=== "style.css"
    ```
    html, body {
      margin: 0;
      padding: 0;
    }
    canvas {
      display: block;
    }
    ```

Open in other page: [p5_js.md](./p5_js/p5_js.md)