Processing Introduction

Processing

Say Hello

setup()

only run once.

draw()

will continuously repeat the action inside of the {}

1void setup(){
2size(400,400);
3println("Hello!Nan");
4
5}
6void draw(){
7println("welcome to interaction station!");
8}

copy-paste the code above and observe the message from the console.

Now, let's try to draw something

 1void setup(){
 2size(400,400);
 3//println("hello!Nan");
 4background(30,50,80);
 5
 6}
 7void draw(){
 8//println("welcome to nteraction station!");
 9//RGB Value
10stroke(30,150,140);
11line(width/2, height/2, mouseX, mouseY);
12}

Sketch --> Run

Sketch --> Tweak

Sketch --> Present

Full screen!

 1void setup(){
 2//size(400,400);
 3//println("hello!Nan");
 4fullScreen();
 5background(30,50,80);
 6
 7}
 8void draw(){
 9//println("welcome to nteraction station!");
10//RGB Value
11stroke(30,150,140);
12line(width/2, height/2, mouseX, mouseY);
13}

draw

 1void setup(){
 2//size(400,400);
 3//println("hello!Nan");
 4fullScreen();
 5background(30,50,80);
 6 
 7}
 8void draw(){
 9//println("welcome to interaction station!");
10//RGB Value
11noStroke();
12fill(0,200,0);
13
14ellipse(width/2,height/2,150,150);
15stroke(30,150,140);
16strokeWeight(2);
17line(width/2, height/2, mouseX, mouseY);
18println("mouseX:",mouseX);
19println("mouseY:",mouseY);
20if(mousePressed){
21background(30,50,80);
22}
23}

Communication with Arduino

there are two ways to get processing sketches communicating with microcontrollers.

1. the first one is to use the microcontroller as an HID (Human Interface Device), like a mouse or keyboard.

in this case, we only need to change some code in Arduino IDE.

now. we will use the X and Y values from the motion sensor on CPX to control the position of the nouse.

and left button on CPX to work as mouse left click.

 1#include "Mouse.h"
 2#include <Adafruit_CircuitPlayground.h>
 3float X, Y, Z;
 4//int leftButton;
 5bool mouseIsActive = false; 
 6int slideSwitch;
 7
 8void setup() {
 9  // put your setup code here, to run once:
10  CircuitPlayground.begin();
11  Mouse.begin();
12}
13
14void loop() {
15  //read slide switch from cpx.
16  slideSwitch = CircuitPlayground.slideSwitch();
17  // if the switch is on the CPX mouse is active, 
18  if(slideSwitch ==HIGH){
19    mouseIsActive=true;
20    }else{
21      //if the slide switch is off, the cpx mouse will be off
22      mouseIsActive=false;
23      }
24
25  //read the leftButton from cpx
26  int leftButton = CircuitPlayground.leftButton();
27  //x and y position from motion sensor
28  X = CircuitPlayground.motionX();
29  Y = CircuitPlayground.motionY();
30
31  //int xReading=map(x,-1,1,0,100);
32   // if the mouse control state is active, move the mouse with motion sensor X and Y value.
33  if (mouseIsActive) {
34    Mouse.move(X*2, Y*2, 0);
35  }
36
37 // if the mouse is not pressed, press it:
38  if (leftButton==HIGH){
39    if (!Mouse.isPressed(MOUSE_LEFT)) {
40      Mouse.press(MOUSE_LEFT);
41     }
42    }else{  // else the mouse button is not pressed:
43      if (Mouse.isPressed(MOUSE_LEFT)) {
44      Mouse.release(MOUSE_LEFT);
45    }
46      }
47  delay(5);
48}

2. however, sometimes, you want to send data directly from a microcontroller to processing.

in this case, we need to do write few lines of code in both Arduino and processing.

in Arduino IDE:

in Processing:

Image sequence:

 1int numImages = 115; // total number of images
 2int startNumImage = 1; // first number in sequence
 3
 4PImage[] images = new PImage[numImages]; // the images will be stored in this list
 5
 6// setup is executed once, when the program started
 7void setup() {
 8
 9  // size of the window
10  //size(400,400);// use size "(displayWidth, displayHeight)" for fullscreen  
11  size(displayWidth, displayHeight);
12
13  // load the image sequence
14  loadImageSequence();
15}
16
17// draw is repeatedly executed, as fast as possible, or according to frameRate setting
18void draw() {
19  background(0); // draw a black background
20
21  // map x position to an image in the sequence
22  int imgInSeq = (int)map(mouseX, 0, width, 0, numImages - 1); // map center of mass to image in sequence
23
24
25  // draw the image scaled and stretched to the window size
26  image(images[imgInSeq], 0, 0, width, height);
27}
28
29// load the image sequence
30void loadImageSequence() {
31  String filename = "";
32
33  for (int i = 0; i < numImages; i++) {
34    // STUDENT: adjust how the filename is being generated to fit the naming of your files
35    filename = "headtrack/img__" +nf(startNumImage + i, 3) + ".jpg";   
36    images[i] = loadImage(filename);
37  }
38}