the glass class lecture 5: prototyping with processing

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

Upload: mark-billinghurst

Post on 15-May-2015

1.013 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: The Glass Class Lecture 5: Prototyping with Processing

The Glass Class: Lecture 5: Prototyping with Processing

Feb 17th – 21st 2014

Mark Billinghurst, Gun Lee HIT Lab NZ

University of Canterbury

Page 2: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Overview   Intro to Processing   Processing and Glass

  Setting up, launching apps  Demos

  Touch Input   Ketai library and other libraries

 Demos

  Resources

Page 3: The Glass Class Lecture 5: Prototyping with Processing

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

Page 4: The Glass Class Lecture 5: Prototyping with Processing

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

Page 5: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Page 6: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Page 7: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Development Environment

Page 8: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Page 9: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Processing Basics

Page 10: The Glass Class Lecture 5: Prototyping with Processing

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(){!}!

Page 11: The Glass Class Lecture 5: Prototyping with Processing

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);!}!

Page 12: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Page 13: The Glass Class Lecture 5: Prototyping with Processing

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);!! !}!!}!

Page 14: The Glass Class Lecture 5: Prototyping with Processing

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)

Page 15: The Glass Class Lecture 5: Prototyping with Processing

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

Page 16: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS http://toxiclibs.org/

Page 17: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Classes and Objects

Page 18: The Glass Class Lecture 5: Prototyping with Processing

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()

Page 19: The Glass Class Lecture 5: Prototyping with Processing

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

Page 20: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Car Class

Page 21: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Page 22: The Glass Class Lecture 5: Prototyping with Processing

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(); !}!

Page 23: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Page 24: The Glass Class Lecture 5: Prototyping with Processing

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); !

Page 25: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Graphics

Page 26: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Programming Graphics   Transformations   Creating motion and animation   Bitmaps and pixels   Textures

Page 27: The Glass Class Lecture 5: Prototyping with Processing

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

Page 28: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

3D Graphics   Two options

  P3D Library  OpenGL Library

  P3D   Simple, integrated directly into processing   Lightweight 3D

  OpenGL   Full graphics support  Complex

Page 29: The Glass Class Lecture 5: Prototyping with Processing

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();!

Page 30: The Glass Class Lecture 5: Prototyping with Processing

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();!

Page 31: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Vertices Demo   RGB Cube

  Vetices and vertex fills

  VertexDemo  Different types of quad strips  User defined drawing function

Page 32: The Glass Class Lecture 5: Prototyping with Processing

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

Page 33: The Glass Class Lecture 5: Prototyping with Processing

Processing and Glass

Page 34: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Setting Up   Have Android SDK installed   Install Android Mode   Need to have And

Page 35: The Glass Class Lecture 5: Prototyping with Processing

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);!}!

Page 36: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Demo

Page 37: The Glass Class Lecture 5: Prototyping with Processing

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);!}!

Page 38: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Demo

Page 39: The Glass Class Lecture 5: Prototyping with Processing

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;!

Page 40: The Glass Class Lecture 5: Prototyping with Processing

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;!

Page 41: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Demo

Page 42: The Glass Class Lecture 5: Prototyping with Processing

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;!

Page 43: The Glass Class Lecture 5: Prototyping with Processing

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);!}!

Page 44: The Glass Class Lecture 5: Prototyping with Processing

THE GLASS CLASS

Sensor Demo