2015 Week 03 / _
Assignment 1 Flow
Assignment 1
Hello Processing 1. Hello,,,, 2. Shape rect() ellipse() 3. Color stroke() fill() color selector background() 4
Hello Processing 4. Interaction setup() draw() loop void size() : mousex, mousey backgroud() 5. Questions if, mousepressed 5
Socrative Socrative (https://b.socrative.com/login/student/) (ios / Android) : ITCT 6
(processing)? MIT Ben Fry Casey Reas -,, / / 8
.. ( ) 9
Java Processing 10
(https://processing.org/exhibition/) (http://forum.processing.org/two/) OpenProcessing(http://www.openprocessing.org) (http://makeprocessing.com/ processing_basic) 12
tutorials https://processing.org/tutorials/ examples https://processing.org/examples/ File > Examples reference https://processing.org/reference/ Find in Reference... 13
(name) (examples) (description) (syntax) (parameters) (returns) void 14
sketch:.pde sketch. export File > Export Application Android( ), JavaSrcipt( ) (Tools > Add Tool > Mode) 15
sketchbook: sketch File > Sketchbook. PC: C:\My Documents\Processing Mac: /Users/< >/Documents/Processing Preference 3.0 2.x ( ) 16
menu sketch tabs toolbar text editor Menu File: New, Open, Examples, Quit,.. Edit: Undo, Copy, Paste, Auto format, Sketch: Run, Present, Tweak, Stop, Debugger: Continue, Step, Tools: Create Format, Color chooser, Archive sketch, Help: Search, Reference 17
menu sketch tabs toolbar text editor Toolbar Run (cmd+r / ctrl+r) Stop (esc) Debug Mode 18
Lab 1: My First Program sketch. // My first program Print("Hello, Processing!"); rect(10, 10, 50, 50); (run) 19
Lab 1: My First Program?? 20
(Comment) ( )... Comment : // : /* */ /** */ cmd+/ ctrl+/ 21
. (function). Print function print. Print print. Console Hello Processing!, rect.. (Print vs. print) (elipse vs. ellipse) quotation mark ( vs. " ) semicolon(;) 22
(pixels)
(coordinate system) Point A x 1, y 0 Point B x 4, y 5,. Point A (1, 0), Point B (4, 5) 24
(coordinate system) ( ) 0,0 X Y ( ) pixel 25
(shapes)? Point: x and y Line: two end points? Rectangle: two corners? Or??? Ellipse:???? 26
(Point) (4, 5) point point(x, y); point x y (parameters, ) (;) 27
(Line) Line :! line line(x1, y1, x2, y2); line 4 parameter ( x, y, x, y) (;) 28
(Rectangle) Rectangle? rectangle rect(x, y, width, height); rect 4 parameter ( x, y,, ) (;) (default mode: CORNER) 29
(Rectangle) Rectangle? rectangle rectmode(center); rectangle CENTER rectmode(center); rect(x, y, width, height); rectmode(corners); 30
(Rectangle) Rectangle? rectangle rectmode(corners); rectangle CORNERS (CORNER x) rectmode(corners); rect(x1, y1, x2, y2); rectmode(corner); 31
(Ellipse) Ellipse? ellipse rectangle (rectangle) ellipse ellipse(x, y, width, height); : ellipsemode(center) ellipsemode(center) width == height circle ellipse(x1, y1, x2, y2); ellipsemode(corners); ellipse(x1, y1, x2, y2); 32
triangle() - arc() - quad() - curve() - reference 33
(canvas) size(width, height) / fullscreen( ) 100x100 size(width, height) : size(200, 200); fullscreen() 34
Lab 2: Drawing a Zoog line(), rect(), ellipse(). ( ) 200 x 200. : Zoog 35
(Color)
Zoog Zoog... background(255); // Sets background to white stroke(0); // Sets outline to black fill(150); // Sets interior of a shape to grey 255, 0, 150 (parameter)? RGB value 37
Color System: Grayscale : bit (0 or 1) : 1, 0 2 8. 2x2x2x2x2x2x2x2 = 2 8 = 256 0 = black ( ) 255 = white ( ) 38
Color System: Grayscale Example stroke(), fill(). nofill(), nostroke() / default 39
Lab 3: Grayscale. ( 200 x 200) 40
Color System: RGB Color 3 Red + Green = Yellow Red + Blue = Purple Green + Blue = Cyan (blue-green) Red + Green + Blue = White no colors = Black RGB Values (R,G,B) grayscale 0-255 256. 0 : (black) 255 : (?) 41
Color System: RGB Color Example fill(),background(), stroke() parameter. fill(red, green, blue);. background(255); nostroke(); fill(255,0,0); // Bright red ellipse(20,20,16,16); fill(127,0,0); // Dark red ellipse(40,20,16,16); fill(255,200,200); // Pink (pale red) ellipse(60,20,16,16); 42
Color Tool Color Selector 43
Lab 4: Color. background( ); fill(,, ); ellipse(20,40,16,16); fill(,, ); ellipse(40,40,16,16); fill(,, ); ellipse(60,40,16,16); // bright green // dark purple // yellow 44
Transparency parameter fill(r, g, b, alpha) alpha r, g, b. 0 : 255 : parameter 255, 100% 45
Lab 5: Transparency transparency. size(200,200); background(0); nostroke(); fill(0,0,255); rect(0,0,100,200); fill(255,0,0,255); //100% opacity rect(0,0,200,40); fill(255,0,0,191); //75% opacity rect(0,50,200,40); fill(255,0,0,127); //50% opacity rect(0,100,200,40); fill(255,0,0,63); //25% opacity rect(0,150,200,40); 46
Lab 6: Colored Zoog. 47
Flow
Program Flow 49
Task Flow Step1:. Step2:.. Step3: (100m ) ( ) ( ) 50
Program Flow : (Processing) Step1:. Step2:. 51
Block of Code. Java, C, C++, PHP curly brace : {... } sub-step. 1 2 1a 1b indent Auto Format ( cmd+t or ctrl+t) 52
static: active: active mode setup() draw() 53
setup() draw() setup() draw() 54
setup() draw(), setup(), draw() Program Starts Call setup() Call draw() No Done yet? Yes Program Ends 55
Lab 7 : active mode void setup() { // Set the size of the window size(200,200); } void draw() { // Draw a white background background(255); setup() runs first one time. size() should always be first line of setup() since Processing w i l l n o t b e a b l e to do anything before the window size if specified. draw() loops continuously until you close the sketch window. // Set CENTER mode ellipsemode(center); rectmode(center); // Draw Zoog's body stroke(0); fill(150); rect(100,100,20,100); // Draw Zoog's head stroke(0); fill(255); ellipse(100,70,60,60); fig. 3.3 } // Draw Zoog's eyes fill(0); ellipse(81,70,16,32); ellipse(119,70,16,32); // Draw Zoog's legs stroke(0); line(90,150,80,160); line(110,150,120,160); 56
Tweak Run > Tweak 3.0 tweak active mode 57
Quiz 1 & Assignment 2
Quiz 1 2015-10-05 3:00pm ( ) Week1-2 Socrative 59
Assignment 2: : 2015-10-04 10:00pm Archive Sketch.zip : 2014-31378.zip 60
Archive Sketch 61
Archive Sketch
Archive Sketch
Archive Sketch
Archive Sketch 65
Archive Sketch 66
Questions?