Processing and Arduino EP#2 sliders

In this tutorial we will take a look at using sliders from processing to control pwm pins of the Arduino..



Processing Code:

import controlP5.*; //library
import processing.serial.*; //library
Serial port; //do not change
ControlP5 cp5; //create ControlP5 object
//int led;

void setup() {

size(300, 300); //window size, (width, height)
port = new Serial(this, “COM3”, 9600); //connected arduino port
cp5 = new ControlP5(this); //do not change

.setPosition(125, 20) //x and y upper left corner
.setSize(50, 250) //(width, height)
.setRange(0, 255) //slider range low,high
.setValue(125) //start val
.setColorBackground(color(0, 0, 255)) //top of slider color r,g,b
.setColorForeground(color(0, 255, 0)) //botom of slider color r,g,b
.setColorValue(color(255, 255, 255)) //vall color r,g,b
.setColorActive(color(255, 0, 0)) //mouse over color

void draw() {

background(0, 0, 0); // background color of window (r, g, b)

void led(int led)

Arduino Code:

#define led 11
int val = 125;
void setup() {

pinMode(led, OUTPUT); //set pin as output , red led

Serial.begin(9600); //start serial

void loop(){

if(Serial.available()){ //if data available

int val =;