Processing¶
This is a simple tutorial where we will introduce Processing and the basic features that it has.
Introduction¶
Basics:¶
Bouncing Ball¶
This example covers the basics of Processing, how to create and use the software to create a basic interface.
float locationY = 450;
float speedY = 0;
float gravity = 0.2;
void setup() {
size(1600,900);
}
void draw() {
background(255,204,0);
fill(0,204,255);
noStroke();
translate(800,locationY);
ellipse(0,0,100,100);
locationY += speedY;
speedY += gravity;
if ((locationY >= height)) {
speedY = speedY * -0.75;
locationY = height;
}
}Drawing with the mouse¶
Creating an interactive Interface using the coordinates of the mouse.
int mouseclick = 0;
void setup() {
size(1600,900);
background(0);
}
void draw() {
if (!mousePressed) {
fill(0,20);
rect(0,0,width,height);
mouseclick = 0;
}
if (mousePressed && mouseclick == 0) {
mouseclick = 1;
background(0);
}
fill(255,255,255);
ellipse(mouseX,mouseY,100,100);
}Connecting with Arduino¶
Josep’s Interface documentation
Serial communication¶
The Arduino board (and other boards like the Barduino, NodeMCU, ATtiny…) can talk to the computer through the USB using the Serial port. This communication take place bit by bit, so it’s important to try to optimize it in a way that makes it easy for the computer, to increase the speed and accuracy.
Serial.print() vs Serial.write()¶
Both functions send information through the Serial port, but they work in a different way. To decide wich one to use, it’s important to know wich information we want to send. Serial.print() will send information as char translating your ASCII code to binary, while Serial.write(), send bytes one by one. Serial.write() is more simple and fast.
Serial.write(0x48); // H
Serial.write(0x45); // E
Serial.write(0x4C); // L
Serial.write(0x4C); // L
Serial.write(0x4F); // O
Serial.print("HELLO");
LDR interface¶
Draw the reading of the LDR
Components: * Arduino UNO * LDR * 1KΩ Resistor
Arduino code: ```arduino= void setup() { pinMode(A0,INPUT); Serial.begin(9600); }
void loop() { int lecture = analogRead(A0); Serial.println(lecture); delay(100); }
Processing Code:import processing.serial.*; String lecture = “0”; int val = 0;
Serial myPort;
void setup() { size(1600, 900); myPort = new Serial(this, “COM17”, 9600); }
void draw() { if (myPort.available() > 0) { lecture = myPort.readStringUntil(‘\n’); println(lecture); if (lecture != null) { lecture = trim(lecture); val = Integer.parseInt(lecture); } } background(20); fill(255,204,0); rect(100,350,val,200); fill(255); textSize(40); text(val, 100+(val/2), 470); }
### LDR Pro interfaceimport processing.serial.*; String lecture = “0”; int val = 0;
Serial myPort;
void setup() { size(1600,900,P3D); myPort = new Serial(this, “COM17”, 9600); }
void draw() { if (myPort.available() > 0) { lecture = myPort.readStringUntil(‘\n’); if (lecture != null) { lecture = trim(lecture); val = Integer.parseInt(lecture); } } background(0); noStroke(); map(float(val),0.0,1023.0,0.0,255.0); directionalLight(val,val,val,1,0,-val/255); translate(width/2, height/2); fill(255,204,0); sphere(200); }
### Controlling RGB interface
Components:
* Arduino UNO
* 3 LED's
* 3 Push Buttons
* 3 222 Ω Resistors
Arduino code:
```arduino=
byte mode = 0x10000000;
byte state = 0x00000000;
char lecture = 0;
void setup() {
pinMode(3, OUTPUT);
pinMode(4, OUTPUT);
pinMode(5, OUTPUT);
digitalWrite(3,HIGH);
digitalWrite(4,HIGH);
digitalWrite(5,HIGH);
Serial.begin(9600);
}
void loop() {
if (Serial.available()>0) {
lecture = Serial.read();
if (lecture == 16) {
readState();
}
else {
writeState();
}
}
}
void readState() {
pinMode(3, INPUT);
pinMode(4, INPUT);
pinMode(5, INPUT);
bitWrite(state,0,!digitalRead(3));
bitWrite(state,1,!digitalRead(4));
bitWrite(state,2,!digitalRead(5));
Serial.write(state);
}
void writeState() {
DDRD = DDRD | B01111000;
PORTD = B00111000;
PORTD &= ~(lecture << 3);
}import processing.serial.*;
int mouseR = 0;
int mouseL = 0;
int msg = 0;
int readmsg = 0;
color ModeColor = color(50);
color ModeTextColor = color(250);
color RColor = color(50);
color GColor = color(50);
color BColor = color(50);
String ModeText = "Writing";
int Mode = 0;
int rB = 0;
int gB = 0;
int bB = 0;
color ButtonTextColor = color(255);
int r = 0;
int g = 0;
int b = 0;
Serial myPort;
void setup() {
size (1600, 900);
myPort = new Serial(this, "COM17", 9600);
}
void draw() {
if ((mousePressed) && (mouseButton == LEFT) && (mouseL == 0) && overRect(650,100,300,100)) {
mouseL = 1;
r=0;
g=0;
b=0;
if (Mode == 1) {
Mode = 0;
ModeText = "Writing";
ModeColor = color(50);
ModeTextColor = color(250);
writingMode();
ButtonTextColor = color(255);
}
else if (Mode == 0) {
Mode = 1;
ModeText = "Reading";
ModeColor = color(200);
ModeTextColor = color(50);
ButtonTextColor = color(50);
RColor = color(200);
GColor = color(200);
BColor = color(200);
}
}
if (Mode == 1) {
readingMode();
}
if ((mousePressed) && (mouseButton == LEFT) && (mouseL == 0) && overRect(425,700,200,100) && Mode == 0) {
mouseL = 1;
if (rB == 0){
rB = 1;
r = 255;
RColor = color(150,0,0);
}
else if (rB == 1) {
rB = 0;
r = 0;
RColor = color(50);
}
writingMode();
}
if ((mousePressed) && (mouseButton == LEFT) && (mouseL == 0) && overRect(700,700,200,100) && Mode == 0) {
mouseL = 1;
if (gB == 0){
gB = 1;
g = 255;
GColor = color(0,150,0);
}
else if (gB == 1) {
gB = 0;
g = 0;
GColor = color(50);
}
writingMode();
}
if ((mousePressed) && (mouseButton == LEFT) && (mouseL == 0) && overRect(975,700,200,100) && Mode == 0) {
mouseL = 1;
if (bB == 0){
bB = 1;
b = 255;
BColor = color(0,0,150);
}
else if (bB == 1) {
bB = 0;
b = 0;
BColor = color(50);
}
writingMode();
}
background(r,g,b);
fill(ModeColor);
rect(650,100,300,100,30);
fill(RColor);
rect(425,700,200,100,30);
fill(GColor);
rect(700,700,200,100,30);
fill(BColor);
rect(975,700,200,100,30);
textAlign(CENTER);
textSize(60);
fill(ModeTextColor);
text(ModeText,800,170);
fill(ButtonTextColor);
text("Red",525,770);
text("Green",800,770);
text("Blue",1075,770);
if( !mousePressed && (mouseButton == LEFT) && (mouseL == 1)) {
mouseL = 0;
}
}
boolean overRect(int x, int y, int width, int height) {
if (mouseX >= x && mouseX <= x+width &&
mouseY >= y && mouseY <= y+height) {
return true;
} else {
return false;
}
}
void writingMode() {
msg = bB+2*gB+4*rB;
myPort.write(msg);
}
void readingMode() {
myPort.write(16);
if (myPort.available() >0) {
readmsg = myPort.read();
}
if ((readmsg & 1) > 0) {
b = 255;
}
else {
b=0;
}
if ((readmsg & 2) > 0) {
g = 255;
}
else {
g=0;
}
if ((readmsg & 4) > 0) {
r = 255;
}
else {
r=0;
}
}OSC + Syphon¶
- OSC: documentation here
- Syphon (only MAC): A client here
//OSC
import oscP5.*;
import netP5.*;
OscP5 oscP5;
NetAddress myRemoteLocation;
//SYPHON
import codeanticode.syphon.*;
public PGraphics canvas;
public SyphonServer server;
void settings(){
size(1280,720,P2D);
PJOGL.profile=1;
// Start OSC
oscP5 = new OscP5(this, 12000);
myRemoteLocation = new NetAddress("127.0.0.1",1234);
}
void setup(){
frameRate(60);
//Start SYPHON
server = new SyphonServer(this,"HAND");
}
void draw(){
// Send screen to another application listenting on 127.0.0.1:1234
server.sendScreen();
/* create an osc bundle */
OscBundle myBundle = new OscBundle();
/* createa new osc message object */
OscMessage myMessage = new OscMessage("category_1");
myMessage.add(appX_rightHand);
myMessage.setAddrPattern("patter_1");
myMessage.add(right_hand_opacity);
myBundle.add(myMessage);
/* reset and clear the myMessage object for refill. */
myMessage.clear();
/* refill the osc message object again */
myMessage.setAddrPattern("pattern_2");
myMessage.add(left_hand_opacity);
myBundle.add(myMessage);
/* send the osc bundle, containing 2 osc messages, to a remote location. */
/* either in 10s
myBundle.setTimetag(myBundle.now() + 10000);
/* Or inmediately */
oscP5.send(myBundle, myRemoteLocation);
}