The examples mentioned in this chapter are part of the current distribution.
In the offline package these files are stored in the folder ‘examples’, users of the online-version find them at http://www.rinner.st/diploma-stuff/!scribble/builds/CURRENT/examples/.
They can get opened via the ‘load from network/harddisk’ popup menu or by following the links in the panels’ tooltips.
The examples may not impress at first sight but help to prove !scribble’s versatility and power.
###Objects following the mouse Objects get attached to the mouse in various occasions either as some kind of tooltip or in a more playful way as an object chasing the mouse.
###Following mouse
To order an object to follow the mouse it is necessary to connect the horizontal and vertical position of the mouse to the object’s position. The object’s regpoint is repositioned in every frame without any delay under the mouse cursor.
This behavior is useful to replace the cursor or for instance to place something like a tooltip next to the mouse.
###Following mouse smoothly
The use of ‘ease out’ allows the creation of more smooth or organic effects. It takes three arguments ñ the current value, the desired future value and a factor defining the speed or elasticity. The factor has to be greater than 1 to create elasticity. To create an elastic motion the mouse position and the current object position are used as parameters.
‘Ease out’’s power is not restricted to altering positions and following the mouse. The module is useful for any task where smooth change is needed. The desired future value can be also based on something different than the user’s input.
###Following, rotating mouse The way an object follows the mouse can be spiced up a little bit by adding behaviors based on the distance of the object to the mouse. In this example the object’s rotation is connected to the distance, this creates a more dynamic and chasing effect.
###Following, following ‘Ease out’ is also useful to achieve the effect of objects following objects, following objects. To accomplish this, the current value of the leading object has to be used as the desired future value of the following object.
###Rotate to mouse
To create the illusion that an object is ‘watching’ the mouse, the object has to rotate according to the current mouse position.
The rotation value is based on the result of ‘get angle’. ‘Get angle’ returns the angle (in degrees) of the line formed by the two given points.
###Following mouse (spiral) An object’s movement corresponding to the mouse is not necessarily about following the cursor. The object’s motion can be based also on a formula, in this case on a spiral, and the mouse controls one of the formula’s main parameters. To make the spiral movement more obvious the object’s trails are set to 1.
###Rigid serial chain This example illustrates the use of the ‘serial chain’ behavior. Objects connected by a rigid serial chain try to keep a defined distance ñ they follow each other but avoid getting nearer than defined by the radius. In this example, an object follows the mouse and is itself chased by another object.
###Fading, blinking
Changing an object’s transparency can be based on several different formulas. The result is based on the formulas’ characteristics.
To set up an example is quite easy – for instance ‘step’ or ‘step up and down’ produce a sequence of numbers within a defined range. The values are used as parameters for formulas and their results control an object’s transparency.
###Linear fading Linear fading is the simplest way of fading. The transparency value meanders within the defined range. The speed is constant without any acceleration or deceleration.
###Lemniscate fading Using a lemniscate to control an object’s transparency results in some slow and weak flickering.
###Sine fading Fading based on sine curves is regular and organic. Its speed seems constant and natural and without any peaks or abrupt changes.
###Moving objects
Moving objects is basically changing an object’s position according to a function or interaction. It is possible to move an object in a linear way or based on a function or curve.
‘Step’ and ‘step up and down’ are used for simple linear movement or as a basis for more complicated motions. It is important to understand the difference between the two modules. If the smallest value is 0 and the biggest value’ is 3, ‘step’ will compute a sequence like this: 0, 1, 2, 3, 0, 1, 2, 3, Ö, ‘Step up and down’ would return such a sequence: 0, 1, 2, 3, 2, 1, 0, 1
###Step The ‘step’ example shows an object moved and rotated by the ‘step’ module. It starts at 100, goes up to 700 and starts again at 100.
###Step up/down This example illustrates the ‘step up and down’ module. As in the ‘step’ example an object is moved and rotated. The difference is that the object starts at 100 goes up to 700, moves down to 100.
###Cycloid movement The object in this example staggers horizontally over the stage. Its reeling movement is based on a cycloid.
###Horizontal linear and vertical sine movement The example illustrates the use of the sine function. An object moves horizontally according to a ‘step up and down’ function and vertically following the graph of a sine function.
###Rollovers Rollovers are a common way to signify an object on the screen as interactive. After moving the mouse cursor over an object, the object reacts. Mostly the object changes its appearance by swapping images or altering transparency. Every object has an output labeled ‘mouse over’. If the mouse is over the object this output returns 1 otherwise 0 is returned.
###Simple rollover If an object’s transparency is 50 and should be altered to 100 when the mouse rolls over, the object’s ‘Mouse over’ is multiplied by 100. The result of the multiplication and the value 50 are the parameters of a ‘max’ module, and the result is the object’s transparency.
###Elastic rollover An elastic rollover differs from the simple rollover by the fact, that the output of ‘max’ is not connected directly to the object’s transparency but via an ‘ease out’ combining the current and the desired transparency.
###Random The random setting demonstrates the functionality of the random function. An object is placed randomly within a defined area on the stage. The area is defined by the two random functions’ range-settings. To illustrate the random placement the object leaves trails on the stage.
###Conditionals Conditionals empower the user to build complex applications which are able to react according to certain circumstances.
###Rollover based on conditionals To demonstrate the use of conditionals this example shows a rollover built up by using conditional operators. An object is following the mouse and a combination of conditionals checks if this object is within another object. To express it in pseudo-code: if the horizontal position of object A is bigger than the left edge and smaller than the right edge of object B, and if object A’s vertical position is within the range defined by object B’s top and bottom position, then the transparency of object B is set to 100.
###Inputs !scribble is able to interpret several ways of user interaction.
###Cursor based movement This example illustrates the use of the ‘cursor’ input module. Its four outputs return either 1 or 0. The results get added to the current position of the object.