Vertices, Curves, Color, Images mostly without details

1 / 19

# Vertices, Curves, Color, Images mostly without details - PowerPoint PPT Presentation

Vertices, Curves, Color, Images mostly without details. 02/16/2010. Shapes. Shape Interesting geometric structure General outline In processing beginShape() ‏ endShape() ‏ No translation within a shape. Vertices and Modes. Vertex Corner point of a polygon

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.

## PowerPoint Slideshow about 'Vertices, Curves, Color, Images mostly without details' - zizi

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.

- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Shapes
• Shape
• Interesting geometric structure
• General outline
• In processing

beginShape()‏

endShape()‏

• No translation within a shape
Vertices and Modes
• Vertex
• Corner point of a polygon
• Interesting point in a shape
• Modes
• CLOSE
Catmull-Rom splines
• “Vertices” specified with curveVertex
• Control points
• First and last “vertices”
• Give the initial and final curves
Bézier curves
• Normally
• Every third point is anchor
• First and final points are anchors
• All other points are control
• For first anchor

vertex(ax, ay)‏

• For remaining controls and anchor triples

bezierVertix(cx1,cy1,cx2,cy2,ax,ay) ;

Bézier tricks
• For a sharp turn
• Use the last anchor as the next control
• For a closed shape
• Make the first and final anchors the same
• For a straight line
• Just use a plain vertex
Late breaking news
• Scalable Vector Graphics (SVC)‏
• XML for drawing 2D graphics
• PShape
• Processing library using SVG
• SVG editors
• Illustrator
• OpenOffice
• Amaya
Mathematical functions
• Square
• sq(x) → x2
• Square root
• sqrt(x) → x0.5
• Exponentiation
• pow(x, y) → xy
Normalization
• norm(value, low, high)‏
• How far between low and high is value?
• The result is between 0.0 and 1.0
• lexp(low, high, amt)‏
• Reverses norm
• Amt is between 0.0 and 1.0
• map(value, low1, high1, low2, high2)‏
• Maps between two value ranges
Normalization math
• norm(value, low, high)‏
• (value-low)/(high-low)‏
• lexp(low, high, amt)‏
• amt*(high-low)+low
• map(value, low1, high1, low2, high2)‏
• lexp(norm(value,low1,high1),low2,high2)‏
Why normalization?
• In Spring 2010, Embedded Systems
• Arduino board reads a number based on how far a hand is held above an infrared sensor
• Processing translates this to a “paddle” position in pong
• A thermin works similarly
• Useful is scaling information for display
Color Models
• colorMode(RGB, 255);
• // processing's default color model
• // used almost exclusively in
• // computer science applications
• colorMode(HSB, 360, 100, 100);
• // hue, saturation, value(brightness)
• // used predominately in art, available
• // in most graphics and animation packages
• My first somewhat buggy Java applet
• Web standards may use hex
• Hex digits
• 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
• Base 16
• A8 is 10*16 + 8 or 168
• In web # notation
• six hex digits gives three numbers from 0 to 255
• #808000 is 128, 128, 0
• Or olive as an HTML color name
A short little lab

size(800, 600) ;

for (int x=0; x

for (int y=0; y

stroke(map(x+y, 0, width+height, 0, 255)) ;

point(x, y) ;

}

}

What to try
• Modify the program to vary color
• Use more interesting variations
• Make the red value depend on x or x-y
• Use sq and sqrt to obtain a “non-linear” color transition
• Something like sq(x) rather than x+y
Using an image
• In processing IDE
• Add an image to the environment
• In processing code
• Display the image
• Tint the image
• In the processing IDE
• Select an image file
• Image file will be packaged with program
Displaying the image
• Declare an PImage object
• Load the file into the PImage object
• Display the image with image()‏
• Something like the following

size(300, 500) ;

PImage bandImg ;