Interactive Graphics     3D effects & Canvas Drawing      Lee Lundrigan       Sarah Allen
Class Materials• https://github.com/blazingcloud/  simple_animation• git@github.com:blazingcloud/  simple_animation.git
Next up• CSS3 3D transformations• HTML5 Canvas tag
CSS3
CSS3 Selectors-webkit-perspective   Used to give an illusion of depth; it   determines how things change size   based on t...
CSS3 Selectors-webkit-transform     Executes a transformation     function     scale,rotateX,rotateY,translate
Perspective demo• http://www.webkit.org/blog-files/3d-  transforms/perspective-by-  example.html
Transform Style Demo• http://www.webkit.org/blog-files/3d-  transforms/transform-style.html
CSS3 Selectors Cont...rotateX(angle), rotateY(angle)Simply rotate the element about thehorizontal and vertical axes.Angle ...
X Axis          360 deg 0 deg270 deg                   90 deg          180 deg
Y Axis          0 deg    360 deg90 deg                       270 deg         180 deg
CSS3 Cube demo
HTML5• Doctype • <!doctype html> • Tells the browser to run in   standards mode in accordance with   HTML5 spec from the W3C
Canvas• HTML5• Cartesian Coordinate System• Immediate mode• Each frame needs to be completely  redrawn• Draw order matters!!
Clearing the Canvas• reset the width of the canvas  (preferred)• call clearRect on the area you want to  clear
Canvas Cont...<canvas width=”1000” height=”500”> Your browser doesn’t support theHTML5 canvas tag...</canvas>
Canvas Cont...• Remember to set width and height on  canvas• width and height are dynamic  attributes
Canvas Cont...• 2D Context• canvas.getContext(‘2d’); • returns the 2d context api• 3D Context • canvas.getContext(‘webgl’);
Paths• A list of zero or more subpaths.• Subpaths consists of a list of one or  more points, connected by straight or  cur...
2D Context Methods• fillRect(x, y, width, height)• clearRect(x, y, width, height)• fillStyle(color)• beginPath() - resets pa...
2D Context Methods• arc(x, y, radius, startAngle, endAngle  anticlockwise)• fill() - fills the path with the fillStyle
Game Time
References• http://dev.w3.org/html5/2dcontext/  #dom-context-2d-beginpath• http://developer.apple.com/library/  safari/#do...
References Cont....• http://www.webkit.org/blog/386/3d-  transforms/
Upcoming SlideShare
Loading in...5
×

Interactive Graphics

796

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
796
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Interactive Graphics"

    1. 1. Interactive Graphics 3D effects & Canvas Drawing Lee Lundrigan Sarah Allen
    2. 2. Class Materials• https://github.com/blazingcloud/ simple_animation• git@github.com:blazingcloud/ simple_animation.git
    3. 3. Next up• CSS3 3D transformations• HTML5 Canvas tag
    4. 4. CSS3
    5. 5. CSS3 Selectors-webkit-perspective Used to give an illusion of depth; it determines how things change size based on their z-offset from the z=0 plane. -webkit-transition Specifies what property triggers an animation.
    6. 6. CSS3 Selectors-webkit-transform Executes a transformation function scale,rotateX,rotateY,translate
    7. 7. Perspective demo• http://www.webkit.org/blog-files/3d- transforms/perspective-by- example.html
    8. 8. Transform Style Demo• http://www.webkit.org/blog-files/3d- transforms/transform-style.html
    9. 9. CSS3 Selectors Cont...rotateX(angle), rotateY(angle)Simply rotate the element about thehorizontal and vertical axes.Angle units can be: degrees (deg) radians (rad) gradians (grad)
    10. 10. X Axis 360 deg 0 deg270 deg 90 deg 180 deg
    11. 11. Y Axis 0 deg 360 deg90 deg 270 deg 180 deg
    12. 12. CSS3 Cube demo
    13. 13. HTML5• Doctype • <!doctype html> • Tells the browser to run in standards mode in accordance with HTML5 spec from the W3C
    14. 14. Canvas• HTML5• Cartesian Coordinate System• Immediate mode• Each frame needs to be completely redrawn• Draw order matters!!
    15. 15. Clearing the Canvas• reset the width of the canvas (preferred)• call clearRect on the area you want to clear
    16. 16. Canvas Cont...<canvas width=”1000” height=”500”> Your browser doesn’t support theHTML5 canvas tag...</canvas>
    17. 17. Canvas Cont...• Remember to set width and height on canvas• width and height are dynamic attributes
    18. 18. Canvas Cont...• 2D Context• canvas.getContext(‘2d’); • returns the 2d context api• 3D Context • canvas.getContext(‘webgl’);
    19. 19. Paths• A list of zero or more subpaths.• Subpaths consists of a list of one or more points, connected by straight or curved lines, and a flag indicating whether the subpath is closed or not.• A closed subpath is one where the last point is connected to the first point by a straight line.
    20. 20. 2D Context Methods• fillRect(x, y, width, height)• clearRect(x, y, width, height)• fillStyle(color)• beginPath() - resets path• closePath() - makes path closed
    21. 21. 2D Context Methods• arc(x, y, radius, startAngle, endAngle anticlockwise)• fill() - fills the path with the fillStyle
    22. 22. Game Time
    23. 23. References• http://dev.w3.org/html5/2dcontext/ #dom-context-2d-beginpath• http://developer.apple.com/library/ safari/#documentation/InternetWeb/ Conceptual/ SafariVisualEffectsProgGuide/ Introduction/Introduction.html#// apple_ref/doc/uid/TP40008032-CH1- SW1
    24. 24. References Cont....• http://www.webkit.org/blog/386/3d- transforms/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×