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 –Interesting point in a shape Modes –POINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIPPOINTS, LINES, TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP, QUADS, QUAD_STRIP –CLOSECLOSE

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( cx 1, cy 1, cx 2, cy 2, 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) → x 2 Square root –sqrt(x) → x 0.5 Exponentiation –pow(x, y) → x y

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 pongpong A thermin works similarlythermin Useful is scaling information for display

Color Models colorMode(RGB, 255);RGB // processing's default color model // used almost exclusively in // computer science applications colorMode(HSB, 360, 100, 100);HSB // 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* or 168 In web # notation –six hex digits gives three numbers from 0 to 255 –# is 128, 128, 0 Or olive as an HTML color nameHTML 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 if you wantwww.unca.edu 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()‏ 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 tint()