JOB SHEET P2 :

ANTARMUKA ARDUINO DAN PROCESSING

1

Tujuan Praktek :
Mahasiswa mampu membuat aplikasi antarmuka Arduino dan Processing.

Daftar Perangkat/Komponen :
No

Perangkat/Komponen

Jumlah

No

Perangkat/Komponen

Jumlah

Komputer/Laptop

RGB LED

Board Arduino Uno

Resistor 470 untuk RGB LED

Kabel USB A-B

Protoboard

Potensiometer 10k

Kabel jumper

Push Button

Secukupnya

Page 1 of 11 | Job SheetP2 : Antarmuka Arduino dan Processing

Kegiatan Praktek Uji Coba dan Analisis Sketch

P2.1 Pengendalian tampilan Processing dari Potensiometer di Arduino
Arduino
// Sketch P2.1a : Kirim data pot ke Proc.
// Copyright 2013 Jeremy Blum
//Sending POT value to the computer
const int POT=0; //Pot on Analog Pin 0
int val; //For holding mapped pot value
void setup()
{
Serial.begin(9600); //Start Serial
}
void loop()
{
val =
map(analogRead(POT),0,1023,0,255);
Serial.println(val); //Send value
delay(50);
}

Processing
// Sketch P2.1p : Baca data pot dan ubah warna
// layar Processing
// Copyright 2013 Jeremy Blum
//Import and initialize serial port library
import processing.serial.*;
Serial port;
float brightness = 0; //For holding value from pot
void setup()
{
size(500,500); //Window size
port = new Serial(this,"/dev/ttyACM0",9600);
port.bufferUntil('\n'); //Setup port to read
}
void draw()
{
background(0,0,brightness); //Updates the window
}
void serialEvent (Serial port)
{
//Gets val
brightness = float(port.readStringUntil('\n'));
}

Page 2 of 11 | Job SheetP2 : Antarmuka Arduino dan Processing

P2.2 Pengendalian warna RGB LED di Arduino dari Processing

Arduino

Processing

// Sketch P2.2a :Kendali RGB LED dari Proc.

// Copyright 2013 Jeremy Blum

// Sketch P2.2p : Set warna RGB LED

// Copyright 2013 Jeremy Blum

//Sending Multiple Variables at Once

//Define LED Pins
const int RED =11;
const int GREEN =10;
const int BLUE =9;

import processing.serial.*; //Import Serial Lib.

PImage img;
//Image Object
Serial port;
//Serial Port Object

//Variables for RGB levels

int rval = 0;
int gval = 0;
int bval = 0;
void setup()
{
Serial.begin(9600); // 9600 baud

//Set pins as outputs

pinMode(RED, OUTPUT);
pinMode(GREEN, OUTPUT);
pinMode(BLUE, OUTPUT);

void loop()
{
//Keep working as long as data is in buffer
while (Serial.available() > 0)

void setup()
{
size(640,256); //Size of HSV image
img = loadImage("hsv.jpg"); //Load in back image
//Open serial port
port = new Serial(this, "/dev/ttyACM0", 9600);
}
void draw()
{
background(0); //Black Background
image(img,0,0); //Overlay image
}
void mousePressed()
{
color c = get(mouseX, mouseY); //Get the RGB
// color where mouse was pressed
String colors = int(red(c))+","+int(green(c))
+","+int(blue(c))+"\n"; //extract values from clr.
print(colors); //print colors for debugging

Page 3 of 11 | Job SheetP2 : Antarmuka Arduino dan Processing

rval = Serial.parseInt(); //1st int

gval = Serial.parseInt(); //2nd int
bval = Serial.parseInt(); //3rd int

port.write(colors); //Send values to Arduino

if (Serial.read() == '\n') //done transmt

{
//set LED
analogWrite(RED, rval);
analogWrite(GREEN, gval);
analogWrite(BLUE, bval);
}

P2.3 Simple Video Game

Arduino
/*
* Uses internal pullups to read 4 pushbutton
states,
* Comunicate the state of the buttons using
serial interface
*/
#define IN1 2 // fire
#define IN2 3 // right
#define IN3 4 // up
#define IN4 5 // left
#define IN5 6 // down

Processing
import processing.serial.*;
Serial myPort; // Create object from Serial
int state = 31;
int fire = 1;
int right = 1;
int up = 1;
int left = 1;
int down = 1;

Page 4 of 11 | Job SheetP2 : Antarmuka Arduino dan Processing

int state1 = HIGH;

int state2 = HIGH;
int state3 = HIGH;
int state4 = HIGH;
int state5 = HIGH;
void setup()
{
Serial.begin(9600);
digitalWrite(IN1, HIGH); // enable pullup res
digitalWrite(IN2, HIGH); // enable pullup res
digitalWrite(IN3, HIGH); // enable pullup res
digitalWrite(IN4, HIGH); // enable pullup res
digitalWrite(IN5, HIGH); // enable pullup res
}
void loop()
{
delay(10); // debounces switches
int val1 = digitalRead(IN1);
int val2 = digitalRead(IN2);
int val3 = digitalRead(IN3);
int val4 = digitalRead(IN4);
int val5 = digitalRead(IN5);
// check if we had a change in state
if(state1 != val1 || state2 != val2 || state3
!= val3 || state4 != val4 || state5 != val5)
{
state1 = val1;
state2 = val2;
state3 = val3;
state4 = val4;

int x = 275;
int y = 275;
int c = 0;
void setup()
{
size(600, 600);
myPort=new Serial(this,"/dev/ttyACM0",9600);
}
void draw()
{
if(myPort.available() > 0)
{
state = myPort.read();
println(state);
println(binary(state));
fire = state & 1;
right = (state & 2) >> 1;
up = (state & 4) >> 2;
left = (state & 8) >> 3;
down = (state & 16) >> 4;

print(fire);
print(right);
print(up);
print(left);
println(down);

c = (fire == 0) ? 250 : 0;
if(right == 0 && left == 1)

Page 5 of 11 | Job SheetP2 : Antarmuka Arduino dan Processing

state5 = val5;

/*
we create a 8 bit word (1 byte) whose 5
right bit represent from right to left
buttons fire, right, up, left, down status:
0 if pressed, 1 if not pressed
remaining bits are unused
I'm not that expert in bit operations,
there's probably a
better way (faster) to do the following.
*/

}
if(up == 0 && down == 1)
{
y = y - 2;
}
if(left == 0 && right == 1)
{
x = x - 2;
}
if(down == 0 && up == 1)
{
y = y + 2;
}

unsigned int state = (val5 << 4) | (val4 <<

3) | (val3 << 2) | (val2 << 1) | val1 ;

Serial.write(state);
}

x = x + 2;

background(255, 255, 150);

fill(c);
rect(x, y, 50, 50);

P2.4 Animasi gambar di Processing dari push button switch di Arduino

Arduino

int switchPin = 7;
int LEDPin = 13;
void setup()
{
pinMode (LEDPin, OUTPUT);

Processing

import processing.serial.*;
Serial port;
int val = 0;
int oldval = 0;
int numFrames = 15; // The number of frames
int frame = 0;

Page 6 of 11 | Job SheetP2 : Antarmuka Arduino dan Processing

digitalWrite(switchPin, HIGH);
Serial.begin(9600);

void loop()
{
if (digitalRead(switchPin) == HIGH)
{
Serial.write(0);
digitalWrite(LEDPin, LOW);
}
else
{
Serial.write(1);
digitalWrite(LEDPin, HIGH);
}
delay(100);
}

PImage[] images = new PImage[numFrames];

void setup()
{
size(400, 300);
frameRate(10);
images[0] = loadImage("money_0000.jpg");
images[1] = loadImage("money_0001.jpg");
images[2] = loadImage("money_0002.jpg");
images[3] = loadImage("money_0003.jpg");
images[4] = loadImage("money_0004.jpg");
images[5] = loadImage("money_0005.jpg");
images[6] = loadImage("money_0006.jpg");
images[7] = loadImage("money_0007.jpg");
images[8] = loadImage("money_0008.jpg");
images[9] = loadImage("money_0009.jpg");
images[10] = loadImage("money_0010.jpg");
images[11] = loadImage("money_0011.jpg");
images[12] = loadImage("money_0012.jpg");
images[13] = loadImage("money_0013.jpg");
images[14] = loadImage("money_0014.jpg");
port = new Serial(this,/dev/ttyACM0,9600);
void draw()
{
if (0 < port.available())
{
val = port.read();
}
if (val != oldval && val == 1)
{
// the line above makes sure we advance

Page 7 of 11 | Job SheetP2 : Antarmuka Arduino dan Processing

// only one frame with each pressing of

// the button
if (frame<numFrames-1)
{
frame = (frame+1);
}
else
{
frame = 0;
}

}
image(images[frame], 0, 0);
oldval = val;

P2.5 Simulasi Etch-a-Sketch

Arduino
int potPin1 = 4;
int potPin2 = 5;
int val1 = 0;
int val2 = 0;

Processing

void setup()
{
Serial.begin(9600);
}

/* Virtual Etch A Sketch using 2 Potentiometers

This program reads two analog sensors via
serial and draws their
values as X and Y
Processing Code
Christian Nold, 22 Feb 06
slightly modified by Fabian Winkler
March 2008
*/

void loop()

import processing.serial.*;

String buff = "";

Page 8 of 11 | Job Sheet P2 : Antarmuka Arduino dan Processing

val1 = analogRead(potPin1);
val2 = analogRead(potPin2);
Serial.print("A");
// Example identifier for sensor 1,
//send as character
Serial.print(val1);
// send sensor 1 value as decimal number
Serial.write(10);
// send ASCII string "10"
// ASCII 10 = newline character,
// used to separate the data strings
Serial.print("B");
// Example identifier for sensor 2,
//send as character
Serial.print(val2);
// send sensor 2 value as decimal number

Serial.write(10);
// send ASCII string "10"
// ASCII 10 = newline character,
// used to separate the data strings

String temp = "";

float temporary = 0.0;
float screenwidth = 0.0;
float xCoordinate = 0;
float yCoordinate = 0;
int val = 0;
int NEWLINE = 10;
Serial port;
void setup()
{
size(200, 200);
strokeWeight(10);
stroke(255);
smooth();
}

port = new Serial(this,/dev/ttyACM0,9600);

void draw()
{
fill(0,2); // use black with alpha 2
rectMode(CORNER);
rect(0,0,width,height);
while (port.available() > 0)
{
serialEvent(port.read());
}
point(xCoordinate, yCoordinate);
}
void serialEvent(int serial)
{
if(serial != NEWLINE)

Page 9 of 11 | Job SheetP2 : Antarmuka Arduino dan Processing

buff += char(serial);

}
else
{
if (buff.length() > 1)
{
temp = buff.substring(0, buff.length()(buff.length()-1));
// character of the sensor identified
if(temp.equals("A") == true)
{
//sensor A value
temp = buff.substring(1,buff.length());
temporary = float(temp);
xCoordinate = width/(1024/temporary);
println(xCoordinate);
}
if(temp.equals("B") == true)
{
//sensor B value
temp = buff.substring(1,buff.length());
temporary = float(temp);
yCoordinate = height/(1024/temporary);
println(yCoordinate);
}
// Clear the value of "buff"
buff = "";
}
}

Page 10 of 11 | Job SheetP2 : Antarmuka Arduino dan Processing

Do-It-Yourself(DIY) :
Buatlah sendiri aplikasi antarmuka Arduino dan Processing..
Isilah Log Book dengan gambar skematik dan analisis sketch-nya.

awagyana@gmail.com

Page 11 of 11 | Job SheetP2 : Antarmuka Arduino dan Processing