Project Rules

The set of projects used by the application are specified in: client/data/src/client_projects.json

Test project sets are in the same folder with different suffixes, e.g.: client/data/src/projects_anim_test.json

Individual projects require an SVG file that specifies the shape geometry and a rule file in JSON format. These files are saved in: client/data/src/

Shape IDs are pulled from the SVG file. Parents and Children are accepted 1, 1.1, 1.2 etc but not grandchildren. IDs can be grouped into an array to apply an animation to a bunch of objects.

Shapes are rendered with ID 1 at the top of the stack. Children are rendered after each parent so sit on top of the parent:

1.1 (top)

1.2

1.3

1.4

1 (bottom)

Project Rule files

Project level:

• name - Project id. Matches Zooniverse API values
• x - initial x position
• y - initial y position
• sx - initial x scale
• sy - initial y scale
• rotation - initial rotation
• animation - Project level animations
• shape_animation - array of animations applied to shapes listed in shape_id param

Shape level:

• id - Shape id, matches svg id.
• sx - initial x scale
• sy - initial y scale
• rotation - initial rotation
• opacity - initial opacity
• fill - initial fill colour
• animation - Shape level animations applied to shapes in

Animations: Parameters for all animations using time-series data:

• type - Animation type. Determines which parameters required
• dataType - Classification data: ‘c’, User data: ‘u’
• data - Time-series data to use: min, min15, hour, day
• tween - Interpolation function between time series values: id (identity/no tween), linear
• fn - Function applied to time-series values: id (identity/no function), sqrt
• duration - Min and max number of seconds to run through time-series animation. Currently only min value is used. If used with "duration_data" max value is valid.
• time - Initial time in seconds at which to start animation. If duration is 8 seconds and time is 4 seconds, the animation starts half way through time-series data
• duration_data - To change the duration of the loop on each cycle specify a one of the timeseries (min, min15, hour, day). The max and min duration are set by the 'duration' range.
• time_fn - Use only in shape_animation rules to set initial time value of each shape (this function will cycle the shape action so the group are not in sync - see milky_way for example). 'random' for a random time. 'index' for evenly spaced times between each shape index.
• series_len - number of timeseries items to use from most recent. Must be shorter than the full timeseries length. min:60, min15:60, hour:24, day:30

Animation Types Generic animation types:

• scale - sx, sy: min and max scale values
• rotate - rotation: min and max scale values
• opacity - range: min and max opacities (NB: children don't inherit)
• colour - fills: Colours, range: min and max in range [0,1]
• translate - dir: Direction x or y, range: min and max translation. Scale is the same as svg file.
• circle - speed: min and max number of degrees per second to rotate, radius: radius of circle, in scale of svg file. Make angle negative for anti-clockwise movement.
• point_translate - shape points translate within rangeX and rangeY.
• trail - leave a ghost of the shape behind

(NB: put an underscore in front of any type makes it unrecognised and it will be ignored)

Specific project animations:

• asteroid - shapes are triggered to shoot off screen like a shooting star and fade back into place
• radio - applies gravity-like effect to shapes so they get affected by shapes in the comp that are not tagged with the radio animation type
• serengeti - shapes have a fixed face and two nodes (i.e. Bottom Left, Bottom Right), with 'free' nodes able to scale x + y

Top level animation parameters can be changed in config.js:

• assetBB:{left:0,bottom:1080,right:1920,top:0,width:1920,height:1080} //BB - bounding box
• focusOpacity:1.0, // opacity of focused project
• bgOpacity:0.2, // opacity of background projects
• focusDuration:1.5, // transition duration from bgd project to become in focus (seconds)
• bgScaleAnim:{"type":"scale","data":"day","sx":[0.02,0.25],"sy":[0.02,0.25],"tween":"linear","fn":"id"}, // background animation scale rule
• bgScaleAnimDurationRange:[220.0,380.0], // background animation scale rule duration range (seconds)
• changeFocusDuration:[100000,120000] // change duration of focus project switch. random number between range (seconds)