Graphics. HCID 520 User Interface Software & Technology

Size: px

Start display at page:

Download "Graphics. HCID 520 User Interface Software & Technology"

Adelia Brown
5 years ago
Views:

1 Graphics HCID 520 User Interface Software & Technology

7 PIXELS!

8 2D Graphics

9 2D Raster Graphics Model Drawing canvas with own coordinate system. Origin at top-left, increasing down and right. Graphics Context Drawing methods Stroke, fill shapes Draw text strings Draw images Model drawing state Coordinate transforms Clipping region Current color, typeface (0,0)

10 Drawing a Rectangle createcanvas(12,12); (0,0) (12,12)

11 Drawing a Rectangle createcanvas(12,12); fill('red'); (0,0) (12,12)

12 Drawing a Rectangle createcanvas(12,12); fill('red'); rect(2, 2, 10, 10); (0,0) (12,12)

13 Drawing a Rectangle createcanvas(12,12); fill('red'); rect(2, 2, 10, 10); nofill(); stroke( blue'); (0,0) (12,12)

14 Drawing a Rectangle createcanvas(12,12); fill('red'); rect(2, 2, 10, 10); nofill(); stroke( blue'); strokeweight(2); (0,0) (12,12)

15 Drawing a Rectangle createcanvas(12,12); fill('red'); rect(2, 2, 10, 10); nofill(); stroke( blue'); strokeweight(2); rect(2, 2, 10, 10); (0,0) (12,12)

16 Drawing a Path createcanvas(12,12); (0,0) (12,12)

17 Drawing a Path createcanvas(12,12); fill('red'); stroke('blue'); strokeweight(2); (0,0) beginshape(); (12,12)

18 Drawing a Path createcanvas(12,12); fill('red'); stroke('blue'); strokeweight(2); (0,0) beginshape(); vertex( 2, 2); (12,12)

19 Drawing a Path createcanvas(12,12); fill('red'); stroke('blue'); strokeweight(2); (0,0) beginshape(); vertex( 2, 2); vertex(10, 2); (12,12)

20 Drawing a Path createcanvas(12,12); fill('red'); stroke('blue'); strokeweight(2); (0,0) beginshape(); vertex( 2, 2); vertex(10, 2); vertex(10, 10); (12,12)

21 Drawing a Path createcanvas(12,12); fill('red'); stroke('blue'); strokeweight(2); (0,0) beginshape(); vertex( 2, 2); vertex(10, 2); vertex(10, 10); vertex( 2, 10) (12,12)

22 Drawing a Path createcanvas(12,12); fill('red'); stroke('blue'); strokeweight(2); (0,0) beginshape(); vertex( 2, 2); vertex(10, 2); vertex(10, 10); vertex( 2, 10) endshape(close); (12,12)

23 Drawing a Path createcanvas(12,12); fill('red'); stroke('blue'); strokeweight(2); (0,0) beginshape(); vertex( 2, 2); vertex(10, 2); vertex(10, 10); vertex( 2, 10) endshape(close); (12,12)

24 Drawing Bézier Curves Specify curve via end points & control points beginshape(); vertex(p0.x, P0.y); // start point beziervertex( P1.x, P1.y, // first control point P2.x, P2.y, // second control point P3.x, P3.y // end point ); endshape();

25 Strokes Parameters for stroked lines strokeweight(3); // set line width strokedash([len, gap]); // set dashes strokecap( butt round cap ); strokejoin( miter round bevel ); miter round bevel

Fonts x-height baseline The quick brown fox ascent descent Family: The name of the typeface Serif: Times New Roman, Georgia, Palatino Sans-Serif: Arial/Helvetica, Verdana, Tahoma Fixed-Width:

26 Fonts x-height baseline The quick brown fox ascent descent Family: The name of the typeface Serif: Times New Roman, Georgia, Palatino Sans-Serif: Arial/Helvetica, Verdana, Tahoma Fixed-Width: Courier New, Monaco Size: Measured in points (orig. 1/72 French inch), pixels, ems Weight: normal, bold Style: normal, italic Kerning: Context-dependent spacing, normalize area between letters

27 Coordinate Transformation push(); // store current context state

28 Coordinate Transformation push(); // store current context state // scale (or zoom) the space scale(sx, sy);

29 Coordinate Transformation push(); // store current context state // scale (or zoom) the space scale(sx, sy); // shift coordinates by an offset translate(x, y);

30 Coordinate Transformation push(); // store current context state // scale (or zoom) the space scale(sx, sy); // shift coordinates by an offset translate(x, y); // rotate coordinates by angle rotate(angleinradians);

31 Coordinate Transformation push(); // store current context state // scale (or zoom) the space scale(sx, sy); // shift coordinates by an offset translate(x, y); // rotate coordinates by angle rotate(angleinradians); pop(); // restore saved state

32 What is this? push(); nofill(); stroke( white ); translate(150, 150); var angle = 15; for (var i=0; i<360/angle; ++i) { rotate(angle * Math.PI/180); rect(0, 0, 100, 100); } pop();

33 A spirograph! push(); nofill(); stroke( white ); translate(150, 150); var angle = 15; for (var i=0; i<360/angle; ++i) { rotate(angle * Math.PI/180); rect(0, 0, 100, 100); } pop();

34 Minor edits push(); nofill(); stroke( white ); translate(150, 150); var angle = 15; for (var i=0; i<360/angle; ++i) { rotate(angle * Math.PI/180); rect(0, 0, 100, 100); translate(10, 10); } pop();

35 Minor edits push(); nofill(); stroke( white ); translate(150, 150); var angle = 15; for (var i=0; i<360/angle; ++i) { rotate(angle * Math.PI/180); rect(0, 0, 100, 100); translate(10, 10); } pop();

37 US Air Traffic, Aaron Koblin

39 2D Graphics in HTML 5 Canvas element: 2D grid of pixels. Low-level; what we ve been looking at so far! <canvas width= 500 height= 200 ></canvas> SVG element: scalable vector graphics. Describe a visual scene with shapes, text, etc. SVG shapes can also be styled with CSS! Zooming w/o pixelation; good for icons & print. <svg width= 500 height= 200 > <g transform= translate(10,10) > <rect x= 5 y= 12 width= 100 height= 20 /> </g> </svg>

Graphics. HCID 520 User Interface Software & Technology

Graphics. HCID 520 User Interface Software & Technology Graphics HCID 520 User Interface Software & Technology PIXELS! 2D Graphics 2D Graphics in HTML 5 Raster Graphics: canvas element Low-level; modify a 2D grid of pixels.