2. Design
We are building an animation with this set of mechanics: this is the view of a rotating wheel, a screen, and a viewer from the right side of the scene. Think of it like a Ferris wheel: the words “get on” the Ferris wheel at “attach angle” and “get off” the wheel at “detach angle”. And as the Ferris wheel rotates, the location and size of words on the screen are calculated using the diagram below.
+Y +-- 90deg/
^ +-- -270deg
| |
idEyeZDistance_cm | | v
|<---------------->|<---- idWheelZDistance_cm ------->| |||||||||
| | | |||| |||| forward
| | | |||| |||| rotation
| (0,0) | | || || ^
\ | | || || |
|||| \| v || || |
|| || <--(neg Z axis)--+----(positive Z axis)------------ | wheel_radius |
|| || °°°···___ | 180 / -180deg --> | O<----------->| <-- 0deg / 360deg
|||| °°°··|·____ | |
| ^ °°°°······_____ || || |
| | °°°°°·····___ || || |
| | || || v
| | || || reverse
| +-- size of word on screen |||| |||| rotation
| ||||||||||
| | ^ |
| | | |
v | +-- 270deg/ |
-Y | +-- -90deg |
| |
| |
|<---- color distances ---->|
| | | | | | |
Nearest Farthest
Viewer's Eye Screen Wheel
View From Right Side of Scene
The nature of the activity is:
You select a set of words (from anywhere).
The wheel is transparent, rotating at
idRotationRate_deg_per_sec.The Word-Wheel animation attaches each word one at a time to the wheel at angle
idAttachAngle_degwith word separation ofidAngleBetweenWords_degdegrees.When the word is attached, it is attached as though the top edge is on a hinge attached to the wheel, and the word dangles straight down as though pulled by gravity. As the wheel rotates, the hinge rotates keeping the word dangling downward towards nagive Y.
As the words come into view, they grow closer and thus larger.
Their position and size are determined by computing the intersection point with the screen of:
a line between the top edge of the word and the viewer’s eye;
a line between the bottom edge of the word and the viewer’s eye.
The distance between the intersection points is the height of the text.
When each word reaches
idDetachAngle_degit is detached from the wheel and is thus no longer visible.If
iboolUseColorDistanceistrue(it is by default), the word colors start out being black, as described in the Introduction, and advance through the “color distances” reaching the “nearest color” at the nearest point on the wheel, and then fading back to more distant colors reaching black again just as the word is detached from the wheel.The comlete word list is cycled through.
The whole cycle is repeated if
iboolRepeatistrue(it is by default).Animation pauses when the user places keyboard focus on other windows or browser tables (to reduce overall CPU load on the system), and the animation resumes when focus returns.
WordWheel is a class. Each instantiation manages 1 animation. There can be any number of such animations on any given web page, each with their own characteristics, speed, size, coloring and word list. See the Multi-Wheel Demo for an example of this.
2.1. Configurable Parameters
Parameter |
Description |
Default |
|---|---|---|
idHeight_cm |
Height of WordWheel in cm |
15 |
idWidth_cm |
Height of WordWheel in cm |
26.67 |
idEyeZDistance_cm |
Z-axis dist from screen to viewer’s eye in cm |
76 |
idWheelZDistance_cm |
Z-axis dist from screen to nearest point on wheel |
0 |
idWheelRadius_cm |
Wheel radius in cm |
hgt - 2 |
idEllipseZAxisFactor |
Height of words in cm |
15.0 |
idWordHeight_cm |
Height of words in cm |
3 |
idAngleBetweenWords_deg |
Angle between words in degrees |
30 |
idAttachAngle_deg |
Angle where word is attached to wheel in degrees |
5 |
idDetachAngle_deg |
Angle where word is detached from wheel in degrees |
355 |
idRotationRate_deg_per_sec |
Rate of wheel rotation in degrees per second |
30 |
iboolRotationForward |
From right side forward = counter-clockwise |
true |
iboolUseColorDistance |
Boolean use color distance? |
true |
iboolDarkBackground |
Use coloring for dark backgrounds? |
true |
iboolDebugging |
Debug mode? |
false |
iboolRepeat |
Repeat after full set of words have ridden the wheel? |
true |
2.2. How to Use
2.2.1. Get Files
Download word_wheel.css and word_wheel.js to your local workstation.
2.2.2. CSS
Include this somewhere in your <head> element.
<link rel="stylesheet" type="text/css" href="path/to/word_wheel.css" />
If you wish to override some of the CSS styles, include your custom.css (using
any filename you choose) after word_wheel.css:
<link rel="stylesheet" type="text/css" href="path/to/custom.css" />
2.2.3. JavaScript
Bring in word_wheel.js somewhere before you call the function. Example somewhere
in <head> element:
<script src="path/to/word_wheel.js"></script>
2.2.4. HTML
Where you want the Word Wheel to appear, create HTML elements like this:
<script>
try {
/* Default Configuration:
* ----------------------
* idHeight_cm = 15;
* idWidth_cm = 26.67;
* idEyeZDistance_cm = 76;
* idWheelZDistance_cm = 0;
* idWheelRadius_cm = this.idHeight_cm - 2;
* idEllipseZAxisFactor = 15.0;
* idWordHeight_cm = 3;
* idAngleBetweenWords_deg = 30;
* idAttachAngle_deg = 5;
* idDetachAngle_deg = 355;
* idRotationRate_deg_per_sec = 30;
* isaWordList = ['This', 'is', 'a', 'WordWheel.'];
* iboolRotationForward = true;
* iboolUseColorDistance = true;
* iboolDarkBackground = true;
* iboolDebugging = false;
* iboolRepeat = true;
*/
cfg = {
idAngleBetweenWords_deg: 30,
idRotationRate_deg_per_sec: 30,
idAttachAngle_deg: 10,
idDetachAngle_deg: 350,
idHeight_cm: 5,
idWidth_cm: 10,
idWheelRadius_cm: 2.1,
idWordHeight_cm: 1.5,
idEllipseZAxisFactor: 30.0,
iboolDarkBackground: true
};
str = '"Be the change that you wish to see in the world." —Mahatma Ghandi';
var ww = new WordWheel(str, cfg);
ww.emitHtmlElements();
} catch (e) {
alert(e.toString());
}
</script>