Upload
bree
View
21
Download
0
Embed Size (px)
DESCRIPTION
PROCESSING. A computer screen is a grid of small light elements called pixels. The Interface. Predefined methods to draw shapes. Arguments: Beginning x, y position. These predefined shapes require different arguments in the parameter. Arguments: Beginning x, y position - PowerPoint PPT Presentation
Citation preview
PROCESSING
A computer screen is a grid of small light elements called pixels.
The Interface
Predefined methods to draw shapes.
These predefined shapes require different arguments in the parameter.
Arguments: Beginning x, y position Ending x, y position
Arguments: Beginning x, y position
Arguments: 1st x, y position 2nd x, y position3rd x, y position
These are connected to make the triangle
Arguments: Requires 4 x and y positions for each point.The points are connected
Arguments: Beginning point x, y and the width & height
width + beginning x = ending x Height + y = ending y
Tips to draw other shapes
• square, you need to use the rect(int x, int y, int width, int height) and use the same value for the width and height
• circle, you can use the ellipse(int x, int y, int width, int height) function with the same value for the width and height.
• triangle() function is used with six parameters. These are three x/y
coordinates for the three points of the triangle. You should try to draw these points clockwise on the screen to keep things simple.
• The quad() is similar to the triangle() function, but uses eight parameters, as a quad has four points.
Attributes of shapesattributes of shapes are controlled with other code elements.
• size(int x, int y); • background(int colorNum); // used to set the background
color of the frame• stroke(int num, int num, int num) ; // used to change the
color of a line • fill(int num); // used to fill a shape with a shade of gray• fill(int colorNum, int colorNum, int colorNum); // used to
fill a shape with a color• noFill(); • noStroke()strokeWeight(int num), strokeCap(), strokeJoin()smooth(), noSmooth(), ellipseMode(), rectMode()
Setting colors
• The intensities of each color element are specified with values between 0 and 255
• In Processing, colors are defined by the parameters to the
• background(value1, value2, value3)• fill(value1, value2, value3)• fill(value1, value2, value3, alpha)• stroke(value1, value2, value3)• stroke(value1, value2, value3, alpha)
Fill is used with shapes that have a width and height.
Stroke is used with lines
background(242, 204, 47);
RGB VALUES FOR COLOR:
Color ranges from 0 to 255
background(75, 255, 150); Would produce some color
This is the code to make these different shapes
Ice Cream Cone background(255, 162, 0);fill(0, 255, 255);ellipse(200, 92, 80, 80); // Top scoopfill(242, 0, 255);ellipse(200, 141, 80, 80); // Middle scoop!fill(255, 204, 0);ellipse(200, 187, 80, 80); // Bottom scoop!fill(0, 13, 255);rect(150, 200, 107, 112); // The cup!fill(255, 0, 0);ellipse(200, 46, 20, 20); // The cherry, yumline(200, 27, 200, 36); // And the cherry stem
Drawing with coordinatesName: __________________________________________
X = 0 Y = 0
Same x Same y
Same x Different y
Different xSame y
Drawing Custom Shapes
• Processing has a beginShape() method to draw custom shapes by specifying specific vertex x and y point on the grid.
• It will connect the points to draw the shape. End the procedure with endShape();
Work on Your Initial/Logo projectRefer to your rubric