graphics lecture
DESCRIPTION
Lecture on graphics for processingTRANSCRIPT
![Page 1: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/1.jpg)
Creative Programming – workshop 02
Mathias Funk (ID DI), Fall 2012
1
![Page 2: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/2.jpg)
What we do today
ShapesColors +
Coordinates
Transforming shapes
Animating shapes
2
![Page 3: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/3.jpg)
3
![Page 4: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/4.jpg)
Shapes
4
![Page 5: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/5.jpg)
First running sketch
5
![Page 6: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/6.jpg)
Coordinate system
size(200, 200);(0,0)
(200,200)
(50,150)
y
x
6
![Page 7: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/7.jpg)
Shapes
• Triangle
• Quad
• Rectangle
• Ellipse
triangle(x1, y1, x2, y2, x3, y3);
rect(x, y, width, height);
ellipse(x, y, width, height);
quad(x1, y1, x2, y2, x3, y3, x4, y4);
7
![Page 8: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/8.jpg)
Rectangle Drawing Mode
• rectMode(CORNER);
• rectMode(CORNERS);
• rectMode(CENTER);
• rectMode(RADIUS);
8
![Page 9: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/9.jpg)
Ellipse Drawing Mode
• ellipseMode(CORNER);
• ellipseMode(CORNERS);
• ellipseMode(CENTER);
• ellipseMode(RADIUS);
9
![Page 10: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/10.jpg)
Colors
10
![Page 11: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/11.jpg)
How colors work in Processing
• Color rendering in Processing works in the additive color model: RGB
• fill (<RED>, <GREEN>, <BLUE>); // all values from 0 - 255 possible
• fill(255, 0, 0); // pure red
• fill(0, 0, 130); // dark blue
• How to get yellow?
• When all values are same you will get grayscale colors (or white or black).
• “fill(120)” is a shortcut for “fill(120, 120, 120)”
11
![Page 12: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/12.jpg)
Colors...
12
![Page 13: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/13.jpg)
Colors, really
13
![Page 14: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/14.jpg)
Outline aka Border aka Stroke
noStroke(); stroke(0,255,0);
14
![Page 15: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/15.jpg)
Smoothing aka Anti-Aliasing
smooth(); noSmooth();
15
![Page 16: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/16.jpg)
Transforming shapes
16
![Page 17: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/17.jpg)
Transformations?
translate
scale
rotate
17
![Page 18: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/18.jpg)
Translate
18
![Page 19: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/19.jpg)
Scale
19
![Page 20: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/20.jpg)
Rotate
Hint: rotate(radians(30));
20
![Page 21: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/21.jpg)
Transformation UNDO
21
![Page 22: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/22.jpg)
Polygon shapes
22
![Page 23: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/23.jpg)
23
![Page 24: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/24.jpg)
Dynamics – animating shapes
24
![Page 25: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/25.jpg)
void setup( ) {size(200, 200);
}
void draw( ) {// erase backgroundbackground(0);// draw some stuff// ...
}
just once on start up
every frame,this happens
by the way: every frame starts without any transformations
25
![Page 26: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/26.jpg)
// declare variable and set start valueint x = 0;
void draw( ) {// erase backgroundbackground(0);// add 1 to variablex = x + 1;// draw a rectangle of 20 by 20 pixelsrect(x, x, 20, 20);
}
void setup( ) {size(400, 400);
}
just once on start up
every framethis happens
26
![Page 27: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/27.jpg)
Exercises
• Rotate a rectangle around the center of the window
• Rotate two rectangles around each other
• Bounce a rectangle off the screen’s borders
• Bounce a rectangle ... and change the color on every bounce
• Grow a rectangle and fade it out
27
![Page 28: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/28.jpg)
Books
Must-have
Getting Started with Processing, by By Casey Reas, Ben Fry e-Book and hard copy available from O'Reilly
Recommended-to-have
Learning Processing: A Beginner's Guide to Programming Images, Animation, and InteractionDaniel Shiffman.Published August 2008, Morgan Kaufmann. 450 pages. Paperback.Available from LUCID, or from Amazon
Programming Interactivity: A Designer's Guide to Processing, Arduino, and openFrameworks (Paperback) by Joshua Noble (Author). Very good one, covers many topics in Competency II. Available from LUCID. Also see http://programminginteractivity.com
Processing: Creative Coding and Computational Art (Foundation)Ira Greenberg (Foreword by Keith Peters).Published 28 May 2007, Friends of Ed. 840 pages. Hardcover.Available from LUCID
Making Things Talk: Practical Methods for Connecting Physical ObjectsTom Igoe.Published 28 September 2007, O'Reilly. 428 pages. Paperback.Available from LUCID
28
![Page 29: Graphics Lecture](https://reader033.vdocuments.us/reader033/viewer/2022050809/5695d04f1a28ab9b0291ef64/html5/thumbnails/29.jpg)
More help...
http://wiki.id.tue.nl/creapro/
29