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

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