Graphics
Lonce Wyse
Communication & New Media
lonce.wyse@cnm.nus.sg
Two types of graphics
- Raster
- Image stores as array of pixels
- Scalable Vector Graphics (SVG)
- image stored as objects
- Instructions for drawing (eg Path)
<path d = "M 0 0 L 100 200" />
SVG scales better
SVG Document Object Model
- Objects can be styled, moved, grouped, animated
- Objects can be event generators
- listen for "clicks" etc.
Raphael.js
Load it in the html head:
Use it in Javascript:
- First create the "paper":
Library:
<script type="text/javascript" src="jslibs/raphael.js"></script>
var paper = new Raphael (...);
- Use the paper to create objects (rectangles, circles, paths, text...):
// (x, y, width, height)
var rect1 = paper.rect(100, 100, 100, 100);
rect1.attr({ fill: '#0F6' });
Attribute object very similar to CSS:
Frequently-used attributes:
Attribute setting:
// (x, y, width, height)
var rect1 = paper.rect(100, 100, 100, 100);
rect1.attr({fill: '#9cf', stroke: '#ddd', 'stroke-width': 5});
cx number the x-axis coordinate of the center of the circle, or ellipse
cy number the y-axis coordinate of the center of the circle, or ellipse
fill string colour, gradient or image
height number
opacity number
path string SVG path string format
r number radius of the circle, ellipse or rounded corner on the rect
stroke string stroke colour
width number
x number
y number
//--------------------------------------//
fill-opacity number
font string
font-family string
font-size number font size in pixels
font-weight string
Path
Load it in the html head:
Paths are commands and coordinates
SVG:
var path1 = paper.path("m 200,200 l 280,200 l 290,290 z")
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
- Load images
and more ....
- Animate any object attributes
- location, rotation, scale, path, 'easing'
- Write text on paths
- Create 'sets' for grouping elements together
- Determine the "z-index" (whats on top of what when objects overlap)
003.001.xxx_Graphics
By lonce
003.001.xxx_Graphics
A brief overview of audio synthesis fundamentals, and how to create interactive audio on the Web.
- 547