slide1
Download
Skip this Video
Download Presentation
Vertices, Curves, Color, Images mostly without details

Loading in 2 Seconds...

play fullscreen
1 / 19

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


  • 72 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Vertices, Curves, Color, Images mostly without details' - zizi


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
slide2
Shapes
  • Shape
    • Interesting geometric structure
    • General outline
  • In processing

beginShape()‏

endShape()‏

  • No translation within a shape
slide3
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
slide4
Catmull-Rom splines
  • “Vertices” specified with curveVertex
  • Control points
    • First and last “vertices”
    • Give the initial and final curves
slide5
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) ;

slide6
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
slide7
Late breaking news
  • Scalable Vector Graphics (SVC)‏
    • XML for drawing 2D graphics
  • PShape
    • Processing library using SVG
  • SVG editors
    • Illustrator
    • OpenOffice
    • Amaya
slide8
Mathematical functions
  • Square
    • sq(x) → x2
  • Square root
    • sqrt(x) → x0.5
  • Exponentiation
    • pow(x, y) → xy
slide9
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
slide10
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)‏
slide11
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
slide12
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
slide13
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
slide14
A short little lab

Start with something like the following

size(800, 600) ;

for (int x=0; x

for (int y=0; y

stroke(map(x+y, 0, width+height, 0, 255)) ;

point(x, y) ;

}

}

slide15
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
slide16
Using an image
  • In processing IDE
    • Add an image to the environment
  • In processing code
    • Load the image
    • Display the image
    • Tint the image
slide17
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
slide18
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) ;

slide19
Trying it out
  • Display an image
  • Make a collage of two images
  • Use tint()to color your image
ad