Skip to content
Browse files

Writting the document.

Inserts some demo.
  • Loading branch information...
1 parent 113a80e commit ad31487e2187a91430993ebef5d140e29e6a9ab5 Yuichi MURATA committed Jun 12, 2010
View
7 docs/declear_combined_animation.cpp
@@ -1,7 +0,0 @@
-spriteActor a;
-animationCue c(1000);
-c.setMove(ofPoint(rand()%ofGetScreenWidth(),rand()%ofGetScreenHeight(),rand()%200));
-c.setRotate(ofPoint(360*2,0,0));
-c.setAlpha(1.0f);
-a.move(c);
-
View
6 docs/declear_multiple.cpp
@@ -1,6 +0,0 @@
-spriteActor a;
-animationCue c(1000);
-c.setMove(ofPoint(100,100,0));
-c.setRotate(ofPoint(360,0,0));
-c.setAlpha(1.0f);
-a.move(c);
View
BIN docs/demo.m4v
Binary file not shown.
View
BIN docs/ease_out.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
64 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
View
37 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>
+
View
BIN docs/function_bounce.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN docs/function_easeIn.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN docs/function_easeInCubic.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN docs/function_easeInOut.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN docs/function_easeInOutCubic.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN docs/function_easeOut.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN docs/function_easeOutCubic.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN docs/function_linear.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
31 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();
}
-
View
12 docs/index-ja.htm
@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
- <meta charset="UTF-8">
- <title>siteName_html5NewSite</title>
-</head>
-<body>
-
-
-
-</body>
-</html>
View
146 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>
+
View
BIN docs/out.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN docs/stars.m4v
Binary file not shown.
View
32 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;
}
-
View
19 sample/testApp.cpp
@@ -17,24 +17,35 @@ void testApp::setup(){
stars[i].setLoop(true);
+ int w = ofGetScreenWidth();
+ int h = ofGetScreenHeight();
+ int v = 200;
+
+ 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));
+ stars[i].pushMove(1000,ofPoint(rand()%w,rand()%h,rand()%v));
+
+ /* Complicated animation Version
animationCue c(1000);
- c.setMove(ofPoint(rand()%ofGetScreenWidth(),rand()%ofGetScreenHeight(),rand()%200));
+ c.setMove(ofPoint(rand()%w,rand()%h,rand()%v));
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.setMove(ofPoint(rand()%w,rand()%h,rand()%v));
c.setRotate(ofPoint(0,0,0));
stars[i].pushMove(c);
- c.setMove(ofPoint(rand()%ofGetScreenWidth(),rand()%ofGetScreenHeight(),rand()%200));
+ c.setMove(ofPoint(rand()%w,rand()%h,rand()%v));
c.setRotate(ofPoint(0,360*2,0));
stars[i].pushMove(c);
- c.setMove(ofPoint(rand()%ofGetScreenWidth(),rand()%ofGetScreenHeight(),rand()%200));
+ c.setMove(ofPoint(rand()%w,rand()%h,rand()%v));
c.setRotate(ofPoint(0,0,0));
c.setAlpha(0.0f);
stars[i].pushMove(c);
+ */
}
}
View
10 src/actor.h
@@ -8,15 +8,7 @@
#include <queue>
#include <list>
-/**
- * @brief Represents animation-enabled 3D/2D object.
- *
- * This is the most basic class of the ofxAnimationKit.
- * Any animatable objects derived this class.
- *
- * You can make original animation-enabled classes deriving this class.
- * In this case, the derived class may basically override functions, onUpdate(int) and onDraw().
- */
+
class actor: public IActor {
protected:
animationValue<ofPoint> pos;
View
43 src/animationValue.h
@@ -1,6 +1,11 @@
#ifndef _ANIME_VALUE_H__
#define _ANIME_VALUE_H__
+/**
+ Animation functions
+ Some functions based on the robertpenner's easing function.
+ See also http://www.robertpenner.com/easing/easing_demo.html
+ */
class animationFunctions {
public:
static inline float linear(float t){
@@ -10,16 +15,40 @@ class animationFunctions {
return t*t;
}
static inline float easeOut(float t){
- return 2*t-t*t;
+ return 2.0f*t-t*t;
}
- static inline float easeInQuad(float t){
- return t*t*t*t;
+ static inline float easeInOut(float t){
+ return 3.0f*t*t-2.0f*t*t*t;
}
- static inline float easeOutQuad(float t){
- return (t-t*t*t*t/4.0f)*4.0/3.0f;
+ static inline float easeInCubic(float t){
+ return t*t*t;
}
- static inline float easeInOut(float t){
- return 3*t*t-2*t*t*t;
+ static inline float easeOutCubic(float t){
+ return (-t*t*t+3.0f*t)/2.0f;
+ }
+ static inline float easeInOutCubic(float t){
+ if (t<0.5f) {
+ t*=2.0f;
+ return t*t*t/2.0f;
+ }
+ t=(t-0.5f)*2.0f;
+ return 0.5f+(-t*t*t+3.0f*t)/4.0f;
+ }
+ static inline float bounce(float t) {
+ if (t<1.0f/2.75f) {
+ return (7.5625f*t*t);
+ } else if (t<2.0f/2.75f) {
+ t-=1.5f/2.75f;
+ return (7.5625f*t*t+.75f);
+ } else if (t <2.5f/2.75f) {
+ t-=2.25f/2.75f;
+ return (7.5625f*t*t+.9375f);
+ } else {
+ t-=(2.625f/2.75f);
+ return (7.5625f*t*t + .984375);
+ }
+
+ // if (x<1.0/2.75){7.5625*x*x} else{0}
}
};

0 comments on commit ad31487

Please sign in to comment.
Something went wrong with that request. Please try again.