the glass class lecture 5: prototyping with processing
TRANSCRIPT
The Glass Class: Lecture 5: Prototyping with Processing
Feb 17th – 21st 2014
Mark Billinghurst, Gun Lee HIT Lab NZ
University of Canterbury
THE GLASS CLASS
Overview Intro to Processing Processing and Glass
Setting up, launching apps Demos
Touch Input Ketai library and other libraries
Demos
Resources
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
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
THE GLASS CLASS
THE GLASS CLASS
THE GLASS CLASS
Development Environment
THE GLASS CLASS
THE GLASS CLASS
Processing Basics
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(){!}!
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);!}!
THE GLASS CLASS
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);!! !}!!}!
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)
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
THE GLASS CLASS http://toxiclibs.org/
THE GLASS CLASS
Classes and Objects
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()
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
THE GLASS CLASS
Car Class
THE GLASS CLASS
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(); !}!
THE GLASS CLASS
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); !
THE GLASS CLASS
Graphics
THE GLASS CLASS
Programming Graphics Transformations Creating motion and animation Bitmaps and pixels Textures
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
THE GLASS CLASS
3D Graphics Two options
P3D Library OpenGL Library
P3D Simple, integrated directly into processing Lightweight 3D
OpenGL Full graphics support Complex
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();!
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();!
THE GLASS CLASS
Vertices Demo RGB Cube
Vetices and vertex fills
VertexDemo Different types of quad strips User defined drawing function
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
Processing and Glass
THE GLASS CLASS
Setting Up Have Android SDK installed Install Android Mode Need to have And
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);!}!
THE GLASS CLASS
Demo
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);!}!
THE GLASS CLASS
Demo
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;!
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;!
THE GLASS CLASS
Demo
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;!
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);!}!
THE GLASS CLASS
Sensor Demo