Skip to content
On this page

Interface and Application Programming

In this week I have tried to use Processing 4 to program a GUI application to control the LED output on a Raspberry Pi 4B.

Processing is an open-source graphical library and integrated development environment built for the electronic arts, new media art, and visual design communities with the purpose of teaching non-programmers the fundamentals of computer programming in a visual context. WIKI

Download and Install Processing 4 on Raspberry Pi

Raspberry Pi is a series of small single-board computers developed in the United Kingdom by the Raspberry Pi Foundation in association with Broadcom. The Raspberry Pi project originally leaned towards the promotion of teaching basic computer science in schools. WIKI To run Processing on a Raspberry Pi computer, we need:

  • a Raspberry Pi model 4, 3+, 3 or 2.
  • a microSD card with raspbian os installed.
  • a suitable USB power supply (2.5A are recommended for the latest model)
  • an HDMI cable to hook up the Pi to a screen or you can use SSH & VNC
  • a USB keyboard and mouse

Then follow the steps in this DOCUMENT, you will have Processing successfully installed. After installation you can open the file in terminal and turn on Processing with following code.

pi@raspberrypi:~/Downloads/processing-4.2 $ ls
core                java   processing          revisions.md
hs_err_pid7021.log  lib    processing-java     tools
install.sh          modes  replay_pid7021.log  uninstall.sh
pi@raspberrypi:~/Downloads/processing-4.2 $ ./processing

Test Example of Mouse Input

I have practiced the Processing programming with mouse input.

This code demonstrate an example of using mouse draw a black crosses along it's path and once the mouse is pressed it will white crosses.
void setup() {
  size(640, 360);
  noSmooth();
  fill(126);
  background(255);
}

void draw() {
  if (mousePressed) {
    stroke(255);
  } else {
    stroke(0);
  }
  line(mouseX-66, mouseY, mouseX+66, mouseY);
  line(mouseX, mouseY-66, mouseX, mouseY+66); 
}

Shine a LED Light

In order to use Processing directly read and write signals with Raspberry Pi GPIO pins. We need to first download a library in Tools> Manage Tools> Libraries> Search for Hardware I/O then install it.

The pinheads type on Raspberry Pi is shown figure below.

The LED light should be connected as follow.

Following code will enable you shine this LED.

import processing.io.*;
int led = 18;
void setup() {
GPIO.pinMode(led, GPIO.OUTPUT);
frameRate(0.5);
}
void draw() {
GPIO.digitalWrite(led, GPIO.LOW);
delay(500);
GPIO.digitalWrite(led, GPIO.HIGH);
delay(1000);
}

Control a LED Light with GUI

The following code plot a square button on the screen and it changes color when you use mouse to press it (Left Click Green & Light Off / Right Click Red & Light on).

import processing.io.*;
int LED = 18;
void setup()
{
  size(640, 360);
  background(0);
  rectMode(CENTER);
  frameRate(25);

  GPIO.pinMode(LED, GPIO.OUTPUT);
  fill(255, 0, 0);
  rect(width/2, height/2, 50, 50, 7);
}

void draw()
{
  if (mousePressed && (mouseButton == LEFT) && mouseX <= 346 && mouseX >=295 && mouseY <= 203 && mouseY >= 153)
  {

    fill(0, 255, 0);
    rect(width/2, height/2, 50, 50, 7);
    GPIO.digitalWrite(LED, GPIO.LOW);
    //delay(100);
  } 
  if (mousePressed && (mouseButton == RIGHT) && mouseX <= 346 && mouseX >=295 && mouseY <= 203 && mouseY >= 153)

  {
    fill(255, 0, 0);
    rect(width/2, height/2, 50, 50, 7);
    GPIO.digitalWrite(LED, GPIO.HIGH);
  }
}

The LED light will turn on and off we you press the GUI button.