Graphics Primitives in Processing

1
Graphics Primitives in Processing

• 8/19/2009

2
Bezier Curves

• Developed by engineer Pierre Bezier in the 70s
  for Renault

• Used in Adobes PostScript model
• A cubic Bezier curve has 4 points 2 end points
  and 2 control points
• Demo at http//www.math.ucla.edu/baker/java/hoefe
  r/Bezier.htm
• Jason Thielke

3
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 lt t lt 1.
• x(t) axt3 bxt2 cxt x0
• y(t) ayt3 byt2 cyt y0
• See the curve being mapped for in the demo below
  http//www.moshplant.com/direct-or/bezier/bezier.h
  tml

4

• background(value)
• background(0)
• background(127)
• background(255)

5

• 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)

6

• 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)

7

• Order of Function Calls
• ellipse(70, 70, 110, 110)
• rect(80, 80, 100, 100)
• rect(80, 80, 100, 100)
• ellipse(70, 70, 110, 110)

8

• 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)

9
arc() Start and Stop Points
10

• Grayscale fill(value)
• fill(0)
• rect(80, 80, 100, 100)
• fill(255)
• rect(80, 80, 100, 100)
• fill(0)
• ellipse(70, 70, 110, 110)

11
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

12

• 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)

13

• Colors stroke(value)
• stroke(0)
• rect(50, 20, 100, 100)
• stroke(255)
• fill(0)
• rect(50, 20, 100, 100)

14

• 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)

15

• Other Color Functions
• noStroke()
• noFill()
• strokeWeight(weight)

16
Assignment

• Your assignment is posted in Moodle.
• If you need help with Illustrators 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
  Adobes Bezier curves ie
• Control Points are called Direction Points
• End Points are called Anchor Points

17
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.