Writting the document.

Inserts some demo.
yuichi1004 · Jun 11, 2010 · ad31487 · ad31487
1 parent 113a80e
commit ad31487
Show file tree

Hide file tree

Showing 23 changed files with 320 additions and 87 deletions.
diff --git a/docs/declear_combined_animation.cpp b/docs/declear_combined_animation.cpp
diff --git a/docs/declear_multiple.cpp b/docs/declear_multiple.cpp
diff --git a/docs/demo.m4v b/docs/demo.m4v
diff --git a/docs/ease_out.png b/docs/ease_out.png
diff --git a/docs/easing.plt b/docs/easing.plt
@@ -0,0 +1,64 @@
+#!/opt/local/bin/gnuplot -persist
+#
+#    
+#    	G N U P L O T
+#    	Version 4.2 patchlevel 5 
+#    	last modified Mar 2009
+#    	System: Darwin 10.3.0
+#    
+#    	Copyright (C) 1986 - 1993, 1998, 2004, 2007 - 2009
+#    	Thomas Williams, Colin Kelley and many others
+#    
+#    	Type `help` to access the on-line reference manual.
+#    	The gnuplot FAQ is available from http://www.gnuplot.info/faq/
+#    
+#    	Send bug reports and suggestions to <http://sourceforge.net/projects/gnuplot>
+#    
+set terminal png size 300,300 font 'Times' 8
+set xlabel "t" 0,0
+set ylabel "f (t)" 2,0
+set xrange [0:1]
+set yrange [0:1]
+set nokey
+set size square
+set grid
+set sample 10000
+
+set lmargin 4.5 
+set tmargin 1 
+set rmargin 0.5
+set bmargin 4 
+
+set output "function_linear.png"
+f(x)=x
+plot f(x) title "f(t)" lw 3 lc rgbcolor "#0000cd"
+
+set output "function_easeIn.png"
+f(x)=x*x
+plot f(x) title "f(t)" lw 3 lc rgbcolor "#0000cd"
+
+set output "function_easeOut.png"
+f(x)=2*x-x*x
+plot f(x) title "f(t)" lw 3 lc rgbcolor "#0000cd"
+
+set output "function_easeInOut.png"
+f(x)=3*x*x-2*x*x*x
+plot f(x) title "f(t)" lw 3 lc rgbcolor "#0000cd"
+
+set output "function_easeInCubic.png"
+f(x)=x*x*x
+plot f(x) title "f(t)" lw 3 lc rgbcolor "#0000cd"
+
+set output "function_easeOutCubic.png"
+f(x)=(-x*x*x+3*x)/2
+plot f(x) title "f(t)" lw 3 lc rgbcolor "#0000cd"
+
+set output "function_easeInOutCubic.png"
+f(x)=x<0.5?(2*x*2*x*2*x)/2: 0.5+(-2*(x-0.5)*2*(x-0.5)*2*(x-0.5)+3*2*(x-0.5))/4
+plot f(x) title "f(t)" lw 3 lc rgbcolor "#0000cd"
+
+set output "function_bounce.png"
+f(x)=x<1.0/2.75?7.5625*x*x: x<2.0/2.75?7.5625*(x-1.5/2.75)*(x-1.5/2.75)+0.75: x<2.5/2.75?7.5625*(x-2.25/2.75)*(x-2.25/2.75)+0.9375: 7.5625*(x-2.625/2.75)*(x-2.625/2.75)+.984375
+plot f(x) title "f(t)" lw 3 lc rgbcolor "#0000cd"
+
+#    EOF
diff --git a/docs/easing_functions.htm b/docs/easing_functions.htm
@@ -0,0 +1,37 @@
+<!DOCTYPE html> 
+<html lang="en"> 
+<head> 
+	<meta charset="UTF-8"> 
+ 	<title>ofxAnimationKit Documentation - Easing function</title> 
+  <link rel="stylesheet" href="style.css" type="text/css">
+</head>
+<body>
+
+<h1>ofxAnimationKit Documentation - Easing functions</h1> 
+<a href="index.htm">[back]</a>
+
+<h2>Easing funcitons</h2>
+<p>Some functions are consulted with <a href="http://www.robertpenner.com/easing/easing_demo.html">robertpenner.com</a>.</p>
+
+<table width="80%">
+	<tr>
+		<td>animationFunctions::linear(t)<br /><img src="function_linear.png" alt="The graph of the funciton linear(t)" /></td>
+		<td>animationFunctions::easeIn(t)<br /><img src="function_easeIn.png" alt="The graph of the funciton easeIn(t)" /></td>
+	</tr>
+	<tr>
+		<td>animationFunctions::easeOut<br /><img src="function_easeOut.png" alt="The graph of the funciton easeOut(t)" /></td>
+		<td>animationFunctions::easeInOut<br /><img src="function_easeInOut.png" alt="The graph of the funciton easeInOut(t)" /></td>
+	</tr>
+	<tr>
+		<td>animationFunctions::easeInCubic(t)<br /><img src="function_easeInCubic.png" alt="The graph of the funciton easeInCubic(t)" /></td>
+		<td>animationFunctions::easeOutCubic<br /><img src="function_easeOutCubic.png" alt="The graph of the funciton easeOutCubic(t)" /></td>
+	</tr>
+	<tr>
+		<td>animationFunctions::easeInOutCubic(t)<br /><img src="function_easeInOutCubic.png" alt="The graph of the funciton easeInOutCubic(t)" /></td>
+		<td>animationFunctions::bounce<br /><img src="function_bounce.png" alt="The graph of the funciton bounce(t)" /></td>
+	</tr>
+</table>	
+
+</body>
+</html>
+
diff --git a/docs/function_bounce.png b/docs/function_bounce.png
diff --git a/docs/function_easeIn.png b/docs/function_easeIn.png
diff --git a/docs/function_easeInCubic.png b/docs/function_easeInCubic.png
diff --git a/docs/function_easeInOut.png b/docs/function_easeInOut.png
diff --git a/docs/function_easeInOutCubic.png b/docs/function_easeInOutCubic.png
diff --git a/docs/function_easeOut.png b/docs/function_easeOut.png
diff --git a/docs/function_easeOutCubic.png b/docs/function_easeOutCubic.png
diff --git a/docs/function_linear.png b/docs/function_linear.png
diff --git a/docs/getting_start.cpp b/docs/getting_start.cpp
@@ -10,31 +10,19 @@ void testApp::setup(){
 	ofSetVerticalSync(true);
 	ofSetFrameRate(60);
 
-	// Loads images and declear the star's animation.
+	// Loads images and declares the star's animation.
 	for (int i=0; i<STARS_SIZE; i++){
 		stars[i].load("image.png");		
 		stars[i].setPosition(ofPoint(ofGetScreenWidth()/2,ofGetScreenHeight()/2,0));
-
+
+		int w = ofGetScreenWidth();
+		int h = ofGetScreenHeight();
+		int v = 200;
+
 		stars[i].setLoop(true);
-
-		animationCue c(1000);
-		c.setMove(ofPoint(rand()%ofGetScreenWidth(),rand()%ofGetScreenHeight(),rand()%200));
-		c.setRotate(ofPoint(360*2,0,0));
-		c.setAlpha(1.0f);
-		stars[i].pushMove(c);
-
-		c.setMove(ofPoint(rand()%ofGetScreenWidth(),rand()%ofGetScreenHeight(),rand()%200));
-		c.setRotate(ofPoint(0,0,0));
-		stars[i].pushMove(c);
-
-		c.setMove(ofPoint(rand()%ofGetScreenWidth(),rand()%ofGetScreenHeight(),rand()%200));
-		c.setRotate(ofPoint(0,360*2,0));
-		stars[i].pushMove(c);
-
-		c.setMove(ofPoint(rand()%ofGetScreenWidth(),rand()%ofGetScreenHeight(),rand()%200));
-		c.setRotate(ofPoint(0,0,0));
-		c.setAlpha(0.0f);
-		stars[i].pushMove(c);
+		stars[i].pushMove(1000,ofPoint(rand()%w,rand()%h,rand()%v));
+		stars[i].pushMove(1000,ofPoint(rand()%w,rand()%h,rand()%v));
+		stars[i].pushMove(1000,ofPoint(rand()%w,rand()%h,rand()%v));
 	}
 }
 
@@ -52,4 +40,3 @@ void testApp::draw(){
 	for (int i=0; i<STARS_SIZE; i++)
 		stars[i].draw();
 }
-
diff --git a/docs/index-ja.htm b/docs/index-ja.htm
diff --git a/docs/index.htm b/docs/index.htm
@@ -8,25 +8,151 @@
 <body>
 
 <h1>ofxAnimationKit Documentation</h1> 
-<p>ofxAnimationKit is the animation framework for openFrameworks.</p>
+<p>ofxAnimationKit is an animation framework for openFrameworks.</p>
 
 <h2>Contents</h2>
 <ul>
+	<li><a href="#why">Why ofxAnimationKit?</a></li>
 	<li><a href="#getting_start">Getting start</a></li>
-	<li><a href="#declear_combined_animation">Declear combined animation</a></li>
-	<li><a href="#declear_multiple_animation">Declear multiple animation</a></li>
+	<li><a href="#declares_animation_with_easing">Declares animation with easing</a></li>
+	<li><a href="#declares_combined_animation">Declares combined animation</a></li>
 </ul>
 
+<h3><a name="why">Why ofxAnimationKit</a></h3>
+<p>ofxAnimationKit provides the powerful animation with simple source code.
+Animation is necessary for smart UIs.  The following video is the presentation viewer written by this
+framework.  This framework is useful for developing these kinds of products.</p>
+<a href="demo.m4v">[Demo Video]</a><br />
+<video src="demo.m4v" width="320" height="240" controls></video>
+
 <h3><a name="getting_start">Getting start</a></h3>
-<p>The following source code shows the simple use of this </p>
-<iframe src="getting_start.cpp" class="source"></iframe>
+<p>The following source code shows the simple usage of this kit.  This sample loads the star sprite images
+ and move them to random places.</p>
+<a href="getting_start.cpp">[Source]</a>
+<pre class="source">
+#include &lt;stdlib.h&gt;
+#include "testApp.h"
+#include "ofxAnimationKit.h"
+
+#define STARS_SIZE 50
+spriteActor stars[STARS_SIZE];
+
+void testApp::setup(){
+	ofBackground(0, 0, 0);
+	ofSetVerticalSync(true);
+	ofSetFrameRate(60);
+
+	// Loads images and declares the star's animation.
+	for (int i=0; i&lt;STARS_SIZE; i++){
+		stars[i].load("image.png");		
+		stars[i].setPosition(ofPoint(ofGetScreenWidth()/2,ofGetScreenHeight()/2,0));
+
+		int w = ofGetScreenWidth();
+		int h = ofGetScreenHeight();
+		int v = 200;
+
+		stars[i].setLoop(true);
+		stars[i].pushMove(1000,ofPoint(rand()%w,rand()%h,rand()%v));
+		stars[i].pushMove(1000,ofPoint(rand()%w,rand()%h,rand()%v));
+		stars[i].pushMove(1000,ofPoint(rand()%w,rand()%h,rand()%v));
+	}
+}
+
+
+void testApp::update(){
+	for (int i=0; i&lt;STARS_SIZE; i++)
+		stars[i].update(1000/60);
+}
+
+
+void testApp::draw(){
+	ofSetupScreen();
+	ofEnableAlphaBlending();
+
+	for (int i=0; i&lt;STARS_SIZE; i++)
+		stars[i].draw();
+}
+</pre>
+
+<p>Here is the result video of this program. </p>
+<a href="stars.m4v">[Demo Video]</a><br />
+<video src="stars.m4v" width="320" height="240" controls></video>
+
+
+<p>First, initialize actors, animation-enabled object.  spriteActor represents the animation-enabled sprite.  Loads the image with function load().</p>
+
+<pre class="source">
+spriteActor stars[STARS_SIZE];
+...
+stars[i].load("image.png");		
+</pre>
+
+<p>Second, declaries the animation.  In the following example, 1000 is the duration in millisecond and ofPoint(...) is the destination of the moving.  There are 2 functions, pushMove and move.  Function pushMove() reserves an animation after all animations reserved before.  
+Function move() discards all the reserved animation and immediatory starts the new animation.</p>
+
+<pre class="source">
+stars[i].pushMove(1000,ofPoint(rand()%w,rand()%h,rand()%v));
+</pre>
 
-<h3><a name="declear_combined_animation">Declear combined animation</a></h3>
-<p>Combined declearation can be written by animationCue.  The following code represents, moving, rotating and fading simulteniously in 1000 msec.</p>
-<iframe src="declear_combined_animation.cpp" class="source source_min"></iframe>
+<pre class="source">
+stars[i].move(1000,ofPoint(rand()%w,rand()%h,rand()%v));
+</pre>
 
-<h3><a name="declear_multiple_animation">Declear multiple animation</a></h3>
-<p>topics...</p>
+
+<p>Third, callbacks functions update() and draw(). </p>
+
+<pre class="source">
+void testApp::update(){
+	for (int i=0; i&lt;STARS_SIZE; i++)
+		stars[i].update(1000/60);
+}
+
+
+void testApp::draw(){
+	ofSetupScreen();
+	ofEnableAlphaBlending();
+
+	for (int i=0; i&lt;STARS_SIZE; i++)
+		stars[i].draw();
+}
+</pre>
+
+<h3><a name="declares_animation_with_easing">Declares animation with easing</a></h3>
+<p>The following code shows how to declare the animation with easing function.
+The easing function represents the animation speed.  The following animation is acceleratvie and deaccelerative.</p>
+
+<pre class="source">
+spriteActor star;
+star.move(1000, ofPoint(100,100,0), animationFunctions::easeInOut);
+</pre>
+
+<p>Theare are some easing functions <a href="easing_functions.htm">[here]</a>.</p>
+
+<p>Programmers can also define your original easing function.</p>
+
+<pre class="source">
+float original_easing(float t) {
+	return t*t*t*t;
+}
+...
+star.move(1000, ofPoint(100,100,0), original_easing);
+</pre>
+
+<h3><a name="declares_combined_animation">Declares combined animation</a></h3>
+<p>The following code shows how to declares the combined animation with animationCue.  The following code represents, moving, rotating and fading simulteniously in 1000 msec.</p>
+<pre class="source">
+spriteActor star;
+animationCue c(1000);
+c.setMove(ofPoint(rand()%ofGetScreenWidth(),rand()%ofGetScreenHeight(),rand()%200));
+c.setRotate(ofPoint(360*2,0,0));
+c.setAlpha(1.0f);
+star.move(c);
+</pre>
+
+<div class="footer">
+Send feedback to <a href="http://twitter.com/yuichi1004">yuichi1004</a> by twitter.
+</div>
 
 </body>
 </html>
+
diff --git a/docs/out.png b/docs/out.png
diff --git a/docs/stars.m4v b/docs/stars.m4v
diff --git a/docs/style.css b/docs/style.css
@@ -7,33 +7,45 @@ body {
 	border-right: solid 1px dimgrey;
 }
 
+video {
+	margin: 0 30px 0 30px;
+	padding: 0;
+}
+
+p {
+	margin-top: 0;
+}
+
 h1 {
 	font-size: 1.2em;
 }
 
 h2 {
 	font-size: 1.0em;
-	margin-bottom: 5px;
+	margin-bottom: 3px;
 }
 
 h3 {
 	font-size: 1.0em;
 	border-bottom: 1px dashed dimgrey;
-	margin-bottom: 5px;
+	margin-bottom: 3px;
 }
 
 ul {
 	margin: 0;
 }
 
-.source {
-	width: 800px;
-	height: 300px;
-	margin: 10px 50px 20px 50px;
-	border: 1px solid dimgrey;
+pre.source {
+	max-height: 200px;
+	overflow: auto;
+	padding: 5px;
+	border: 1px dimgrey solid;
+	margin: 10px 30px 10px 30px;
 }
 
-.source_min {
-	height: 100px !important;
+.footer {
+	border-top: 1px dashed dimgrey;
+	margin-top: 40px;
+	font-size: 0.8em;
+	text-align: center;
 }
-