Processing 2 example: pushMatrix() and popMatrix()

Example of using pushMatrix() and popMatrix() of Processing 2:

void setup() {  // setup() runs once
  size(400, 300);
  background(255);
}

void draw() {
  
  pushMatrix();
  translate(200, 50);
  ellipse(50, 50, 100, 100);
  popMatrix();
  ellipse(50, 50, 100, 100);
}

Processing 2 example: translate()

Example of using translate(x, y) of Processing 2:

Processing 2 example: translate()

void setup() {  // setup() runs once
  size(400, 300);
  background(255);
}

void draw() {
  rect(50, 50, 100, 100);
  translate(200, 50);
  rect(50, 50, 100, 100);
}

Set frame rate of draw()

This example set frame rate (2 frames per second) by calling frameRate() in setup(). Also display the duration between draw() called. After frame rate set, draw() will be called in around 500ms.

Set frame rate of draw()

long lastTime;

void setup() {
  size(300, 200);
  lastTime = System.currentTimeMillis() - lastTime;
  
  frameRate(2);  //set 2 frames/sec
}

void draw() { 
  long curTime = System.currentTimeMillis();
  long duration = curTime - lastTime;
  lastTime = curTime;
  println(duration);
}

Get the time of the program has run

The following code get the number of milliseconds a program has run using millis(), then print to the text area of the Processing environment's console using println().

void setup() {
  size(300, 200);
}

void draw() { 
  int t = int(millis());
  println(t);
}

Print the time of the program has run, in millisecond.

Processing example: simple animation of sin()

Processing example: simple animation of sin()

int x = 0;

void setup(){
  size(400, 300);
  background(200);
  stroke(0);

}

void draw() {
  
  x += 1;
  if(x > width){
    x = 0;
    background(200);
  }
  
  int center = height/2;
  float angle = x * 4 * PI /width;
  int l = (int)(sin(angle)*height/2);
  line(x, center, x, l + center); 
}

Processing example: curve()

Processing example: curve()

void setup(){
  size(400, 300);
  background(0);
  stroke(255);
}

void draw() {

  noFill();
  
  if(mousePressed){
    background(0);
    point(mouseX, mouseY);
    line(80, 50, mouseX, mouseY);
    line(50, 200, 350, 250);
    curve(80, 50, mouseX, mouseY, 50, 200, 350, 250);

  }
  
}

Processing example: bezier()

Processing example: bezier()

void setup(){
  size(400, 300);
  background(0);
  stroke(255);
}

void draw() {

  noFill();
  
  if(mousePressed){
    background(0);
    point(mouseX, mouseY);
    line(80, 50, mouseX, mouseY);
    line(50, 200, 350, 250);
    bezier(80, 50, mouseX, mouseY, 50, 200, 350, 250);

  }
  
}

Processing example: Capture images of sketch with saveFrame()

saveFrame() saves a numbered sequence of images, one image each time the function is run. The following example save frames of the sketch when mouse pressed. The images will be saved in the sketch folder with name "draw-######.png".

void setup() {  // setup() runs once
  size(400, 300);
  background(0);
  stroke(255);
}

void draw() {
  if(mousePressed){
    point(mouseX, mouseY);
    
    //Saves a numbered sequence of images
    saveFrame("draw-######.png");
  }
}

sketch captured with saveFrame()

With the saved images, you can create video with Processing 2 build-in Movie Maker.

Processing example: free draw something with mouse

Free draw something with mouse

void setup() {
  size(400, 300);
  background(0);
  stroke(255);
}

void draw() {
  if(mousePressed){
    point(mouseX, mouseY);
  }
}

Processing exercise: convert image to grayscale using filter()

Example to convert image to grayscale,  black and white, using filter().

Processing exercise: convert image to grayscale using filter()

PImage myImage1, myImage2;

void setup() {
  myImage1 = loadImage("http://goo.gl/MMeu0o", "png");
  myImage2 = loadImage("http://goo.gl/MMeu0o", "png");
  myImage2.filter(GRAY);
  
  size(450, 300);
  smooth();
}

void draw() {

  image(myImage1, 0, 0);
  image(myImage2, myImage1.width, 0);

}

Processing exercise: draw rotated and translated image

Processing exercise: draw rotated and translated image

PImage myImage;

void setup() {
  myImage = loadImage("http://goo.gl/MMeu0o", "png");
  size(400, 400);
  smooth();
}

void draw() {
  //draw in rotated/translated
  rotate(PI/4.0);
  translate(100, 0);
  image(myImage, 0, 0);
  
  //back to original 
  translate(-100, 0);
  rotate(-PI/4.0);
  
  //draw image in half size
  image(myImage, 0, 0, myImage.width/2, myImage.height/2);
}

processing exercise: load image from internet

Example to load image from internet:

PImage myImage;

void setup() {
  myImage = loadImage("http://goo.gl/MMeu0o", "png");
  size(myImage.width, myImage.height);
  smooth();
}

void draw() {
  image(myImage, 0, 0);
}

processing exercise: load image from internet

processing exercise: display image

To display image in Processing, the image file(s) have to be added in sketch's "data" folder. In Processing IDE, click Sketch from the menu bar, select Add File...

Browse to select the image file, click OK.

Example code:

PImage myImage;

void setup() {
  myImage = loadImage("Arduino-er2.png");
  size(myImage.width, myImage.height);
  smooth();
}

void draw() {
  image(myImage, 0, 0);
}

processing exercise: display image

processing exercise: rectMode()

rectMode() modifies the location from which rectangles are drawn by changing the way in which parameters given to rect() are intepreted.

processing exercise: rectMode()

size(250, 250);
smooth();
strokeWeight(3);

fill(255, 0, 0);
rectMode(CORNER);  // Default Mode
/* the first two parameters of rect() as the location of one 
corner, and the third and fourth parameters as the location 
of the opposite corner.*/
rect(100, 100, 80, 80);

noFill();
stroke(200, 0, 0);  //set stroke color = red
rectMode(CENTER);
/* the first two parameters of rect() as the shape's center 
point, while the third and fourth parameters are its width 
and height. */
rect(100, 100, 80, 80);

stroke(0, 200, 0);  //set stroke color = green
rectMode(RADIUS);
/* uses the first two parameters of rect() as the shape's 
center point, but uses the third and fourth parameters to 
specify half of the shapes's width and height.*/
rect(100, 100, 80, 80);

Related: processing exercise: rect()

processing exercise: rect()

processing exercise: rect()

size(500, 300);
smooth();
strokeWeight(3);

//rect(a, b, c, d)
rect(50, 50, 100, 100);

//rect(a, b, c, d, r)
rect(200, 50, 100, 100, 20);
noFill();
rect(350, 50, 100, 100, 50);

fill(100, 100, 100);
//rect(a, b, c, d, tl, tr, br, bl)
rect(50, 200, 50, 50, 10, 0, 0, 0);
rect(150, 200, 50, 50, 0, 10, 0, 0);
rect(250, 200, 50, 50, 0, 0, 10, 0);
rect(350, 200, 50, 50, 0, 0, 0, 10);
rect(370, 220, 50, 50, 10, 0, 10, 0);
noFill();
rect(390, 240, 50, 50, 0, 10, 0, 10);

Related: processing exercise: rectMode()

processing exercise: arc()

processing exercise: arc()

size(400, 300);
smooth();
strokeWeight(3);

//arc(a, b, c, d, start, stop)
arc(50, 50, 100, 100, 0, PI*0.5);
arc(150, 50, 100, 100, 0, HALF_PI);
arc(250, 50, 100, 100, 0, TWO_PI);
arc(350, 50, 100, 100, 0, PI);

//arc(a, b, c, d, start, stop, mode)
noFill();
arc(50, 200, 80, 80, 0, PI+QUARTER_PI, OPEN);
fill(255, 0, 0);
arc(150, 200, 80, 80, 0, radians(300), CLOSE);
fill(0, 255, 0);
arc(250, 200, 80, 80, 0, PI+QUARTER_PI, CHORD);
fill(0, 0, 255);
arc(350, 200, 80, 80, 0, PI+QUARTER_PI, PIE);

Processing code sample: draw Text with Fonts

Example to draw text with installed fonts.

draw Text with Fonts

PFont fontBitstreamCharter20;
PFont fontBitstreamCharterBoldItalic20;
PFont fontDejaVuSans16;

void setup() {
  size(600, 300);
  background(255);
  
  //Create fonts
  fontBitstreamCharter20 = createFont("Bitstream Charter", 20, true);  //name, size, smooth
  fontBitstreamCharterBoldItalic20 = createFont("Bitstream Charter Bold Italic", 20);    //name, size
  fontDejaVuSans16 = createFont("DejaVu Sans", 16);          //name, size
  
  fill(0); 
  
  textFont(fontBitstreamCharter20);
  text("fontBitstreamCharter20", 10, 25);
  textFont(fontBitstreamCharter20, 16);
  text("fontBitstreamCharter20, 16", 10, 50);
  
  textFont(fontBitstreamCharterBoldItalic20);
  text("fontBitstreamCharterBoldItalic20", 10, 75);
  textFont(fontBitstreamCharterBoldItalic20, 32);
  text("fontBitstreamCharterBoldItalic20, 32", 10, 100);
  
  textFont(fontDejaVuSans16);
  text("fontDejaVuSans16", 10, 125);
  textFont(fontDejaVuSans16, 32);
  text("fontDejaVuSans16, 32", 10, 150);
}

void draw() {
}

Processing code sample: list available fonts

To list installed fonts in Processing, call the function PFont.list().

list installed fonts in Processing

void setup() {
  size(400, 300);
  background(255);

  String[] fontList = PFont.list();
  println(fontList);
}

void draw() {
}

Processing 2.0 communication with Arduino via serial

This example demonstrate how to send date via serial with Processing 2.0. It work with Arduino Due with code in last post, to send command from PC running Processing 2.0, to Arduino Due.

Processing 2.0 communication with Arduino via serial

import processing.serial.*;

Serial myArduinoPort;

int buttonA_x = 300;
int buttonA_y = 50;
int buttonA_width = 50;
int buttonA_height = 50;
int buttonA_colorR = 0xff;
int buttonA_colorG = 0x00;
int buttonA_colorB = 0x00;
 
int buttonB_x = 300;
int buttonB_y = 150;
int buttonB_width = 50;
int buttonB_height = 50;
int buttonB_r = 10;
int buttonB_color = 200;
 
int defaultColor = 150;
 
boolean buttonA_clicked = false;
boolean buttonB_clicked = false;
 
void setup() {  // setup() runs once
  size(400, 300);
  background(255);
  
  //Get serial port for Arduino
  String arduinoPort = Serial.list()[0];
  println(arduinoPort);
  myArduinoPort = new Serial(this, arduinoPort, 9600);
  
}
  
void draw() {
   
  if(buttonA_clicked){
    fill(buttonA_colorR, buttonA_colorG, buttonA_colorB);
  }else if(buttonB_clicked){
    fill(buttonB_color);
  }else{
    fill(defaultColor);
  }
  ellipse(width/2, height/2, 100, 100);
 
  fill(buttonA_colorR, buttonA_colorG, buttonA_colorB);
  rect(buttonA_x, buttonA_y, buttonA_width, buttonA_height);
   
  fill(buttonB_color);
  rect(buttonB_x, buttonB_y, buttonB_width, buttonB_height, buttonB_r);
}
 
/* The mouseClicked() function is called once after a mouse button 
 * has been pressed and then released.
 */
void mouseClicked(){
  // mouseX = x of mouse click position
  // mouseY = y of mouse click position
   
  if (mouseX >= buttonA_x && mouseX <= buttonA_x + buttonA_width && 
      mouseY >= buttonA_y && mouseY <= buttonA_y + buttonA_height) {
     buttonA_clicked = true;
     
     myArduinoPort.write("H");
   } else {
     buttonA_clicked = false;
   }
    
   if (mouseX >= buttonB_x && mouseX <= buttonB_x + buttonB_width && 
       mouseY >= buttonB_y && mouseY <= buttonB_y + buttonB_height) {
     buttonB_clicked = true;
     
     myArduinoPort.write("L");
   } else {
     buttonB_clicked = false;
   }
}

Processing code sample: detect mouse event

To detect mouse event implement mouse related callback function; mouseClicked(), mouseDragged(), mouseMoved(), mousePressed() and mouseReleased(). The system variable mouseX and mouseY contain the current X and Y coordinate of the mouse.

void setup(){
  size(400, 300);
  background(255);
}

void draw(){
}

// The mouseClicked() function is called once after a 
// mouse button has been pressed and then released.
void mouseClicked(){
  fill(0xFF, 0x00, 0x00);
  ellipse(mouseX, mouseY, 50, 50);
}

// The mouseDragged() function is called once every 
// time the mouse moves and a mouse button is pressed.
void mouseDragged(){
  fill(0x00, 0xFF, 0x00);
  ellipse(mouseX, mouseY, 50, 50);
}

// The mouseMoved() function is called every time the 
// mouse moves and a mouse button is not pressed.
void mouseMoved(){
  fill(0xFF, 0xFF, 0xFF);
  ellipse(mouseX, mouseY, 50, 50);
}

// The mousePressed() function is called once after 
// every time a mouse button is pressed. The mouseButton 
// variable (see the related reference entry) can be used 
// to determine which button has been pressed.
void mousePressed(){
  fill(0xFF, 0x00, 0xFF);
  rect(mouseX, mouseY, 50, 50);
}

// The mouseReleased() function is called every time a 
// mouse button is released.
void mouseReleased(){
  fill(0x00, 0xFF, 0xFF);
  rect(mouseX, mouseY, 50, 50);
}

detect mouse event in Processing