Upcoming SlideShare
×

# The Glass Class Lecture 5: Prototyping with Processing

1,689 views

Published on

5 Likes
Statistics
Notes
• Full Name
Comment goes here.

Are you sure you want to Yes No
• Be the first to comment

Views
Total views
1,689
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
110
0
Likes
5
Embeds 0
No embeds

No notes for slide

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

1. 1. The Glass Class: Lecture 5: Prototyping with Processing Feb 17th – 21st 2014 Mark Billinghurst, Gun Lee HIT Lab NZ University of Canterbury
2. 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. 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. 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. 5. THE GLASS CLASS
6. 6. THE GLASS CLASS
7. 7. THE GLASS CLASS Development Environment
8. 8. THE GLASS CLASS
9. 9. THE GLASS CLASS Processing Basics
10. 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. 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. 12. THE GLASS CLASS
13. 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. 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. 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. 16. THE GLASS CLASShttp://toxiclibs.org/
17. 17. THE GLASS CLASS Classes and Objects
18. 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. 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. 20. THE GLASS CLASS Car Class
21. 21. THE GLASS CLASS
22. 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. 23. THE GLASS CLASS
24. 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. 25. THE GLASS CLASS Graphics
26. 26. THE GLASS CLASS Programming Graphics   Transformations   Creating motion and animation   Bitmaps and pixels   Textures
27. 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. 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. 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. 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. 31. THE GLASS CLASS Vertices Demo   RGB Cube   Vetices and vertex fills   VertexDemo   Different types of quad strips   User defined drawing function
32. 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. 33. Processing and Glass
34. 34. THE GLASS CLASS Setting Up   Have Android SDK installed   Install Android Mode   Need to have And
35. 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. 36. THE GLASS CLASS Demo
37. 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. 38. THE GLASS CLASS Demo
39. 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. 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. 41. THE GLASS CLASS Demo
42. 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. 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. 44. THE GLASS CLASS Sensor Demo