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

1 / 19

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.

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

#### Presentation Transcript

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

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

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