The Glass Class Lecture 5: Prototyping with Processing
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
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);!
}!
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
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
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); !
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
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);!
}!
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);!
}!
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);!
}!