1. The Glass Class:
Lecture 5: Prototyping with Processing
Feb 17th – 21st 2014
Mark Billinghurst, Gun Lee
HIT Lab NZ
University of Canterbury

2. THE GLASS CLASS
Overview
 Intro to Processing
 Processing and Glass
 Setting up, launching apps
 Demos
 Touch Input
 Ketai library and other libraries
 Demos
 Resources

3. THE GLASS CLASS
Processing
 Programming tool for Artists/Designers
 http://processing.org
 Easy to code, Free, Open source, Java based
 2D, 3D, audio/video support
 Processing For Android
 http://wiki.processing.org/w/Android
 Generates Glass Ready .apk file

4. THE GLASS CLASS
Processing - Motivation
 Language of Interaction
 Physical Manipulation
 Input using code
 Mouse Manipulation
 Presence, location, image
 Haptic interfaces and multi-touch
 Gesture
 Voice and Speech

5. THE GLASS CLASS

6. THE GLASS CLASS

7. THE GLASS CLASS
Development Environment

8. THE GLASS CLASS

9. THE GLASS CLASS
Processing Basics

10. THE GLASS CLASS
Basic Parts of a Sketch
/* Notes comment */!
//set up global variables!
float moveX = 50;!
!
//Initialize the Sketch!
void setup (){!
}!
!
//draw every frame!
void draw(){!
}!

11. THE GLASS CLASS
Sample Drawing
int m = 0;!
float s = 0;!
!
void setup(){!
size(512,512);!
background(255);!
}!
!
void draw (){!
fill(255,0,0);!
ellipse(mouseX,mouseY,s,s);!
}!
!
void mouseMoved(){!
s = 40 + 20*sin(++m/10.0f);!
}!

12. THE GLASS CLASS

13. THE GLASS CLASS
Drawing
 draw() gets called as fast as possible, unless a
frameRate is specified
 stroke() sets color of drawing outline
 fill() sets inside color of drawing
 mousePressed is true if mouse is down
 mouseX, mouseY - mouse position
!void draw() { !
!stroke(255); !
!if(mousePressed) {!
! !line(mouseX, mouseY, pmouseX, pmouseY);!
! !}!
!}!

14. THE GLASS CLASS
Processing and Drawing
 Basic Shapes
rect(x, y, width, height)!
ellipse(x, y, width, height)!
line(x1, y1, x2, y2), line(x1, y1, x2, y2, z1, z2)!
 Filling shapes - fill( )
fill(int gray), fill(color color), fill(color color, int alpha)!
 Curve
 Draws curved lines
 Vertex
 Creates shapes (beginShape, endShape)

15. THE GLASS CLASS
Importing Libraries
 Can add functionality by Importing Libraries
 java archives - .jar files
 Include import code
import processing.opengl.*;!
 Popular Libraries
 Minim - audio library
 OCD - 3D camera views
 Physics - physics engine
 bluetoothDesktop - bluetooth networking

16. THE GLASS CLASShttp://toxiclibs.org/

17. THE GLASS CLASS
Classes and Objects

18. THE GLASS CLASS
Classes and Objects
 see http://processing.org/learning/objects/
 Object
 grouping of multiple related properties and functions
 Objects are defined by Object classes
 Eg Car object
 Data
- colour, location, speed
 Functions
- drive(), draw()

19. THE GLASS CLASS
Classes
 four elements: name, data, constructor, and methods.
 Name
class myName { }!
 Data
 collection of class variables
 Constructor
 run when object created
 Methods
 class functions

20. THE GLASS CLASS
Car Class

21. THE GLASS CLASS

22. THE GLASS CLASS
Class Usage
// Step 1. Declare an object.!
Car myCar;!
!
void setup() { !
// Step 2. Initialize object.!
myCar = new Car(); !
} !
!
void draw() { !
background(255); !
// Step 3. Call methods on the object. !
myCar.drive(); !
myCar.display(); !
}!

23. THE GLASS CLASS

24. THE GLASS CLASS
Constructing Objects
 One Car
Car myCar= new Car(); !
 Two Cars
!// Creating two car objects !
!Car myCar1 = new Car(); !
!Car myCar2 = new Car(); !
 One car with initial values
Car myCar = new
Car(color(255,0,0),0,100,2); !

25. THE GLASS CLASS
Graphics

26. THE GLASS CLASS
Programming Graphics
 Transformations
 Creating motion and animation
 Bitmaps and pixels
 Textures

27. THE GLASS CLASS
Drawing Canvas
 OpenGL-y
 Mutate the canvas rendering (move the
canvas):
 translate(), scale(), rotate()
 Save and Restore the state of the canvas:
 pushMatrix(), popMatrix()
 http://ejohn.org/apps/processing.js/examples/
basic/arm.html

28. THE GLASS CLASS
3D Graphics
 Two options
 P3D Library
 OpenGL Library
 P3D
 Simple, integrated directly into processing
 Lightweight 3D
 OpenGL
 Full graphics support
 Complex

29. THE GLASS CLASS
P3D Scene
size(640, 360, P3D); !
background(0);!
lights();!
!
noStroke();!
pushMatrix();!
!translate(130, height/2, 0);!
!rotateY(1.25);!
!rotateX(-0.4);!
!box(100);!
popMatrix();!
!
noFill();!
stroke(255);!
pushMatrix();!
!translate(500, height*0.35, -200);!
!sphere(280);!
popMatrix();!

30. THE GLASS CLASS
Shapes
 beginShape(SHAPE);
 Define Vertices
 SHAPES: QUADS, QUAD_STRIP,
TRIANGLE_FAN
 endShape();
 Eg: Quads
!beginShape(QUADS);!
!fill(0, 1, 1); vertex(-1, 1, 1);!
!fill(1, 1, 1); vertex( 1, 1, 1);!
!fill(1, 0, 1); vertex( 1, -1, 1);!
!fill(0, 0, 1); vertex(-1, -1, 1);!
!endShape();!

31. THE GLASS CLASS
Vertices Demo
 RGB Cube
 Vetices and vertex fills
 VertexDemo
 Different types of quad strips
 User defined drawing function

32. THE GLASS CLASS
Transformations
 Rotation
! !rotateX(a), rotateY(a * 2.0), rotateZ(a)!
 Translation
! !translate(X,Y); translate(X,Y,Z);!
 Scale
 Push and Pop functions
 Push - Saving current coordinate system
 Pop – Restores previous coordinate system
 Eg: PushPopCubes

33. Processing and Glass

34. THE GLASS CLASS
Setting Up
 Have Android SDK installed
 Install Android Mode
 Need to have And

35. THE GLASS CLASS
Hello World
//called initially at the start of the Processing sketch!
void setup() {!
size(640, 360);!
background(0);!
} !
!
//called every frame to draw output!
void draw() {!
background(0);!
//draw a white text string showing Hello World!
fill(255);!
text("Hello World", 50, 50);!
}!

36. THE GLASS CLASS
Demo

37. THE GLASS CLASS
Hello World Image
PImage img; // Create an image variable!
!
void setup() {!
size(640, 360);!
//load the ok glass home screen image!
img = loadImage("okGlass.jpg"); // Load the image into
the program !
}!
!
void draw() {!
// Displays the image at its actual size at point (0,0)!
image(img, 0, 0);!
}!

38. THE GLASS CLASS
Demo

39. THE GLASS CLASS
Touch Pad Input
 Tap recognized as DPAD input
!void keyPressed() {!
!if (key == CODED){!
! !if (keyCode == DPAD) {!
!// Do something ..!
 Java code to capture rich motion events
 import android.view.MotionEvent;!

40. THE GLASS CLASS
Motion Event
//Glass Touch Events - reads from touch pad!
public boolean dispatchGenericMotionEvent(MotionEvent event) {!
float x = event.getX(); // get x/y coords !
float y = event.getY();!
int action = event.getActionMasked(); // get code for action!
!
switch (action) { // let us know which action code shows up!
!case MotionEvent.ACTION_DOWN:!
! !touchEvent = "DOWN";!
! !fingerTouch = 1;!
!break; !
!case MotionEvent.ACTION_MOVE:!
! !touchEvent = "MOVE";!
! !xpos = myScreenWidth-x*touchPadScaleX;!
! !ypos = y*touchPadScaleY;!
!break;!

41. THE GLASS CLASS
Demo

42. THE GLASS CLASS
Sensors
 Ketai Library for Processing
 https://code.google.com/p/ketai/
 Support all phone sensors
 GPS, Compass, Light, Camera, etc
 Include Ketai Library
 import ketai.sensors.*;!
 KetaiSensor sensor;!

43. THE GLASS CLASS
Using Sensors
 Setup in Setup( ) function
 sensor = new KetaiSensor(this);!
 sensor.start();!
 sensor.list();
 Event based sensor reading
void onAccelerometerEvent(…)!
{!
accelerometer.set(x, y, z);!
}!

44. THE GLASS CLASS
Sensor Demo