declarative_animation_docs

Class rectangle

Configures a rectangle object. A rectangle can be drawn in one of the following ways:

  1. By specifying the origin point, width, and height (size).
  2. By specifying the origin point, and the destination point (corner).
  3. By specifying the origin point, the destination point and the height (side).

If used the option 3, origin and destination segment will correspond to the bottom side of the rectangle, and the height will be the height of the rectangle, resulting in a rotated rectangle. In other cases, the origin corresponds to the bottom left corner of the rectangle, and destination corresponds to the top right corner of the rectangle.

Example:

rectangle:
origin = from 0, 0 to 100, 0 in 1.5 // animate the origin point
width = from 0 to 100 in 1.5 // animate the width
height = from 0 to 100 in 1.5 // animate the height

Programs

Commands

default {time}

Sets the time before the animation starts, in seconds

Example:

start = 1.5 // starts after 1.5 seconds

Program end

Sets the time after the animation ends, in seconds

Commands

default {time}

Sets the time after the animation ends, in seconds

Example:

end = 1.5 // ends after 1.5 seconds

Program fig_origin

Sets the origin of the figure for transformations

Example:

fig_origin = 0.5, 0.5 // sets the origin to the center of the figure

Commands

from {x} {y}

Sets the starting position (x, y) of the vector

Example:

from 0, 0

to {x} {y}

Sets the ending position (x, y) of the vector

Example:

to 100, 100

in {duration}

Sets the duration (time) of the animation from the starting position to the ending position

Example:

in 1.5

pivot {x} {y}

Sets the rotation center of the animation. If defined, the vector will rotate around this point to move from the starting position to the ending position, instead of moving in a straight line.

Example:

pivot 50, 50

shortspin Sets the animation to rotate around the pivot point using the shortest path.

Example:

shortspin

longspin Sets the animation to rotate around the pivot point using the longest path.

Example:

longspin

default {x} {y}

Sets the default position (x, y) of the vector

Example:

default 0, 0

stop On end, the animation will stop

restart On end, the animation will restart

reverse On end, the animation will reverse

linear Uses a linear function for this transition

Example:

radius = from 1 to 10 linear // linear transition

accel1 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, and will accelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel1 0.1 // acceleration transition

accel2 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, accelerate at constant rate until it reaches max speed at the middle of the transition, and then decelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel2 0.1 // acceleration transition

Program fig_rotation

Sets the rotation of the figure, in radians

Example:

fig_rotation = 0.5 // rotates the figure by 0.5 radians

Commands

from {x}

Sets the starting value of the value

Example:

from 0

to {x}

Sets the ending value of the value

Example:

to 100

in {duration}

Sets the duration (time) of the animation from the starting value to the ending value

Example:

in 1.5

default {x}

Sets the default value of the value

Example:

default 0

stop On end, the animation will stop

restart On end, the animation will restart

reverse On end, the animation will reverse

linear Uses a linear function for this transition

Example:

radius = from 1 to 10 linear // linear transition

accel1 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, and will accelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel1 0.1 // acceleration transition

accel2 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, accelerate at constant rate until it reaches max speed at the middle of the transition, and then decelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel2 0.1 // acceleration transition

Program fig_scale

Sets the scale of the figure

Example:

fig_scale = 0.5, 0.5 // scales the figure by 0.5 in both directions

Commands

from {x} {y}

Sets the starting position (x, y) of the vector

Example:

from 0, 0

to {x} {y}

Sets the ending position (x, y) of the vector

Example:

to 100, 100

in {duration}

Sets the duration (time) of the animation from the starting position to the ending position

Example:

in 1.5

pivot {x} {y}

Sets the rotation center of the animation. If defined, the vector will rotate around this point to move from the starting position to the ending position, instead of moving in a straight line.

Example:

pivot 50, 50

shortspin Sets the animation to rotate around the pivot point using the shortest path.

Example:

shortspin

longspin Sets the animation to rotate around the pivot point using the longest path.

Example:

longspin

default {x} {y}

Sets the default position (x, y) of the vector

Example:

default 0, 0

stop On end, the animation will stop

restart On end, the animation will restart

reverse On end, the animation will reverse

linear Uses a linear function for this transition

Example:

radius = from 1 to 10 linear // linear transition

accel1 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, and will accelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel1 0.1 // acceleration transition

accel2 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, accelerate at constant rate until it reaches max speed at the middle of the transition, and then decelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel2 0.1 // acceleration transition

Program background

Sets the background color of the figure. The colors are expressed in format of 24 bits numbers, where the first 8 bits are for the red channel, the next 8 bits are for the green channel and the last 8 bits are for the blue channel. You can also use the hexadecimal format, where the first 2 digits are for the red channel, the next 2 digits are for the green channel and the last 2 digits are for the blue channel. Functions rgb(r, g, b) and hsv(h, s, v) can also be used.

Example:

background = #ff0000 // red
background = from #ff0000 to #00ff00 in 1 // from red to green in 1 second
background = rgb(255, 0, 0) // red
background = from rgb(255, 0, 0) to rgb(0, 255, 0) in 1 // from red to green in 1 second

Commands

from {xyz}

Sets the starting point (x, y, z) of the vector 3D using a single number, where the first 8 bits are the value of x, the second 8 bits are the value of y, and the last 8 bits are the value of z.

Example:

from #ff0000
from 16711680

to {xyz}

Sets the ending point (x, y, z) of the vector 3D using a single number, where the first 8 bits are the value of x, the second 8 bits are the value of y, and the last 8 bits are the value of z.

Example:

to #ff0000
to 16711680

in {duration}

Sets the duration (time) of the animation from the starting point to the ending point

Example:

in 1.5

default {xyz}

Sets the default value of the vector 3D using a single number, where the first 8 bits are the value of x, the second 8 bits are the value of y, and the last 8 bits are the value of z.

Example:

default #ff0000
default 16711680

stop On end, the animation will stop

restart On end, the animation will restart

reverse On end, the animation will reverse

linear Uses a linear function for this transition

Example:

radius = from 1 to 10 linear // linear transition

accel1 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, and will accelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel1 0.1 // acceleration transition

accel2 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, accelerate at constant rate until it reaches max speed at the middle of the transition, and then decelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel2 0.1 // acceleration transition

Program background_opacity

Sets the background opacity of the figure

Example:

background_opacity = 0.5 // half transparent
background_opacity = from 0.5 to 1 in 1 // from half transparent to fully transparent in 1 second

Commands

from {x}

Sets the starting value of the value

Example:

from 0

to {x}

Sets the ending value of the value

Example:

to 100

in {duration}

Sets the duration (time) of the animation from the starting value to the ending value

Example:

in 1.5

default {x}

Sets the default value of the value

Example:

default 0

stop On end, the animation will stop

restart On end, the animation will restart

reverse On end, the animation will reverse

linear Uses a linear function for this transition

Example:

radius = from 1 to 10 linear // linear transition

accel1 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, and will accelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel1 0.1 // acceleration transition

accel2 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, accelerate at constant rate until it reaches max speed at the middle of the transition, and then decelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel2 0.1 // acceleration transition

Program border

Sets the border color of the figure The colors are expressed in format of 24 bits numbers, where the first 8 bits are for the red channel, the next 8 bits are for the green channel and the last 8 bits are for the blue channel. You can also use the hexadecimal format, where the first 2 digits are for the red channel, the next 2 digits are for the green channel and the last 2 digits are for the blue channel. Functions rgb(r, g, b) and hsv(h, s, v) can also be used.

Example:

border = #ff0000 // red
border = from #ff0000 to #00ff00 in 1 // from red to green in 1 second
border = rgb(255, 0, 0) // red
border = from rgb(255, 0, 0) to rgb(0, 255, 0) in 1 // from red to green in 1 second

Commands

from {xyz}

Sets the starting point (x, y, z) of the vector 3D using a single number, where the first 8 bits are the value of x, the second 8 bits are the value of y, and the last 8 bits are the value of z.

Example:

from #ff0000
from 16711680

to {xyz}

Sets the ending point (x, y, z) of the vector 3D using a single number, where the first 8 bits are the value of x, the second 8 bits are the value of y, and the last 8 bits are the value of z.

Example:

to #ff0000
to 16711680

in {duration}

Sets the duration (time) of the animation from the starting point to the ending point

Example:

in 1.5

default {xyz}

Sets the default value of the vector 3D using a single number, where the first 8 bits are the value of x, the second 8 bits are the value of y, and the last 8 bits are the value of z.

Example:

default #ff0000
default 16711680

stop On end, the animation will stop

restart On end, the animation will restart

reverse On end, the animation will reverse

linear Uses a linear function for this transition

Example:

radius = from 1 to 10 linear // linear transition

accel1 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, and will accelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel1 0.1 // acceleration transition

accel2 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, accelerate at constant rate until it reaches max speed at the middle of the transition, and then decelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel2 0.1 // acceleration transition

Program border_opacity

Sets the border opacity of the figure

Example:

border_opacity = 0.5 // half transparent
border_opacity = from 0.5 to 1 in 1 // from half transparent to fully transparent in 1 second

Commands

from {x}

Sets the starting value of the value

Example:

from 0

to {x}

Sets the ending value of the value

Example:

to 100

in {duration}

Sets the duration (time) of the animation from the starting value to the ending value

Example:

in 1.5

default {x}

Sets the default value of the value

Example:

default 0

stop On end, the animation will stop

restart On end, the animation will restart

reverse On end, the animation will reverse

linear Uses a linear function for this transition

Example:

radius = from 1 to 10 linear // linear transition

accel1 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, and will accelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel1 0.1 // acceleration transition

accel2 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, accelerate at constant rate until it reaches max speed at the middle of the transition, and then decelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel2 0.1 // acceleration transition

Program origin

Configures the origin point of the rectangle

Example:

origin = from 0, 0 to 100, 0 in 1.5 // animate the origin point

Commands

from {x} {y}

Sets the starting position (x, y) of the vector

Example:

from 0, 0

to {x} {y}

Sets the ending position (x, y) of the vector

Example:

to 100, 100

in {duration}

Sets the duration (time) of the animation from the starting position to the ending position

Example:

in 1.5

pivot {x} {y}

Sets the rotation center of the animation. If defined, the vector will rotate around this point to move from the starting position to the ending position, instead of moving in a straight line.

Example:

pivot 50, 50

shortspin Sets the animation to rotate around the pivot point using the shortest path.

Example:

shortspin

longspin Sets the animation to rotate around the pivot point using the longest path.

Example:

longspin

default {x} {y}

Sets the default position (x, y) of the vector

Example:

default 0, 0

stop On end, the animation will stop

restart On end, the animation will restart

reverse On end, the animation will reverse

linear Uses a linear function for this transition

Example:

radius = from 1 to 10 linear // linear transition

accel1 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, and will accelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel1 0.1 // acceleration transition

accel2 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, accelerate at constant rate until it reaches max speed at the middle of the transition, and then decelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel2 0.1 // acceleration transition

Program destination

Configures the destination point of the rectangle

Example:

destination = from 0, 0 to 100, 0 in 1.5 // animate the destination point

Commands

from {x} {y}

Sets the starting position (x, y) of the vector

Example:

from 0, 0

to {x} {y}

Sets the ending position (x, y) of the vector

Example:

to 100, 100

in {duration}

Sets the duration (time) of the animation from the starting position to the ending position

Example:

in 1.5

pivot {x} {y}

Sets the rotation center of the animation. If defined, the vector will rotate around this point to move from the starting position to the ending position, instead of moving in a straight line.

Example:

pivot 50, 50

shortspin Sets the animation to rotate around the pivot point using the shortest path.

Example:

shortspin

longspin Sets the animation to rotate around the pivot point using the longest path.

Example:

longspin

default {x} {y}

Sets the default position (x, y) of the vector

Example:

default 0, 0

stop On end, the animation will stop

restart On end, the animation will restart

reverse On end, the animation will reverse

linear Uses a linear function for this transition

Example:

radius = from 1 to 10 linear // linear transition

accel1 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, and will accelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel1 0.1 // acceleration transition

accel2 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, accelerate at constant rate until it reaches max speed at the middle of the transition, and then decelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel2 0.1 // acceleration transition

Program width

Configures the width of the rectangle

Example:

width = from 0 to 100 in 1.5 // animate the width

Commands

from {x}

Sets the starting value of the value

Example:

from 0

to {x}

Sets the ending value of the value

Example:

to 100

in {duration}

Sets the duration (time) of the animation from the starting value to the ending value

Example:

in 1.5

default {x}

Sets the default value of the value

Example:

default 0

stop On end, the animation will stop

restart On end, the animation will restart

reverse On end, the animation will reverse

linear Uses a linear function for this transition

Example:

radius = from 1 to 10 linear // linear transition

accel1 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, and will accelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel1 0.1 // acceleration transition

accel2 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, accelerate at constant rate until it reaches max speed at the middle of the transition, and then decelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel2 0.1 // acceleration transition

Program height

Configures the height of the rectangle

Example:

height = from 0 to 100 in 1.5 // animate the height

Commands

from {x}

Sets the starting value of the value

Example:

from 0

to {x}

Sets the ending value of the value

Example:

to 100

in {duration}

Sets the duration (time) of the animation from the starting value to the ending value

Example:

in 1.5

default {x}

Sets the default value of the value

Example:

default 0

stop On end, the animation will stop

restart On end, the animation will restart

reverse On end, the animation will reverse

linear Uses a linear function for this transition

Example:

radius = from 1 to 10 linear // linear transition

accel1 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, and will accelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel1 0.1 // acceleration transition

accel2 {initial_speed}

Uses an acceleration function for this transition. The animation will start at a given speed, accelerate at constant rate until it reaches max speed at the middle of the transition, and then decelerate at constant rate until it reaches the final value.

Example:

radius = from 1 to 10 accel2 0.1 // acceleration transition

Program mode

Configures the mode of the rectangle

Example:

mode = size // sets the mode to size
mode = corner // sets the mode to corner
mode = side // sets the mode to side

Commands

size Sets the mode to size

corner Sets the mode to corner

side Sets the mode to side

Program style

Configures the style of the figure. The styles can be fill, stroke, or both. A filled figure is a figure with a color inside, and a stroked figure is a figure with a color outline. By default, the figures are stroked but not filled.

Example:

style = fill // fill the figure
style = stroke // stroke the figure
style = fill stroke // fill and stroke the figure
style = nofill nostroke // do not fill or stroke the figure

Commands

fill Enables the fill of the figure

Example:

style = fill

nofill Disables the fill of the figure

Example:

style = nofill

stroke Enables the stroke of the figure

Example:

style = stroke

nostroke Disables the stroke of the figure

Example:

style = nostroke
This site is open source. Improve this page.