Vertices, Curves, Color, Images
This presentation is the property of its rightful owner.
Sponsored Links
1 / 19

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


  • 42 Views
  • Uploaded on
  • Presentation posted in: General

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

Download Presentation

Vertices, Curves, Color, Images mostly without details

An Image/Link below is provided (as is) to download presentation

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 images mostly without details

Vertices, Curves, Color, Imagesmostly without details

02/16/2010


Vertices curves color images mostly without details

Shapes

  • Shape

    • Interesting geometric structure

    • General outline

  • In processing

    beginShape()‏

    endShape()‏

  • No translation within a shape


Vertices curves color images mostly without details

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


Vertices curves color images mostly without details

Catmull-Rom splines

  • “Vertices” specified with curveVertex

  • Control points

    • First and last “vertices”

    • Give the initial and final curves


Vertices curves color images mostly without details

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


Vertices curves color images mostly without details

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


Vertices curves color images mostly without details

Late breaking news

  • Scalable Vector Graphics (SVC)‏

    • XML for drawing 2D graphics

  • PShape

    • Processing library using SVG

  • SVG editors

    • Illustrator

    • OpenOffice

    • Amaya


Vertices curves color images mostly without details

Mathematical functions

  • Square

    • sq(x) → x2

  • Square root

    • sqrt(x) → x0.5

  • Exponentiation

    • pow(x, y) → xy


Vertices curves color images mostly without details

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


Vertices curves color images mostly without details

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


Vertices curves color images mostly without details

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


Vertices curves color images mostly without details

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


Vertices curves color images mostly without details

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


Vertices curves color images mostly without details

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

}

}


Vertices curves color images mostly without details

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


Vertices curves color images mostly without details

Using an image

  • In processing IDE

    • Add an image to the environment

  • In processing code

    • Load the image

    • Display the image

    • Tint the image


Vertices curves color images mostly without details

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


Vertices curves color images mostly without details

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


Vertices curves color images mostly without details

Trying it out

  • Display an image

  • Make a collage of two images

  • Use tint()to color your image


  • Login