Vertices, Curves, Color, Images mostly without details

Download Presentation

Vertices, Curves, Color, Images mostly without details

Loading in 2 Seconds...

- 50 Views
- Uploaded on
- Presentation posted in: General

Vertices, Curves, Color, Images mostly without details

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

Vertices, Curves, Color, Imagesmostly 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
- Interesting point in a shape

- Modes
- POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP
- 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

Hexadecimal color

- 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

Start with something like the following

size(800, 600) ;

for (int x=0; x<width; ++x) {

for (int y=0; y<height; ++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
- Load the image
- Display the image
- Tint the image

Adding the image

- In the processing IDE
- Sketch » Add File…
- Select an image file
- Download one from www.unca.edu if you want

- Image file will be packaged with program

Displaying the image

- In your processing program
- 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 ;

bandImg = loadImage("SC-RangersOpt.jpg") ;

image(bandImg, 0, 0) ;

Trying it out

- Display an image
- Make a collage of two images
- Use tint()to color your image