TECH 3601 New Media Programming

1. TECH 3601 New Media Programming Instructor: Tian (Tina) Tian

2. About me • Email: ttian@kean.edu • Office: HH-217 • Office Hour: Mon, Wed 2:30 – 4:30PM • Tue, Thu 3:15 – 5:00 PM • Website: TBA

3. About the Course • Mondays, 4:30 – 7:15 PM (one break) • Textbook: (not required) • Learning Processing: A Beginner’s Guide to Programming Images, Animation, and Interaction, by Daniel Shiffman, Morgan Kaufmann, 2008. ISBN-13: 978-0-12-373602-4 • Grading: • Midterm Exam 30% • Final Exam 30% • Lab Assignments and Homework 40% • There will be a lot of programming and you will need your creativity!

4. About Processing • Programming language within visual context since 2001. • Free, open source, runs on multi-platform. • Processing is built on top of Java. • http://processing.org/

5. Processing Development Environment (PDE)

6. Toolbars • Run, Stop, New, Open, Save, Export Applet • Try out some examples! • File -> Examples -> (Pick an example) • If an example does not run, online FAQ: http://wiki.processing.org/w/FAQ

7. When you do “save as” • Create your own name of your sketch. • E.g., MyFirstProgram.pde • Processing does not allow spaces or hyphens, and your sketch name cannot start with a number. • The folder where you store your sketches is called your “sketchbook.” • “My Documents/Processing” folder in Windows • Each Processingsketch consists of a folder.

8. Your First Program • Open a new sketch • Default name is based on date/time • In the Text window, type: • // My first Program • print(“Hello World!”); • rect(10, 10, 50, 50); • One comment and two lines of code • Run it… If no errors, • What is in the Message/Text Area? • What is in the Display window? Learning Processing: Slides by Don Smith

9. Errors • The brown line tells you what is wrong • Editor window: The line with the error is highlighted • RECT should be lower case (rect) • Note: Processing only shows one error at a time Learning Processing: Slides by Don Smith

10. Help, Find In Reference • http://processing.org/reference/ Learning Processing: Slides by Don Smith

11. Chapter 1 Pixels • Specifying coordinates • Basic shapes: point, line, rectangle, ellipse • Color: grayscale, “RGB” • Color transparency

12. Graph Paper • Every point on the screen is a pixel with location (x, y). • Command (function): line(1,0,4,5)

13. Coordinate System NOT the same as your Algebra coordinate system! • Upper left corner is 0,0 • X is ‘across’ (to right as x increases) • Y is ‘down’ (down as y increases)

14. Simple Shapes • What do we need to specify a shape? • Point: x and y • Line: Two end points? • Rectangle: Two corners? Or ??? • Ellipse: ???? Learning Processing: Slides by Don Smith

15. Point • Note that x (across) comes first • In Processing: point(x, y); • lower case ‘point’ • two ‘parameters’ in parenthesis • Semicolon; Learning Processing: Slides by Don Smith

16. Line • Two Points: A and B • In Processing: line(x1, y1, x2, y2); • lower case ‘line’ • four ‘parameters’ in parenthesis • Semicolon; Learning Processing: Slides by Don Smith

17. Rectangle 1 • From Corner: One Point for top left corner • In Processing: rect(x, y, width, height); • lower case ‘rect’ • four ‘parameters’ in parenthesis • Semicolon; • NOTE: This is the default mode (CORNER) Learning Processing: Slides by Don Smith

18. Rectangle 2 • From Center: One point, size • In Processing: • rectMode(CENTER); • rect(x, y, width, height); • Two lines of code Learning Processing: Slides by Don Smith

19. Rectangle 3 • CORNERS: Top Left point, Bottom Right point • In Processing: • rectMode(CORNERS); • rect(x1, y1, x2, y2); • Two lines of code Learning Processing: Slides by Don Smith

20. Ellipse Modes • Same as rectangle modes: • CENTER (x, y, width, height) • CORNER (x, y, width, height) • CORNERS (x1, y1, x2, y2) • Draws ellipse in a ‘Bounding box’ • Circle is a ‘special case’ of an ellipse (width = height) Learning Processing: Slides by Don Smith

21. Size Matters • You can specify the size of your ‘canvas’ at the start of a sketch • size(width, height); • Use 200 x 200 to get started Learning Processing: Slides by Don Smith

22. Color: Grayscale • You can set the color of lines and background: • 0 is black (no ‘light’) • 255 is white (most ‘light’) • Some examples in processing: • background(255); // Sets background to white • stroke(0); // Sets outline to black • fill(150); // Sets interior of a shape to grey • rect(50,50,75,100); // Draws shape with most recent settings Learning Processing: Slides by Don Smith

23. Grayscale Example • To fill or not to fill • If noFill() is set, shapes have only an outline • Default grayscales • Stroke: black (0) • Fill: while (255)

24. RGB Color • Color Mixing 101: • Red + Green = Yellow • Red + Blue = Purple • Green + Blue = Cyan (blue-green) • Red + Green + Blue = White • no colors = Black • RGB Values • Each color has a value between 0 and 255 • 0 means NONE of that color • 255 means MAX of that color Learning Processing: Slides by Don Smith

25. Manual Colors 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); • Use fill(),background() or stroke() with three parameters: • fill(red, green, blue); • Then draw a shape! Learning Processing: Slides by Don Smith

26. Picking Colors • Processing has a color selector to aid in choosing colors. • Access this via TOOLS (from the menu bar) → COLOR SELECTOR. Learning Processing: Slides by Don Smith

27. Transparency // 50% opacity. fill(255,0,0,127); // 25% opacity. fill(255,0,0,63); rect(0,150,200,40); • There is a fourth ‘parameter’ you can use: • Called ‘Alpha’ • 0 means transparent • 255 means opaque • No fourth parameter means ‘100% opacity’ Learning Processing: Slides by Don Smith

28. Summary • Pixels are points on the screen • X and Y coordinates start at 0,0 for upper left • You can set the ‘canvas’ size at the start of your ‘script’ • You can use basic shapes • Point, Line, Rectangle, Ellipse • Shapes can be drawn in different ‘modes’ • CENTER, CORNER, CORNERS • Stroke, Fill and Background can be set for: • Grayscale parameter can be used to control • RGB parameters (three) can set color • Transparency with fourth parameter of RGB Learning Processing: Slides by Don Smith

29. Now Get to Work! • Plan how to draw an alien! • Use Black lines and White fill for now • Assume size is 200 x 200 Learning Processing: Slides by Don Smith

30. Now Get to Work! • Plan a more interesting alien! • Use grayscale! • Black eyes • Gray body • Add a comment with your name at the top Learning Processing: Slides by Don Smith

31. Use your own creativity! • Design a creature using simple shapes and colors. Draw the creature by hand using only points, lines, rectangles, and ellipses. Then attempt to write the code for the creature, using the Processing commands covered in this chapter: point( ), lines( ), rect( ), ellipse( ), stroke( ) , and fill( ).