1 / 40

BASIC SHAPES

BASIC SHAPES. Coordinate Space. The above figure shows a line between point A (1,0) and point B (4,5). Graphing Paper. Computer. A computer screen is a grid of light elements called pixels .

stella
Télécharger la présentation

BASIC SHAPES

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. BASIC SHAPES

  2. Coordinate Space The above figure shows a line between point A (1,0) and point B (4,5).

  3. Graphing Paper Computer

  4. A computer screen is a grid of light elements called pixels. • In Processing, the x-coordinate is the distance from the left edge of the Display Window and the y-coordinate is the distance from the top edge.

  5. So, if the screen is 200×200 pixels, the upperleft is (0, 0), the center is at (100, 100), and the lower-right is (199, 199).

  6. FUNCTIONS • Functions allow you to draw shapes, set colors, calculate numbers, and to execute many other types of actions. • A function’s name is usually a lowercase word followed by parentheses • The comma-separated elements between the parentheses are called parameters, and they affect the way the function works • Some functions have no parameters and others have many

  7. Drawing a Window • size() • Defines the dimension of the display window in units of pixels. • It must be the first line in setup() • If size() is not called, the default size of the window is 100x100 pixels. 

  8. The size() function has two parameters: • first sets the width of the window and the second sets the height. Example: To draw a window that is 800 pixels wide and 600 high, write: size(800, 600);

  9. Drawing a Point • point() • Draws a point, a coordinate in space at the dimension of one pixel. • It has two parameters that define a position: the x-coordinate followed by the y-coordinate. To draw a little window and a point at the center of the screen size(480, 120); point(240, 60);

  10. Drawing a line • line() • Draws a line (a direct path between two points) to the screen To draw a line between coordinate (20, 50) and (420,110) size(480, 120); line(20, 50, 420, 110);

  11. Drawing a triangle • triangle() • A triangle is a plane created by connecting three points. • The first two arguments specify the first point, the middle two arguments specify the second point, and the last two arguments specify the third point. triangle(x1, y1, x2, y2, x3, y3);

  12. Drawing a Rectangle • rect() • Draws a rectangle to the screen. • A rectangle is a four-sided shape with every angle at ninety degrees. • The first two parameters set the location, the third sets the width, and the fourth sets the height. size(480, 120); rect(180, 60, 220, 40);

  13. Drawing a Quadrilateral • quad() • A quad is a quadrilateral, a four sided polygon. • It is similar to a rectangle, but the angles between its edges are not constrained to ninety degrees. • The first pair of parameters (x1,y1) sets the first vertex and the subsequent pairs should proceed clockwise or counter-clockwise around the defined shape. size(480, 120); quad(158, 55, 199, 14, 392, 66, 351, 107);

  14. Drawing an Ellipse • ellipse() • Draws an ellipse (oval) in the display window. • An ellipse with an equal width and height is a circle. • The first two parameters set the location, the third sets the width, and the fourth sets the height. size(480, 120); ellipse(120, 100, 110, 110);

  15. Drawing an arc • arc() • Draws an arc in the display window. • Arcs are drawn along the outer edge of an ellipse defined by the x, y, width and height parameters. • The start and stop parameters specify the angles at which to draw the arc. size(480, 120); arc(50, 55, 60, 60, PI/2, PI);

  16. NOTE: • Objects can be drawn partially (or entirely) out of the window without an error • Processing doesn’t have separate functions to make squares and circles. To make these shapes, use the same value for the width and the height parameters to ellipse() and rect().

  17. DRAWING ORDER • When a program runs, the computer starts at the top and reads each line of code until it reaches the last line and then stops. If you want a shape to be drawn on top of all other shapes, it needs to follow the others in the code. • You can think of it like painting with a brush or making a collage. The last element that you add is what’s visible on top.

  18. size(480, 120); ellipse(140, 0, 190, 190); // The rectangle draws on top of the ellipse // because it comes after in the code rect(160, 30, 260, 20);

  19. SHAPE PROPERTIES • smooth() • Draws all geometry with smooth (anti-aliased) edges. • This will slow down the frame rate of the application, but will enhance the visual refinement. • noSmooth() • Draws all geometry with jagged (aliased) edges. smooth(); ellipse(70, 48, 36, 36); noSmooth(); ellipse(30, 48, 36, 36);

  20. Setting Stroke Weight • strokeWeight() • Sets the width of the stroke used for lines, points, and the border around shapes. • All widths are set in units of pixels.  smooth(); strokeWeight(1); // Default line(20, 20, 80, 20); strokeWeight(4); // Thicker line(20, 40, 80, 40); strokeWeight(10); // Beastly line(20, 70, 80, 70);

  21. Setting Stroke Attributes • strokeJoin() • Sets the style of the joints which connect line segments. • These joints are either mitered, beveled, or rounded and specified with the corresponding parameters MITER, BEVEL, and ROUND. • The default joint is MITER. 

  22. strokeCap() • Sets the style for rendering line endings. • These ends are either squared, extended, or rounded and specified with the corresponding parameters SQUARE, PROJECT, and ROUND. • The default cap is ROUND. 

  23. size(480, 120); smooth(); strokeWeight(12); strokeJoin(ROUND); // Round the stroke corners rect(40, 25, 70, 70); strokeJoin(BEVEL); // Bevel the stroke corners rect(140, 25, 70, 70); strokeCap(SQUARE); // Square the line endings line(270, 25, 340, 95); strokeCap(ROUND); // Round the line endings line(350, 25, 420, 95);

  24. rectMode() • Modifies the location from which rectangles draw. • The default mode is CORNER • Modes are either CORNER, CORNERS, CENTER, or RADIUS rectMode(CENTER); rect(35, 35, 50, 50); rectMode(CORNER); rect(35, 35, 50, 50);

  25. ellipseMode() • Modifies the location from which ellipse draw. • The default mode is CENTER • Modes are either CORNER, CORNERS, CENTER, or RADIUS ellipseMode(CENTER); ellipse(35, 35, 50, 50); ellipseMode(CORNER); fill(102); ellipse(35, 35, 50, 50);

  26. COLOR • background() • function sets the color used for the background of the Processing window.  • The default background is light gray. background(gray) background(gray, alpha) background(value1, value2, value3) background(value1, value2, value3, alpha) background(color) background(color, alpha) background(hex) background(hex, alpha)

  27. fill() • Sets the color used to fill shapes. fill(gray) fill(gray, alpha) fill(value1, value2, value3) fill(value1, value2, value3, alpha) fill(color) fill(color, alpha) fill(hex) fill(hex, alpha)

  28. gray • number specifying value between white and black • values are from 0-255 alpha • opacity of the fill • values are from 0-255 value1 • red or hue value • values are from 0-255 value2 • green or saturation value • values are from 0-255 value3 • blue or brightness value • values are from 0-255 color • any value of the colordatatype hex • colorvalue in hexadecimal notation (i.e. #FFCC00 or 0xFFFFCC00)

  29. noStroke() • Disables drawing the stroke (outline). • If both noStroke() and noFill() are called, nothing will be drawn to the screen.

  30. noFill() • Disables filling geometry. • If both noStroke() and noFill() are called, nothing will be drawn to the screen.

  31. size(480, 120); noStroke(); smooth(); background(0, 26, 51); // Dark blue color fill(255, 0, 0); // Red color ellipse(132, 82, 200, 200); // Red circle fill(0, 255, 0); // Green color ellipse(228, -16, 200, 200); // Green circle fill(0, 0, 255); // Blue color ellipse(268, 118, 200, 200); // Blue circle

  32. Setting Transparency size(480, 120); noStroke(); smooth(); background(204, 226, 225); // Light blue color fill(255, 0, 0, 160); // Red color ellipse(132, 82, 200, 200); // Red circle fill(0, 255, 0, 160); // Green color ellipse(228, -16, 200, 200); // Green circle fill(0, 0, 255, 160); // Blue color ellipse(268, 118, 200, 200); // Blue circle

More Related