A Simple Interactive Project with Processing on SBC

Background

I found a nice Visual Art software called 'Processing'. It can run on Windows These days, I'm trying to work on it and run a simple demo on my LattePanda. This $89 single board computer can easily handle this software! More importantly, I can plug in some sensors to make the project much more funny.

This tutorial is very easy to learn, just upload the code and you will see the magic show!

I've already upload the source code. Just download and have fun!

Github link: https://github.com/kellman616/ProcessingDemo

Hardware

• LattePanda x1

• Analog Rotation Potentiometer Sensor x1

• 7-inch 1024x600 IPS Display for LattePanda x1

• LattePanda 7-inch Capacitive Touch Panel Overlay for Display x1

Software

• Processing

• Arduino IDE

Step 1: Hardware Setup

Ensure the board is powered off, and then connect the 7-inch 1024 x 600 IPS Display and LattePanda 7-inch Capacitive Touch Panel Overlay for Display to the LattePanda via the integrated DSI connector.

1. Lift up the actuator.

2. Insert the display's FPC cable with the contacts faced downward.

3. Secure the actuator.

You now have a visual interface for your LattePanda that is powered directly from the board!Next, connect to Wi-Fi:

1. Connect the Wi-Fi antenna by plugging the round shaped end into the socket labelled “ANT” located next to the 12 x 2 GPIO pins on the board.

2. In Windows select a Wi-Fi connection by clicking the Wi-Fi icon in the system tray at the bottom right of the screen. Follow the wizard to setup a connection. As it's using the Windows interface, you are likely familiar with this process already.

Next, power on your LattePanda.

1. When plugged in, you should see the red LED indicator lights up on the underside of the board. Wait patiently for a few seconds until the LED goes out.

2. When the LED turns off, press and hold the power button for one second to turn the LattePanda on. Now, the computer is running!

Step 2: Install Processing

Here's the link.

Inputs and Outputs

Below is a basic diagram that displays all the pins:

Step 3: Yellowtail demo

I've upload the source code and you can have a try. It will repeats your strokes end-over-end. Making the best use of the screen and touch panel, It is very cool.

Step 4: Animation Control demo (Ultrasonic sensor)

In this demo, you will use a ultrasonic sensor to control the animation. So you need to upload the code to your Arduino and Processing.

The closer you approach to the sensor, the slower the animation will be. Circuit connection: Trig —> Digital Pin 2Echo —> Digital Pin 3

Arduino sketch:

const int TrigPin = 2;  
const int EchoPin = 3;  
int cm;  
void setup(){ 
Serial.begin(9600);  
pinMode(TrigPin, OUTPUT);  
pinMode(EchoPin, INPUT);  
} 
void loop(){ 
 digitalWrite(TrigPin, LOW); 
delayMicroseconds(2);  
digitalWrite(TrigPin, HIGH);  
delayMicroseconds(10);  
digitalWrite(TrigPin, LOW);  
cm = pulseIn(EchoPin, HIGH) / 58.0; 
Serial.write(cm); 
delay(100); 
} 

Processing code:

/** 
* Sequential 
* by James Paterson.   
*  
* Displaying a sequence of images creates the illusion of motion.  
* Twelve images are loaded and each is displayed individually in a loop.  
*/ 
import processing.serial.*; 
Serial serial; 
int sensorValue; 
int numFrames = 12;  // The number of frames in the animation 
int currentFrame = 0; 
PImage[] images = new PImage[numFrames]; 
void setup() { 
 serial=new Serial(this,"COM5",9600); 
 size(1080, 600); 
 frameRate(24); 
 images[0]  = loadImage("PT_anim0000.gif"); 
 images[1]  = loadImage("PT_anim0001.gif");  
 images[2]  = loadImage("PT_anim0002.gif"); 
 images[3]  = loadImage("PT_anim0003.gif");  
 images[4]  = loadImage("PT_anim0004.gif"); 
 images[5]  = loadImage("PT_anim0005.gif");  
 images[6]  = loadImage("PT_anim0006.gif"); 
 images[7]  = loadImage("PT_anim0007.gif");  
 images[8]  = loadImage("PT_anim0008.gif"); 
 images[9]  = loadImage("PT_anim0009.gif");  
 images[10] = loadImage("PT_anim0010.gif"); 
 images[11] = loadImage("PT_anim0011.gif");  
 // If you don't want to load each image separately 
 // and you know how many frames you have, you 
 // can create the filenames as the program runs. 
 // The nf() command does number formatting, which will 
 // ensure that the number is (in this case) 4 digits. 
 //for (int i = 0; i < numFrames; i++) { 
 //  String imageName = "PT_anim" + nf(i, 4) + ".gif"; 
 //  images[i] = loadImage(imageName); 
 //} 
}  
void draw() {  
 background(0); 
 if(serial.available()>0) 
 { 
   sensorValue=serial.read(); 
 } 
 frameRate(sensorValue+1); 
 currentFrame = (currentFrame+1) % numFrames;  // Use % to cycle through frames 
 int offset = 0; 
 for (int x = -100; x < width; x += images[0].width) {  
   image(images[(currentFrame+offset) % numFrames], x, -20); 
   offset+=2; 
   image(images[(currentFrame+offset) % numFrames], x, height/2); 
   offset+=2; 
 } 
} 

Step 4: Animation Control demo (Analog Rotation Potentiometer Sensor)

In this demo, you will use an Analog Rotation Potentiometer Sensor to control the Animation. So you need to upload the code to your Arduino and Processing. Rotate the sensor, the size of the baby face will change.

Circuit connection: Rotation Potentiometer Sensor Signal pin —> Analog pin 0

Arduino sketch:

int potPin = 0; 
void setup() { 
 Serial.begin(9600); 
} 
void loop() { 
 int sensorValue = analogRead(potPin); 
 Serial.write(sensorValue/4);  
 delay(100); 
} 

Processing code:

import processing.serial.*; 
Serial serial; 
int sensorValue; 
PShape bot; 
void setup() { 
 size(640, 360); 
   serial=new Serial(this,"COM5",9600); 
 // The file "bot1.svg" must be in the data folder 
 // of the current sketch to load successfully 
 bot = loadShape("bot1.svg"); 
}  
void draw() { 
 if(serial.available()>0) 
 { 
   sensorValue=serial.read(); 
 } 
 background(102); 
 translate(width/2, height/2); 
 float zoom = map(sensorValue, 0, width, 0.1, 3); 
 scale(zoom); 
 shape(bot, -140, -140); 
} 

Summary

You can also plug in sensors to make it more funny!

Arduino + Processing is very suitable for the interactive projects!

Enjoy!