.. include:: custom_tools.txt .. _design: ****** 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. .. code-block:: none +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 .. include:: word_wheel_code.txt 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_deg`` with word separation of ``idAngleBetweenWords_deg`` degrees. - 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_deg`` it is detached from the wheel and is thus no longer visible. - If ``iboolUseColorDistance`` is ``true`` (it is by default), the word colors start out being black, as described in the :ref:`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 ``iboolRepeat`` is ``true`` (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 :ref:`multi-wheel demo` for an example of this. 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 | +----------------------------+-------------------------------------------------------------+---------+ How to Use ********** Get Files ========= Download ``word_wheel.css`` and ``word_wheel.js`` to your local workstation. CSS === Include this somewhere in your ```` element. .. code-block:: html If you wish to override some of the CSS styles, include your ``custom.css`` (using any filename you choose) after ``word_wheel.css``: .. code-block:: html JavaScript ========== Bring in ``word_wheel.js`` somewhere before you call the function. Example somewhere in ```` element: .. code-block:: html HTML ==== Where you want the Word Wheel to appear, create HTML elements like this: .. code-block:: html