Designing Applications that See Designing Applications that See - PowerPoint PPT Presentation

stanford hci group / cs377s Designing Applications that See Designing Applications that See Lecture 6: Processing Dan Maynes-Aminzade 24 January 2008 24 January 2008 Designing Applications that See http://cs377s.stanford.edu

R Reminders i d � Assignment #1 handed back next Tuesday A i t # h d d b k t T d � Assignment #2 released next Tuesday g y Lecture 6: Processing 24 January 2008 2

Learn More Tools for Your Project Learn More Tools for Your Project � CS247L h � CS247L has open lab sessions about many l b i b t useful tools for physical prototyping � Wednesdays 6-8 PM in Wallenberg 332 W d d 8 i W ll b � Upcoming Lab Sessions: � January 30: Flash � February 6: Mobile Interaction � February 13: Soldering and Electronics (meet at CCRMA instead of Wallenberg 332) � February 20: Physical Computing With d.Tools � More info: http://cs247.stanford.edu/lab.html Lecture 6: Processing 24 January 2008 3

T d Today’s Goals ’ G l � Learn the basics of the Processing L th b i f th P i environment � Understand how to produce and publish Processing applets Processing applets � Learn how to capture and process live video in the Processing framework � Experiment with color and motion tracking Experiment with color and motion tracking Lecture 6: Processing 24 January 2008 4

Outline O tli � Processing introduction P i i t d ti � Work through some Processing examples g g p � JMyron introduction � Look at basic video processing examples k b d l � Build some motion and color tracking Build some motion and color tracking examples � Add interactivity to our examples Add i t ti it t l Lecture 6: Processing 24 January 2008 5

Wh t i P What is Processing? i ? � An easy-to-use Java compiler A t J il � A development environment p � Focused on interactive graphics, sound, and animation i ti � Produces both locally-run programs and y p g web-embeddable applets � Can be used together with “real” Java � Can be used together with real Java Lecture 6: Processing 24 January 2008 6

P Processing Perspective i P ti � A development tool for exploring A d l t t l f l i multimedia programming � An educational tool for learning programming fundamentals programming fundamentals � An ideation tool or “electronic sketchbook” for trying out ideas � Targeted for designers, artists, beginning Targeted for designers, artists, beginning programmers Lecture 6: Processing 24 January 2008 7

Ni Nice Things about Processing Thi b t P i � Takes care of a lot of the annoying setup T k f l t f th i t logistics for doing video and graphics in Java � Easy to create interesting dynamic visuals programmatically programmatically � Allows quick experimentation � Strong focus on graphics, sound, and simple interactivity (unlike traditional Java interactivity (unlike traditional Java programming with a text console) Lecture 6: Processing 24 January 2008 8

G tti Getting Help on Processing H l P i � L � Look at the built-in examples k t th b ilt i l � More examples: http://www.processing.org/learning/ � Function reference: u t http://www.processing.org/reference/ � Discussion forums: � Discussion forums: http://www.processing.org/discourse/ � User-contributed code samples: http://www.processinghacks.com/ p // p g / Lecture 6: Processing 24 January 2008 9

A Available Libraries il bl Lib i � Built In � Built-In � Video � Networking � Networking � Serial Communication � Importing XML, SVG Importing XML, SVG � Exporting PDF, DXF, etc. � External Contributions te a Co t but o s � Sound: Ess, Sonia � Computer Vision: JMyron, ReacTIVision, p y BlobDetection � Interface: proCONTROLL, Interfascia � Many others M th Lecture 6: Processing 24 January 2008 10

A Q i k T A Quick Tour Lecture 6: Processing 24 January 2008 11

T Toolbar Buttons lb B tt Run Stop Stop New Open Save Save Export Lecture 6: Processing 24 January 2008 12

Sk t h Sketches Lecture 6: Processing 24 January 2008 13

T b Tabs Lecture 6: Processing 24 January 2008 14

C Coordinates di t Lecture 6: Processing 24 January 2008 15

P Programming Modes i M d � B � Basic i � For drawing static images and learning programming fundamentals i f d t l � Continuous � Provides a setup() and draw() structures and allows writing custom functions and classes and using keyboard and mouse events � Java � Most flexible mode, giving access to the full Java programming language p g g g g Lecture 6: Processing 24 January 2008 16

B Basic Mode i M d size(200, 200); i (200 200) background(255); g noStroke(); fill(255, 204, 0); i rect(30, 20, 50, 50); ( , , , ); Lecture 6: Processing 24 January 2008 17

C Continuous Mode ti M d void setup() { void setup() { size(200, 200); noStroke(); background(255); background(255); fill(0, 102, 153, 204); smooth(); noLoop(); noLoop(); } void draw() { circles(40 circles(40, 80); 80); circles(90, 70); } void circles(int x void circles(int x, int y) { int y) { ellipse(x, y, 50, 50); ellipse(x+20, y+20, 60, 60); } Lecture 6: Processing 24 January 2008 18

C Continuous Mode ti M d void setup() { void setup() { size(200, 200); rectMode(CENTER); noStroke(); fill(0, 102, 153, 204); } void draw() { background(255); b k d(255) rect(width-mouseX, height-mouseY, 50, 50); rect(mouseX, mouseY, 50, 50); ( , , , ); } Lecture 6: Processing 24 January 2008 19

J Java Mode M d public class MyDemo extends PApplet { public class MyDemo extends PApplet { void setup() { size(200, 200); rectMode(CENTER); noStroke(); fill(0, 102, 153, 204); fill(0, 102, 153, 204); } void draw() { background(255); b k d(255) rect(width-mouseX, height-mouseY, 50, 50); rect(mouseX, mouseY, 50, 50); ( , , , ); } } Lecture 6: Processing 24 January 2008 20

S Some Basic Setup Statements B i S t St t t // specifies window size // specifies window size size(200, 200); // specifies background color // p g background(102); // disables filling in shapes noFill(); // disables drawing lines noStroke(); St k () // set fill color fill(255 100 100); fill(255,100,100); // set stroke color stroke(100,255,100); ( , , ); Lecture 6: Processing 24 January 2008 21

S Some Basic Drawing Functions B i D i F ti // draw a point in the middle // draw a point in the middle // width and height store the // window size point(width/2, height/2); // draw a 20x20 rectangle rect(10,10,20,20); rect(10,10,20,20); // draw an ellipse ellipse(50,50,30,30); // draw an irregular shape // d i l h beginShape(); vertex(60, 40); vertex(160, 10); ( , ); ( , ); vertex(170, 150); vertex(60, 150); endShape(); Lecture 6: Processing 24 January 2008 22

S t Setup and Draw d D void setup() void setup() { { size(200, 200); stroke(255); stroke(255); frameRate(30); } float y = 100; void draw() { () { background(0); y = (y+1) % height; y (y ) g line(0, y, width, y); } Lecture 6: Processing 24 January 2008 23

noLoop L void setup() void setup() { { size(200, 200); stroke(255); ( ); frameRate(30); noLoop(); } float y = 100; void draw() { id d () { background(0); y = (y+1) % height; y = (y+1) % height; line(0, y, width, y); } Lecture 6: Processing 24 January 2008 24

Loop void mousePressed() { id P d() { loop(); p } Lecture 6: Processing 24 January 2008 25

R d Redraw void mousePressed() { id P d() { redraw(); } Lecture 6: Processing 24 January 2008 26

E Event Handlers t H dl mouseDragged() D d() mouseMoved() mousePressed() mouseReleased() ... keyReleased() keyPressed() Lecture 6: Processing 24 January 2008 27

M Mouse Drawing D i void setup() { void setup() { size(200, 200); background(50); background(50); } void draw() { void draw() { stroke(255); if(mousePressed) { ( ) { line(mouseX, mouseY, pmouseX, pmouseY); p , p ) } } Lecture 6: Processing 24 January 2008 28

F Functions ti void draw target(int xloc void draw_target(int xloc, int yloc, int size, int num) { float grayvalues = 255/num; float grayvalues = 255/num; float steps = size/num; for(int i=0; i<num; i++) { f (i i 0 i i ) { fill(i*grayvalues); ellipse(xloc, yloc, size-i*steps, size-i*steps); } } Lecture 6: Processing 24 January 2008 29

Oth Other Basic Concepts B i C t � These behave how you would expect Th b h h ld t (exactly as they do in Java) � Data types (int, float, boolean) � Arrays Arrays � Loops � Conditionals and Logical Operators C d l d L l O � Strings � Variables and Scoping Lecture 6: Processing 24 January 2008 30

Images size(200, 200); i (200 200) PImage img; g g img = loadImage("tennis.jpg"); i image(img, 0, 0); i image(img, 0, 0, img.width/10, g ( g, , , g / , img.height/10); Lecture 6: Processing 24 January 2008 31

C l Color Spaces S noStroke(); noStroke(); colorMode(RGB, 100); for(int i=0; i<100; i++) { for(int j=0; j<100; j++) { for(int j=0; j<100; j++) { stroke(i, j, 0); point(i, j); } } colorMode(HSB, 100); for(int i=0; i<100; i++) { for(int j=0; j<100; j++) { stroke(i, j, 100); j point(i, j); } } Lecture 6: Processing 24 January 2008 32