1 / 20

Introduction to Graphics Primitives in Processing: Drawing Shapes and Colors

This guide explores the fundamentals of using graphics primitives in Processing. We'll cover setting the screen size, working with various shapes like rectangles, ellipses, and arcs, and manipulating colors using Grayscale and RGB models. You'll learn about coordinates, fill and stroke properties, and how to create compositions using Bézier curves. With practical examples and exercises, this resource is perfect for beginners aiming to enhance their understanding of visual programming in Processing.

lucian
Télécharger la présentation

Introduction to Graphics Primitives in Processing: Drawing 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

  2. size(x, y) ; • Sets the initial size of the screen • Units are in pixels • Pixel == picture element • Small dots on the size • 1080p (“Full HD”) 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 arc(x, y, width, height, start, stop);

  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 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.math.ubc.ca/~cass/gfx/bezier.html

  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. Curves Choices In Processing • Arcs arc(x, y, width, height, start, stop); • Spline curve(cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2); • Continuous Spline Curves beginShape(); curveVertex(40, 40); … endShape();

  19. Curves Choices In Processing • Bézier Curves bezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2); • Continuous Bézier Curves beginShape(); vertex(50, 75); // first point bezierVertex(25, 25, 125, 25, 100, 75); … endShape();

  20. Homework 1 • Your assignment is to create a self-portrait.

More Related