Skip to content

Processing 4 and Arduino with Serial communication

Processing 4

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

/**
 * 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);
    }
  }
}

////////////////////////////////////////////////////////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

/**
 * 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.
 *
 * 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



Processing to P5.js Converter

moved to this tip

Last update: May 7, 2022