Week3

Size: px

Start display at page:

Download "Week3"

송 계
8 years ago
Views:

1 2015 Week 03 / _

2 Assignment 1 Flow

3 Assignment 1

4 Hello Processing 1. Hello,,,, 2. Shape rect() ellipse() 3. Color stroke() fill() color selector background() 4

5 Hello Processing 4. Interaction setup() draw() loop void size() : mousex, mousey backgroud() 5. Questions if, mousepressed 5

6 Socrative Socrative ( (ios / Android) : ITCT 6

8 (processing)? MIT Ben Fry Casey Reas -,, / / 8

9 .. ( ) 9

10 Java Processing 10

12 ( ( OpenProcessing( ( processing_basic) 12

13 tutorials examples File > Examples reference Find in Reference... 13

14 (name) (examples) (description) (syntax) (parameters) (returns) void 14

15 sketch:.pde sketch. export File > Export Application Android( ), JavaSrcipt( ) (Tools > Add Tool > Mode) 15

16 sketchbook: sketch File > Sketchbook. PC: C:\My Documents\Processing Mac: /Users/< >/Documents/Processing Preference x ( ) 16

17 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

18 menu sketch tabs toolbar text editor Toolbar Run (cmd+r / ctrl+r) Stop (esc) Debug Mode 18

19 Lab 1: My First Program sketch. // My first program Print("Hello, Processing!"); rect(10, 10, 50, 50); (run) 19

20 Lab 1: My First Program?? 20

21 (Comment) ( )... Comment : // : /* */ /** */ cmd+/ ctrl+/ 21

22 . (function). Print function print. Print print. Console Hello Processing!, rect.. (Print vs. print) (elipse vs. ellipse) quotation mark ( vs. " ) semicolon(;) 22

23 (pixels)

24 (coordinate system) Point A x 1, y 0 Point B x 4, y 5,. Point A (1, 0), Point B (4, 5) 24

25 (coordinate system) ( ) 0,0 X Y ( ) pixel 25

26 (shapes)? Point: x and y Line: two end points? Rectangle: two corners? Or??? Ellipse:???? 26

27 (Point) (4, 5) point point(x, y); point x y (parameters, ) (;) 27

28 (Line) Line :! line line(x1, y1, x2, y2); line 4 parameter ( x, y, x, y) (;) 28

29 (Rectangle) Rectangle? rectangle rect(x, y, width, height); rect 4 parameter ( x, y,, ) (;) (default mode: CORNER) 29

30 (Rectangle) Rectangle? rectangle rectmode(center); rectangle CENTER rectmode(center); rect(x, y, width, height); rectmode(corners); 30

31 (Rectangle) Rectangle? rectangle rectmode(corners); rectangle CORNERS (CORNER x) rectmode(corners); rect(x1, y1, x2, y2); rectmode(corner); 31

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

33 triangle() - arc() - quad() - curve() - reference 33

34 (canvas) size(width, height) / fullscreen( ) 100x100 size(width, height) : size(200, 200); fullscreen() 34

35 Lab 2: Drawing a Zoog line(), rect(), ellipse(). ( ) 200 x 200. : Zoog 35

36 (Color)

37 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

38 Color System: Grayscale : bit (0 or 1) : 1, x2x2x2x2x2x2x2 = 2 8 = = black ( ) 255 = white ( ) 38

39 Color System: Grayscale Example stroke(), fill(). nofill(), nostroke() / default 39

40 Lab 3: Grayscale. ( 200 x 200) 40

41 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 : (black) 255 : (?) 41

42 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

43 Color Tool Color Selector 43

44 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

45 Transparency parameter fill(r, g, b, alpha) alpha r, g, b. 0 : 255 : parameter 255, 100% 45

46 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

47 Lab 6: Colored Zoog. 47

48 Flow

49 Program Flow 49

50 Task Flow Step1:. Step2:.. Step3: (100m ) ( ) ( ) 50

51 Program Flow : (Processing) Step1:. Step2:. 51

52 Block of Code. Java, C, C++, PHP curly brace : {... } sub-step a 1b indent Auto Format ( cmd+t or ctrl+t) 52

53 static: active: active mode setup() draw() 53

54 setup() draw() setup() draw() 54

55 setup() draw(), setup(), draw() Program Starts Call setup() Call draw() No Done yet? Yes Program Ends 55

56 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

57 Tweak Run > Tweak 3.0 tweak active mode 57

58 Quiz 1 & Assignment 2

59 Quiz :00pm ( ) Week1-2 Socrative 59

60 Assignment 2: : :00pm Archive Sketch.zip : zip 60

61 Archive Sketch 61

62 Archive Sketch

63 Archive Sketch

64 Archive Sketch

65 Archive Sketch 65

66 Archive Sketch 66

67 Questions?

PRO1_09E [읽기 전용]

PRO1_09E [읽기 전용] Siemens AG 1999 All rights reserved File: PRO1_09E1 Information and - ( ) 2 3 4 5 Monitor/Modify Variables" 6 7 8 9 10 11 CPU 12 Stop 13 (Forcing) 14 (1) 15 (2) 16 : 17 : Stop 18 : 19 : (Forcing) 20 :