1 / 18

Graphics Primitives in Processing: Shapes and Colors

Learn how to draw basic shapes such as rectangles, ellipses, and curves in Processing. Understand color manipulation and transparency settings. Explore Bézier curves and their mathematical concepts.

aysel
Télécharger la présentation

Graphics Primitives in Processing: Shapes and Colors

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. Graphics Primitives in Processing 1/14/2010

  2. size(x, y) ; • Sets the initial size of the screen • Units are in pixels • Pixel == picture element • Small dots on the size • 1080p has resolution of 1920×1080

  3. background(value); • background(0); • background(127); • background(255);

  4. rect(x, y, width, height); rect(50, 20, 100, 100); x and y are the upper left corner rect(10, 10, 50, 50); rect(80, 70, 60, 110);

  5. ellipse(x, y, width, height); ellipse(90, 90, 100, 100); x and y are the center ellipse(90, 90, 160, 160); ellipse(110, 120, 70, 30);

  6. Order of Function Calls ellipse(70, 70, 110, 110); rect(80, 80, 100, 100); rect(80, 80, 100, 100); ellipse(70, 70, 110, 110);

  7. Other Drawing Functions triangle(x1, y1, x2, y2, x3, y3); quad(x1, y1, x2, y2, x3, y3, x4, y4); curve(x1, y1, x2, y2, x3, y3, x4, y4); arc(x, y, width, height, start, stop);

  8. arc() Start and Stop Points

  9. Grayscale: fill(value); fill(0); rect(80, 80, 100, 100); fill(255); rect(80, 80, 100, 100); fill(0); ellipse(70, 70, 110, 110);

  10. RGB Color • x,y,z is equivalent to r,g,b • Additive color model • Each parameter has a default range of 0-255 representing the intensity of light

  11. Color: fill(value); • size(300,300); • background(255); • fill(0, 255, 0); • rect(25, 25, 100, 100); • fill(0, 0, 225); • rect(100, 100, 100, 100); • fill(255, 0, 0); • ellipse(225, 225, 110, 110);

  12. Colors: stroke(value); stroke(0); rect(50, 20, 100, 100); stroke(255); fill(0); rect(50, 20, 100, 100);

  13. Transparency fill(255); rect(80, 80, 100, 100); fill(0, 100); ellipse(70, 70, 110, 110); fill(255); rect(80, 80, 100, 100); fill(0, 10); ellipse(70, 70, 110, 110);

  14. Other Color Functions noStroke(); noFill(); strokeWeight(weight);

  15. In Class Lab • Lab 2: Draw three ellipses. Draw three bezier curves. Draw three rectangles. Create a composition using at least one of each of the following shapes: rectangle, ellipse, and curves.

  16. Bézier Curves • Developed by engineer Pierre Bezier in the 70’s for Renault • Used in Adobe’s PostScript model • A cubic Bézier curve has 4 points: 2 end points and 2 control points • Demo at • http://demonstrations.wolfram.com/BezierCurves/ • http://www.idi.ntnu.no/~mlh/codebase/grafisk2/ • Jason Thielke

  17. The Math Behind the Curves • Given a Bezier curve with endpoints (x0,y0) and (x3, y3), and control points (x1, y1) and (x2, y2). • 2 equations define points on the curve. Both are evaluated for values of 0 ≤ t ≤ 1. • x(t) = axt3 +bxt2 + cxt + x0 • y(t) = ayt3 +byt2 + cyt + y0 • See the curve being mapped in the demo below http://www.moshplant.com/direct-or/bezier/bezier.html

  18. Homework 1 • Your assignment is posted in Moodle. • If you need help with Illustrator’s Bezier Curves implemented with the Pen Tool the Illustrator Help page for the Pen Tool will be helpful. • Remember that the terminology is different for Adobe’s Bezier curves: ie • Control Points are called Direction Points • End Points are called Anchor Points

More Related