Your SlideShare is downloading. ×
Interactive Graphics
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Interactive Graphics

760
views

Published on


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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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

    • 1. Interactive Graphics 3D effects & Canvas Drawing Lee Lundrigan Sarah Allen
    • 2. Class Materials• https://github.com/blazingcloud/ simple_animation• git@github.com:blazingcloud/ simple_animation.git
    • 3. Next up• CSS3 3D transformations• HTML5 Canvas tag
    • 4. CSS3
    • 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. CSS3 Selectors-webkit-transform Executes a transformation function scale,rotateX,rotateY,translate
    • 7. Perspective demo• http://www.webkit.org/blog-files/3d- transforms/perspective-by- example.html
    • 8. Transform Style Demo• http://www.webkit.org/blog-files/3d- transforms/transform-style.html
    • 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. X Axis 360 deg 0 deg270 deg 90 deg 180 deg
    • 11. Y Axis 0 deg 360 deg90 deg 270 deg 180 deg
    • 12. CSS3 Cube demo
    • 13. HTML5• Doctype • <!doctype html> • Tells the browser to run in standards mode in accordance with HTML5 spec from the W3C
    • 14. Canvas• HTML5• Cartesian Coordinate System• Immediate mode• Each frame needs to be completely redrawn• Draw order matters!!
    • 15. Clearing the Canvas• reset the width of the canvas (preferred)• call clearRect on the area you want to clear
    • 16. Canvas Cont...<canvas width=”1000” height=”500”> Your browser doesn’t support theHTML5 canvas tag...</canvas>
    • 17. Canvas Cont...• Remember to set width and height on canvas• width and height are dynamic attributes
    • 18. Canvas Cont...• 2D Context• canvas.getContext(‘2d’); • returns the 2d context api• 3D Context • canvas.getContext(‘webgl’);
    • 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. 2D Context Methods• fillRect(x, y, width, height)• clearRect(x, y, width, height)• fillStyle(color)• beginPath() - resets path• closePath() - makes path closed
    • 21. 2D Context Methods• arc(x, y, radius, startAngle, endAngle anticlockwise)• fill() - fills the path with the fillStyle
    • 22. Game Time
    • 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. References Cont....• http://www.webkit.org/blog/386/3d- transforms/