Iagc2
Upcoming SlideShare
Loading in...5
×
 

Iagc2

on

  • 558 views

 

Statistics

Views

Total Views
558
Views on SlideShare
558
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

Iagc2 Iagc2 Presentation Transcript

  • While you’re waiting... • Do a ‘git pull’ on the simple_animation repo• Not here last time? • You will want to get: • https://github.com/MacBoyPro/ simple_animation • git@github.com:MacBoyPro/
  • Interactive Graphics w/ Javascript, HTML5 and CSS3 Lee Lundrigan
  • Today• 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 their z-offset from the z=0 plane. -webkit-transition Specifies what property triggers an animation.
  • 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 units can be: degrees (deg) radians (rad) gradians (grad)
  • 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 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.
  • 2D Context Methods• fillRect(x, y, width, height)• clearRect(x, y, width, height)• fillStyle(color)• beginPath() - resets path• closePath() - makes path closed
  • 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/#documentation/InternetWeb/ Conceptual/ SafariVisualEffectsProgGuide/ Introduction/Introduction.html#// apple_ref/doc/uid/TP40008032-CH1- SW1
  • References Cont....• http://www.webkit.org/blog/386/3d- transforms/