Grouping scenes

### Transforming multiple scenes
It can be tedious to apply the same transformation (matrix, active, ...) on a subset of the scenes, as you will need to update many parameters in a timer for example.
The simplest way to do this is to group scenes together, and transform the group.

The following animates:

- the video from 90% to 100% , sticking it to the top-left corner and animated the rounded rectangle effect
- the overlay group position from visible to hidden past the bottom-right corner


```
[
{ "id": "seq1", "seq": [ { "src": [{"in": "media.mp4"}], "start": 1, "stop": 5} ] },
{"js": "clear", "color": "cyan"},
{"id":"v1", "sources": ["seq1"], "x": -5, "y": 5, "width": 90, "height": 90, "rx":10, "ry":"x"},

{"id": "gr1", "scenes": [
{"id": "logo", "x": 45, "y": 40, "width": 10, "height": "width", "img":"logo.png", "alpha":0.5},
{"x": 0, "y": -45, "width": 100, "height": 10, "fill":"linear", "grad_p": [0, 0.5, 1], "grad_c": ["none", "white", "red"]},
{"id": "text", "x": 0, "y": -45, "width": 100, "height": 10, "text": ["Super Text"], "size": 50, "align": "center", "fill": "black"}
]},

{"start": 0, "loop": true, "dur": 2, "keys": [0, 0.5, 1], "anims": [
    {"values": [10, 0, 10], "targets": ["v1@rx"]},
    {"values": [-5, 0, -5], "targets": ["v1@x"]},
    {"values": [5, 0, 5], "targets": ["v1@y"]},
    {"values": [90, 100, 90], "targets": ["v1@width", "v1@height"]},

    {"values": [0, 20, 0], "targets": ["gr1@x"]},
    {"values": [0, -20, 0], "targets": ["gr1@y"]}
 ]
}
```

### Group opacity

Grouping is also needed when you define an overlay composed of several shapes and want a global transparency on this overlay; in such cases, setting alpha on each scene will not achieve the same result, as objects will blend over the previously drawn canvas.

A group with `opacity` less than 1 will be rendered offscreen and drawn with the desired alpha value: 

```
[
{ "id": "seq1", "seq": [ { "src": [{"in": "media.mp4"}], "start": 1, "stop": 5} ] },
{"id":"v1", "sources": ["seq1"]},

{"id": "gr1", "y": -45, "opacity": 0.5, "scenes": [
{"width": 100, "height": 10, "fill":"green"},
{"y": -3, "width": 90, "height": 2, "fill":"white"},
{"width": 100, "height": 10, "text": ["Super Text"], "size": 50, "align": "center", "fill": "black"}
]}
]
```

You can also use the `scaler` property to change the offscreen resolution of the group, to create a pixelated effect, here combined with opacity changing: 

```
[
{ "id": "seq1", "seq": [ { "src": [{"in": "media.mp4"}], "start": 1, "stop": 5} ] },
{"id":"v1", "sources": ["seq1"]},

{"id": "gr1", "y": -45, "opacity": 0.5, "scenes": [
{"width": 100, "height": 10, "fill":"green"},
{"y": -3, "width": 90, "height": 2, "fill":"white"},
{"width": 100, "height": 10, "text": ["Super Text"], "size": 50, "align": "center", "fill": "black"}
]},

{ "start": 0, "loop": true, "dur":2, "keys": [0, 0.5, 1], "anims": [
	{"values": [1, 20, 1], "targets": ["gr1@scaler"] },
	{"values": [1, 0, 1], "targets": ["gr1@opacity"] }
] }
]
```

### Group or scene re-use

A group object can act as a re-use of an existing scene or group in a different transformation hierarchy, through the `use` property. In case this reuse result in a recursive draw, the `use_depth` property allows you to control how many recursions shall be drawn.
 
The following example shows a simple fractal pattern with 20 recursions:

```
[
{ "id": "seq1", "seq": [ { "src": [{"in": "media.mp4"}], "start": 1, "stop": 5} ] },
{"id":"v1", "sources": ["seq1"]},

{"id": "gr1", "scenes": [
{"width": 20, "height": "width", "fill":"none", "line_color": "red", "line_width": 2},
{"use": "gr1", "vscale":0.85, "hscale":0.85, "rotation":10, "use_depth": 20}
]}
]
```

This works with video scenes too:

```
[
{ "id": "seq1", "seq": [ { "src": [{"in": "media.mp4"}], "start": 1, "stop": 5} ] },
{"id": "gr1", "scenes": [
{"id":"v1", "sources": ["seq1"]},
{"use": "gr1", "vscale":0.85, "hscale":0.85, "rotation":10, "use_depth": 20}
]}
]
```