Vertices, Curves, Color, Images mostly without details

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

Vertices, Curves, Color, Images mostly without details