Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham...
Transcript of Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham...
![Page 1: Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Processing: Basic Shapes](https://reader035.fdocuments.net/reader035/viewer/2022081620/610a6a8261578b04887783a5/html5/thumbnails/1.jpg)
Dr. Sarah AbrahamUniversity of Texas at AustinComputer Science Department
Processing: Basic Shapes
Elements of GraphicsCS324e
![Page 2: Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Processing: Basic Shapes](https://reader035.fdocuments.net/reader035/viewer/2022081620/610a6a8261578b04887783a5/html5/thumbnails/2.jpg)
Processing Language
❖ Java-based syntax for achieving graphics functionality
❖ Incorporates usual programming language features:
❖ Functions
❖ Comments
❖ Expressions
![Page 3: Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Processing: Basic Shapes](https://reader035.fdocuments.net/reader035/viewer/2022081620/610a6a8261578b04887783a5/html5/thumbnails/3.jpg)
Primitive Data Types
❖ boolean
❖ byte
❖ char
❖ int
❖ float
❖ color
![Page 4: Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Processing: Basic Shapes](https://reader035.fdocuments.net/reader035/viewer/2022081620/610a6a8261578b04887783a5/html5/thumbnails/4.jpg)
Example Processing Setup
void setup() {
size(200, 200);
}
![Page 5: Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Processing: Basic Shapes](https://reader035.fdocuments.net/reader035/viewer/2022081620/610a6a8261578b04887783a5/html5/thumbnails/5.jpg)
Draw Loop
void draw() {
background(102);
}
❖ Code inside setup() runs once
❖ Code inside draw() runs as a continuous loop
![Page 6: Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Processing: Basic Shapes](https://reader035.fdocuments.net/reader035/viewer/2022081620/610a6a8261578b04887783a5/html5/thumbnails/6.jpg)
Variable scope
❖ Variables declared within a block are local to that block
❖ Global variables are declared outside of all blocks
❖ What is the relationship between global variables, setup() and draw()?
![Page 7: Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Processing: Basic Shapes](https://reader035.fdocuments.net/reader035/viewer/2022081620/610a6a8261578b04887783a5/html5/thumbnails/7.jpg)
Consider…int x = 0;
void setup() {
x += 3;
}
void draw() {
x++;
}
![Page 8: Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Processing: Basic Shapes](https://reader035.fdocuments.net/reader035/viewer/2022081620/610a6a8261578b04887783a5/html5/thumbnails/8.jpg)
Coordinate Systems❖ Coordinate systems define the “space” of the scene within the
computer
❖ Common coordinate systems:
❖ World coordinate system
❖ Object coordinate system
❖ Camera coordinate system
❖ Screen coordinate system
❖ Multiple coordinate systems allow for multiple levels of interaction
❖ Multiple coordinate systems also require conversion between systems
![Page 9: Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Processing: Basic Shapes](https://reader035.fdocuments.net/reader035/viewer/2022081620/610a6a8261578b04887783a5/html5/thumbnails/9.jpg)
Screen Coordinate System
❖ 2-D, pixel-based coordinate system
❖ Based on the size (resolution) of the screen/window
❖ Pixel position defined using (x, y) coordinate notion
![Page 10: Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Processing: Basic Shapes](https://reader035.fdocuments.net/reader035/viewer/2022081620/610a6a8261578b04887783a5/html5/thumbnails/10.jpg)
Defining Geometry in Processing❖ Function point(x,y) defines a pixel within the
window
❖ Function line(x1,y1,x2,y2) defines a line of pixels between (x1, y1) and (x2, y2)
![Page 11: Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Processing: Basic Shapes](https://reader035.fdocuments.net/reader035/viewer/2022081620/610a6a8261578b04887783a5/html5/thumbnails/11.jpg)
Shape Primitives❖ Other shape primitives in Processing:
❖ rect(a,b,c,d)
❖ ellipse(a,b,c,d)
❖ triangle(x1,y1,x2,y2,x3,y3)
❖ quad(x1,y1,x2,y2,x3,y3,x4,y4)
![Page 12: Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Processing: Basic Shapes](https://reader035.fdocuments.net/reader035/viewer/2022081620/610a6a8261578b04887783a5/html5/thumbnails/12.jpg)
Curves❖ arc(a,b,c,d,start,stop)
❖ bezier(x1,y1,x2,y2,x3,y3,x4,y4)
![Page 13: Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Processing: Basic Shapes](https://reader035.fdocuments.net/reader035/viewer/2022081620/610a6a8261578b04887783a5/html5/thumbnails/13.jpg)
❖ arc models elliptical arcs
❖ arc expects radians (0 to 2π) rather than degrees (0 to 360) by default
❖ bezier models cubic Bezier curves
❖ Bezier curves are
❖ Smooth
❖ Scalable
❖ Parametric
❖ bezierVertex can model higher order Bezier curves
❖ We will come back to this concept later in the semester
![Page 14: Dr. Sarah Abraham University of Texas at Austin Computer … · 2021. 1. 24. · Dr. Sarah Abraham University of Texas at Austin Computer Science Department Processing: Basic Shapes](https://reader035.fdocuments.net/reader035/viewer/2022081620/610a6a8261578b04887783a5/html5/thumbnails/14.jpg)
Hands-on: Creating Geometry❖ Today’s activities:
1. Create a Processing sketch
2. Use the point, line, rect, ellipse, triangle, and quad methods at least two times each
3. Create at least one shape with the arc method
4. Create at least one shape with the bezier method
• Consider: What makes bezier challenging to work directly with in code?