COAP:COAP-2100/week5: Difference between revisions

Latest revision as of 19:46, 12 February 2014

Week 5

Topics covered

Static SVG (continued)
Dynamic SVG

Monday

Work on project 4 (See week 4)
Static SVG tutorial (grouping constructs)
SVG/SMIL animation tutorial (demos)
SVG Essentials/Animating and Scripting SVG, part of SVG Essentials On-line SVG textbook. Wiki version of J. David Eisenberg (2002), SVG Essentials, O'Reilly
You can find a PDFs of SVG book chapter in the worldclassroom / Documents folder

Wednesday

(Short) discussion of term projects
SVG/SMIL animation tutorial (try it yourself)
Interactive SVG-SMIL animation tutorial (interactivity demo)
Using Inkscape for web animation (some tips on preparing complex SVG files for animation)

SVG animation hands on:

animateexample code that you can copy / paste into an editor

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg">
  <title>Simple animate example</title>
  <desc>Rectangle shape will change</desc>
  <rect x="50" y="50" width="10" height="100" style="fill:#CCCCFF;stroke:#000099">
    <animate attributeName="width"  from="10px"  to="100px" 
	     begin="0s" dur="10s" />
    <animate attributeName="height" from="100px" to="10px"
	     begin="0s" dur="10s" />
  </rect>
  <text x="50" y="170" style="stroke:#000099;fill:#000099;font-size:14;">
  Hello. Admire the dynamic rectangle</text>
</svg>

Simple Motion example using mpath, variant 1 (more difficult):

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Simple Motion animation example</title>
 
 <rect x="15" y="5" rx="5" ry="5" width="20" height="10" style="fill:#CCCCFF;stroke:#000099">
    <animateMotion dur="6s" repeatCount="indefinite" rotate="auto">
       <mpath xlink:href="#path1"/>
    </animateMotion>
   </rect>
 <path id="path1" d="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
                     52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12" 
                     stroke-width="5" stroke="#000000" fill="none"/>
 </svg>

Simple Motion example using path, variant2

<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Simple Motion animation example</title>

 <rect x="15" y="5" rx="5" ry="5" width="20" height="10"  
       style="fill:#CCCCFF;stroke:#000099">
       <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"
                      path ="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
                      52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"/>
   </rect>
 </svg>

Homework 5

Create either an HTML5/SVG page, a HTML5 page that includes SVG, or a pure SVG page that includes some animation:

The page should include at least 2 animations
The animation should be useful in one way or another. You can explain the purpose of the animation either within the page or by other means (e.g. through a comment in the world classroom)
Bonus: Some interactivity (e.g. a mouse click or mouse over)

You either can create your own drawing using any SVG tool or add animation to a clipart file from http://openclipart.org. If you use external resources, please cite, e.g. in the SVG code using the desc element.

Due: Wednesday week 6 before class (upload to the world classroom)

@@ Line 5: / Line 5: @@
 ==== Topics covered ====
-* Dynamic SVG (part II, continued)
+* Static SVG (continued)
+* Dynamic SVG
 ==== Monday ====
+* Work on project 4 (See week 4)
 * [[Static SVG tutorial]] (grouping constructs)
-* [[SVG/SMIL animation tutorial]]
+* [[SVG/SMIL animation tutorial]] (demos)
-* [http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG SVG Essentials/Animating and Scripting SVG]
+* [http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Animating_and_Scripting_SVG SVG Essentials/Animating and Scripting SVG], part of [http://commons.oreilly.com/wiki/index.php/SVG_Essentials SVG Essentials] On-line SVG textbook. Wiki version of J. David Eisenberg (2002), ''SVG Essentials'', O'Reilly
-* [http://commons.oreilly.com/wiki/index.php/SVG_Essentials SVG Essentials] On-line SVG textbook. Wiki version of J. David Eisenberg (2002), ''SVG Essentials'', O'Reilly
+* You can find a PDFs of SVG book chapter in the worldclassroom / Documents folder
-* You can find a PDF of an SVG book in the worldclassroom / Documents folder
+==== Wednesday ====
+* (Short) discussion of term projects
+* [[SVG/SMIL animation tutorial]] (try it yourself)
+* [[Interactive SVG-SMIL animation tutorial]] (interactivity demo)
+* [[Using Inkscape for web animation]] (some tips on preparing complex SVG files for animation)
+SVG animation hands on:
+'''<code>animate</code>example code that you can copy / paste into an editor'''
+<source lang="XML">
+<?xml version="1.0"?>
+<svg xmlns="http://www.w3.org/2000/svg">
+  <title>Simple animate example</title>
+  <desc>Rectangle shape will change</desc>
+  <rect x="50" y="50" width="10" height="100" style="fill:#CCCCFF;stroke:#000099">
+    <animate attributeName="width"  from="10px"  to="100px"
+	     begin="0s" dur="10s" />
+    <animate attributeName="height" from="100px" to="10px"
+	     begin="0s" dur="10s" />
+  </rect>
+  <text x="50" y="170" style="stroke:#000099;fill:#000099;font-size:14;">
+  Hello. Admire the dynamic rectangle</text>
+</svg>
+</source>
+Simple Motion example using mpath, variant 1 (more difficult):
 <source lang="XML">
 <?xml version="1.0" encoding="UTF-8"?>
@@ Line 26: / Line 54: @@
      </animateMotion>
     </rect>
-  <path id="path1" d="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,52 -19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12" stroke-width="5" stroke="#000000" fill="none"/>
+  <path id="path1" d="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
+-19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"
+                     stroke-width="5" stroke="#000000" fill="none"/>
+ </svg>
+</source>
+Simple Motion example using path, variant2
+<source lang="XML">
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>Simple Motion animation example</title>
+ <rect x="15" y="5" rx="5" ry="5" width="20" height="10"
+       style="fill:#CCCCFF;stroke:#000099">
+       <animateMotion dur="6s" repeatCount="indefinite" rotate="auto"
+                      path ="m21,39c0,0 46,-44 79,-1c33,43 62,58 97,26c35,-32 86,-30 86,-31c0,-1 61,-9 29,43c-32,
+-19,51 -87,51c-68,0 -158,-5 -158,-6c0,-1 -40,-11 -41,-12"/>
+   </rect>
   </svg>
 </source>
-==== Wednesday ====
+==== Homework 5 ====
-Midterm exam
+Create either an HTML5/SVG page, a HTML5 page that includes SVG, or a pure SVG page that includes some animation:
+* The page should include at least 2 animations
+* The animation should be useful in one way or another. You can explain the purpose of the animation either within the page or by other means (e.g. through a comment in the world classroom)
+* Bonus: Some interactivity (e.g. a mouse click or mouse over)
-Subject area: SVG
+You either can create your own drawing using any SVG tool or add animation to a clipart file from http://openclipart.org. If you use external resources, please cite, e.g. in the SVG code using the ''desc'' element.
-* Graphic primitives
+Due: Wednesday week 6 before class (upload to the world classroom)
-* Grouping and reusing
-* Simple animation:
-** to/from/values/dur/begin/etc
 [[Category: COAP_2100]]

COAP:COAP-2100/week5: Difference between revisions

Latest revision as of 19:46, 12 February 2014

Contents

Week 5

Topics covered

Monday

Wednesday

Homework 5

Navigation menu

COAP:COAP-2100/week5: Difference between revisions

Latest revision as of 19:46, 12 February 2014

Week 5

Topics covered

Monday

Wednesday

Homework 5

Navigation menu

Slow Search