Processing with Arduino

Connecting Processing with Arduino to Control RGB LED

In this design, the color ratio of the three blocks - red, green, and blue - will be controlled in Processing. The corresponding color ratios will be input into the RGB LED, causing it to display the corresponding colors.

Hardware Usage and Connection

1. RGB LED

The RGB LED is composed of red, green, and blue light mixed together. The maximum brightness value for each color is 255. By changing the mixing ratio of the three colors, many different colors can be obtained. Among the four pins of the RGB LED, three pins correspond to the red, green, and blue pins respectively, while the other pin is usually the VCC (Anode) or GND (Cathode) pin. The common cathode RGB LED is used in this experiment.

2. Hardware Connection

This hardware setup uses an Arduino Uno, an RGB LED, a breadboard, three 220-ohm resistors, and several wires. The circuit diagram is shown below:

Connecting Processing with Arduino

1. Relevant Settings in Processing

Processing can be connected to Arduino to achieve bidirectional communication between the two. In this experiment, we will first draw the red, green, and blue color blocks in Processing, and control the RGB LED to emit the corresponding color light by adjusting the mixing ratio of the three colors. To connect Processing with Arduino, you must choose the correct port in Processing and make a declaration.

First, determine the port of the connected Arduino board. We are using the “COM5” port here, as shown in the figure:

The code required for connecting Processing with Arduino is shown below:

2. Processing Code

We drew the red, green, and blue color blocks in Processing and by adjusting the proportions of each block, you can see the mixed color in the lower square block. The Processing code is shown below:

import processing.serial.*;
Serial myPort;  // 用于与Arduino通信的串口对象
int redDisplay, greenDisplay, blueDisplay;  // 定义R,G,B 3个颜色分量显示的长度变量
int red, green, blue;                       // 定义R，G，B三种颜色分量的值的变量
void setup() {
  size(700, 500);
  
  // 与Arduino建立连接
  String portName = "COM5";
  myPort = new Serial(this, portName, 9600);
}

void draw() {
  background(204);
  rectMode(CORNER);
  noFill();                              // 不填充颜色
  strokeWeight(2);                       // 三个进度条的边框厚度为2个像素
  stroke(255, 0, 0);                     // 描边颜色为红色
  rect(50, 100, 500, 50);                // 绘制红色分量进度条的边框
  stroke(0, 255, 0);                     // 描边颜色为绿色
  rect(50, 200, 500, 50);                // 绘制绿色分量进度条的边框
  stroke(0, 0, 255);                     // 描边颜色为蓝色
  rect(50, 300, 500, 50);                // 绘制蓝色分量进度条的边框
  fill(red, 0, 0);                       // 填充颜色为当前红色分量的值
  rect(50, 100, redDisplay, 50);         // 以当前红色分量的长度画出进度条
  fill(0, green, 0);                     // 填充颜色为当前绿色分量的值
  rect(50, 200, greenDisplay, 50);       // 以当前绿色分量的长度画出进度条
  fill(0, 0, blue);                      // 填充颜色为当前蓝色分量的值
  rect(50, 300, blueDisplay, 50);        // 以当前蓝色分量的长度画出进度条
  fill(red, green, blue);                // 以当前R,G,B分量合成的颜色值为填充，画出一个矩形
  rect(300, 400, 50, 50);
}

void mouseClicked() {                         // 定义一个鼠标事件
  if (mouseX <= 550 && mouseX >= 50) {
    if (mouseY <= 150 && mouseY >= 100) {      // 当鼠标指针在该范围时，读取mouseX的值，映射到0~255，为红色颜色分量的值
      red = (int) map(mouseX, 50, 550, 0, 255);
      redDisplay = mouseX - 50;
      
      // 发送颜色分量值给Arduino
      myPort.write(red);    // 发送红色分量值
      myPort.write(green);  // 发送绿色分量值
      myPort.write(blue);   // 发送蓝色分量值
    } else if (mouseY <= 250 && mouseY >= 200) {
      green = (int) map(mouseX, 50, 550, 0, 255);
      greenDisplay = mouseX - 50;
      
      // 发送颜色分量值给Arduino
      myPort.write(red);    // 发送红色分量值
      myPort.write(green);  // 发送绿色分量值
      myPort.write(blue);   // 发送蓝色分量值
    } else if (mouseY <= 350 && mouseY >= 300) {
      blue = (int) map(mouseX, 50, 550, 0, 255);
      blueDisplay = mouseX - 50;
      
      // 发送颜色分量值给Arduino
      myPort.write(red);    // 发送红色分量值
      myPort.write(green);  // 发送绿色分量值
      myPort.write(blue);   // 发送蓝色分量值
    }
  }
}

3. Arduino Code

After connecting Processing with Arduino and connecting the RGB LED to the respective pins, you can adjust the color of the RGB LED. The Arduino code is shown below:

int redPin = 6;    // 连接到红色LED的引脚
int greenPin = 5; // 连接到绿色LED的引脚
int bluePin = 3;  // 连接到蓝色LED的引脚

void setup() {
  pinMode(redPin, OUTPUT);
  pinMode(greenPin, OUTPUT);
  pinMode(bluePin, OUTPUT);
  Serial.begin(9600);  // 初始化串口通信
}

void loop() {
  if (Serial.available() >= 3) {  // 等待接收3个字节的数据
    int redValue = Serial.read();    // 读取红色分量值
    int greenValue = Serial.read();  // 读取绿色分量值
    int blueValue = Serial.read();   // 读取蓝色分量值
    
    // 控制LED的亮度
    analogWrite(redPin, redValue);
    analogWrite(greenPin, greenValue);
    analogWrite(bluePin, blueValue);
  }
}

After compiling the code in both Processing and Arduino, you can click “run” in Processing to start the program, as shown in the figure:

Demonstration

The following figure shows the actual demonstration of the RGB LED changing its color based on the color ratio adjustment in Processing. By adjusting the corresponding ratio, different colors can be displayed.

Reference article link for this section：

RGB LED：https://blog.csdn.net/weixin_41659040/article/details/104854670