caryclark | 3257c12 | 2015-11-16 13:36:08 -0800 | [diff] [blame] | 1 | var circle = { |
| 2 | "center":{ "x":200, "y":200 }, |
| 3 | "radius":100 |
| 4 | } |
| 5 | |
| 6 | var gradients = { |
| 7 | "grad1": { "cx":200, "cy":200, "r":300, |
| 8 | "stops": [ |
| 9 | { "offset":0, "color": argb(76,0,0,255) }, |
| 10 | { "offset":1, "color": argb( 0,0,0,255) } |
| 11 | ] |
| 12 | }, |
| 13 | "grad2": { "cx":200, "cy":200, "r":300, |
| 14 | "stops": [ |
| 15 | { "offset":0, "color": argb(76,0,255,0) }, |
| 16 | { "offset":1, "color": argb( 0,0,255,0) } |
| 17 | ] |
| 18 | }, |
| 19 | "grad3": { "cx":200, "cy":200, "r":300, |
| 20 | "stops": [ |
| 21 | { "offset":0, "color": argb(76,255,0,0) }, |
| 22 | { "offset":1, "color": argb( 0,255,0,0) } |
| 23 | ] |
| 24 | }, |
| 25 | "grad4": { "cx":200, "cy":200, "r":300, |
| 26 | "stops": [ |
| 27 | { "offset":0, "color": argb(76,192,63,192) }, |
| 28 | { "offset":1, "color": argb( 0,192,63,192) } |
| 29 | ] |
| 30 | }, |
| 31 | "grad5": { "cx":200, "cy":200, "r":300, |
| 32 | "stops": [ |
| 33 | { "offset":0, "color": argb(76,127,127,0) }, |
| 34 | { "offset":1, "color": argb( 0,127,127,0) } |
| 35 | ] |
| 36 | }, |
| 37 | "grad6": { "cx":200, "cy":200, "r":300, |
| 38 | "stops": [ |
| 39 | { "offset":0, "color": argb(76,127,0,127) }, |
| 40 | { "offset":1, "color": argb( 0,127,0,127) } |
| 41 | ] |
| 42 | }, |
| 43 | "grad7": { "cx":200, "cy":200, "r":300, |
| 44 | "stops": [ |
| 45 | { "offset":0, "color": argb(76,0,127,127) }, |
| 46 | { "offset":1, "color": argb( 0,0,127,127) } |
| 47 | ] |
| 48 | }, |
| 49 | "grad8": { "cx":200, "cy":200, "r":300, |
| 50 | "stops": [ |
| 51 | { "offset":0, "color": argb(76,63,192,63) }, |
| 52 | { "offset":1, "color": argb( 0,63,192,63) } |
| 53 | ] |
| 54 | } |
| 55 | }; |
| 56 | |
| 57 | var paths = { |
| 58 | "cubicSegment1": [ |
| 59 | { "cubic": [ 200,200, 200,200, 200,200, 200,200 ] } |
| 60 | ], |
| 61 | "cubicSegment2": [ |
| 62 | { "cubic": [ 200,200, 250,200, 300,200, 300,100 ] } |
| 63 | ], |
| 64 | "curveSegment1": [ |
| 65 | { "cubic": [ 200,200, 250,200, 300,150, 300,100 ] } |
| 66 | ], |
| 67 | "curveSegment2": [ |
| 68 | { "cubic": [ 200,200, 250,200, 300,150, 200,100 ] } |
| 69 | ], |
| 70 | "curveSegment3": [ |
| 71 | { "cubic": [ 200,200, 350,200, 250,-150, 170,300 ] } |
| 72 | ], |
| 73 | "diagSegment": [ |
| 74 | { "line": [ 200,200, 100,100 ] } |
| 75 | ], |
| 76 | "horzSegment": [ |
| 77 | { "line": [ 200,200, 341.4,200 ] } |
| 78 | ], |
| 79 | "lineSegment": [ |
| 80 | { "line": [ 200,200, 200 + circle.radius * Math.cos(-22.5 * Math.PI / 180), |
| 81 | 200 + circle.radius * Math.sin(-22.5 * Math.PI / 180) ] } |
| 82 | ], |
| 83 | "span1": [ |
| 84 | { "quad": [ 200,200, 300,300, 200,300 ] } |
| 85 | ], |
| 86 | "span2": [ |
| 87 | { "cubic": [ 200,200, 100,300, 100,400, 200,300 ] } |
| 88 | ], |
| 89 | "span3": [ |
| 90 | { "cubic": [ 200,200, 300,100, 100,400, 300,200 ] } |
| 91 | ], |
| 92 | "span4": [ |
| 93 | { "quad": [ 200,200, 300,300, 400,300 ] } |
| 94 | ], |
| 95 | "span5": [ |
| 96 | { "quad": [ 200,200, 280,320, 200,400 ] } |
| 97 | ], |
| 98 | "span6": [ |
| 99 | { "quad": [ 200,200, 60,340, 100,400 ] } |
| 100 | ], |
| 101 | "vertSegment": [ |
| 102 | { "line": [ 200,200, 200,341.4 ] } |
| 103 | ], |
| 104 | "wedge1": [ |
| 105 | { "line": [ 200,200, 500,500 ] }, |
| 106 | { "arcTo": [ 375.74,624.36, 200,624.26, 424.26 ] }, |
| 107 | { "close": null } |
| 108 | ], |
| 109 | "wedge2": [ |
| 110 | { "line": [ 200,200, 200,624.26 ] }, |
| 111 | { "arcTo": [ 24.265,624.26, -100,500, 424.26 ] }, |
| 112 | { "close": null } |
| 113 | ], |
| 114 | "wedge3": [ |
| 115 | { "line": [ 200,200, 500,-100 ] }, |
| 116 | { "arcTo": [ 1138.22,537.70, 240,622.5, 424.26 ] }, |
| 117 | { "close": null } |
| 118 | ], |
| 119 | "wedge4": [ |
| 120 | { "line": [ 200,200, 500,500 ] }, |
| 121 | { "arcTo": [ 530.79,438.42, 579.47,389.74, 424.26 ] }, |
| 122 | { "close": null } |
| 123 | ], |
| 124 | "wedge5": [ |
| 125 | { "line": [ 200,200, 389.74,579.47 ] }, |
| 126 | { "arcTo": [ 284.94,563.441, 200,500, 424.26 ] }, |
| 127 | { "close": null } |
| 128 | ], |
| 129 | "wedge6": [ |
| 130 | { "line": [ 200,200, 10.26,579.47 ] }, |
| 131 | { "arcTo": [ -51.318,548.68, -100,500, 424.26 ] }, |
| 132 | { "close": null } |
| 133 | ], |
| 134 | "wedgeXY1": [ |
| 135 | { "line": [ 200,200, 500,-100 ] }, |
| 136 | { "arcTo": [ 624.26,24.265, 624.26,200, 424.26 ] }, |
| 137 | { "close": null } |
| 138 | ], |
| 139 | "wedgeXY2": [ |
| 140 | { "line": [ 200,200, 200,-175.74 ] }, |
| 141 | { "arcTo": [ 364.83,-196.61, 500,-100, 424.26 ] }, |
| 142 | { "close": null } |
| 143 | ], |
| 144 | "wedgeXY3": [ |
| 145 | { "line": [ 200,200, -100,-100 ] }, |
| 146 | { "arcTo": [ 35.170,-196.61, 200,-175.74, 424.26 ] }, |
| 147 | { "close": null } |
| 148 | ], |
| 149 | "wedgeXY4": [ |
| 150 | { "line": [ 200,200, -175.74,200 ] }, |
| 151 | { "arcTo": [ -196.61,35.170, -100,-100, 424.26 ] }, |
| 152 | { "close": null } |
| 153 | ], |
| 154 | "wedgeXY5": [ |
| 155 | { "line": [ 200,200, -100,500 ] }, |
| 156 | { "arcTo": [ -196.61,364.83, -175.74,200, 424.26 ] }, |
| 157 | { "close": null } |
| 158 | ], |
| 159 | "wedgeXY6": [ |
| 160 | { "line": [ 200,200, -100,500 ] }, |
| 161 | { "arcTo": [ 75.735,500, 200,624.26, 424.26 ] }, |
| 162 | { "close": null } |
| 163 | ], |
| 164 | "wedgeXY7": [ |
| 165 | { "line": [ 200,200, 200,624.26 ] }, |
| 166 | { "arcTo": [ 324.26,500, 500,500, 424.26 ] }, |
| 167 | { "close": null } |
| 168 | ], |
| 169 | "wedgeXY8": [ |
| 170 | { "line": [ 200,200, 500,500 ] }, |
| 171 | { "arcTo": [ 500,324.26, 624.26,200, 424.26 ] }, |
| 172 | { "close": null } |
| 173 | ], |
| 174 | "xaxis": [ |
| 175 | { "line": [ 100,200, 300,200 ] } |
| 176 | ], |
| 177 | "yaxis": [ |
| 178 | { "line": [ 200,100, 200,300 ] } |
| 179 | ] |
| 180 | }; |
| 181 | |
| 182 | var text = { |
| 183 | "curve1d1": { |
| 184 | "string":"Some curves initially occupy", "x":400, "y":200 |
| 185 | }, |
| 186 | "curve1d2": { |
| 187 | "string":"one-dimensional sectors, then diverge.", "x":400, "y":240 |
| 188 | }, |
| 189 | "curveMultiple1": { |
| 190 | "string":"A curve span may cover more", "x":400, "y":200 |
| 191 | }, |
| 192 | "curveMultiple2": { |
| 193 | "string":"than one sector.", "x":400, "y":240 |
| 194 | }, |
| 195 | "line1DDest1": { |
| 196 | "string":"Some lines occupy one-dimensional", "x":400, "y":200 |
| 197 | }, |
| 198 | "line1DDest2": { |
| 199 | "string":"sectors.", "x":400, "y":240 |
| 200 | }, |
| 201 | "lineSingle": { |
| 202 | "string":"Line spans are contained by a single sector.", "x":400, "y":200 |
| 203 | }, |
| 204 | "sector1": { |
| 205 | "string":"A sector is a wedge of a circle", "x":400, "y":200 |
| 206 | }, |
| 207 | "sector2": { |
| 208 | "string":"containing a range of points.", "x":400, "y":240 |
| 209 | }, |
| 210 | "sectorXY1": { |
| 211 | "string":"X > 0 Y < 0 -Y < X", "x":500, "y":460 |
| 212 | }, |
| 213 | "sectorXY2": { |
| 214 | "string":"X > 0 Y < 0 -Y > X", "x":500, "y":460 |
| 215 | }, |
| 216 | "sectorXY3": { |
| 217 | "string":"X < 0 Y < 0 Y < X", "x":500, "y":460 |
| 218 | }, |
| 219 | "sectorXY4": { |
| 220 | "string":"X < 0 Y < 0 Y > X", "x":500, "y":460 |
| 221 | }, |
| 222 | "sectorXY5": { |
| 223 | "string":"X < 0 Y > 0 -Y > X", "x":500, "y":460 |
| 224 | }, |
| 225 | "sectorXY6": { |
| 226 | "string":"X < 0 Y > 0 -Y < X", "x":500, "y":460 |
| 227 | }, |
| 228 | "sectorXY7": { |
| 229 | "string":"X > 0 Y > 0 Y > X", "x":500, "y":460 |
| 230 | }, |
| 231 | "sectorXY8": { |
| 232 | "string":"X > 0 Y > 0 Y < X", "x":500, "y":460 |
| 233 | }, |
| 234 | "sectorXY9": { |
| 235 | "string":"X > 0 Y == 0", "x":500, "y":460 |
| 236 | }, |
| 237 | "sectorXY10": { |
| 238 | "string":"Y > 0 0 == X", "x":500, "y":460 |
| 239 | }, |
| 240 | "sectorXY11": { |
| 241 | "string":"X < 0 Y == X", "x":500, "y":460 |
| 242 | }, |
| 243 | "sectorXYA": { |
| 244 | "string":"X > 0 Y > 0 Y < X", "x":500, "y":310 |
| 245 | }, |
| 246 | "sectorXYB": { |
| 247 | "string":"X < 0 Y > 0 -Y < X", "x":500, "y":360 |
| 248 | }, |
| 249 | "sectorXYC": { |
| 250 | "string":"X < 0 Y < 0 Y < X", "x":500, "y":410 |
| 251 | }, |
| 252 | "spanWedge": { |
| 253 | "string":"All spans are contained by a wedge", "x":400, "y":200 |
| 254 | }, |
| 255 | "trivialWedge1": { |
| 256 | "string":"Wedges that don't overlap can be", "x":400, "y":200 |
| 257 | }, |
| 258 | "trivialWedge2": { |
| 259 | "string":"easily sorted.", "x":400, "y":240 |
| 260 | }, |
| 261 | "xaxis1": { |
| 262 | "string":"-X", "x":100, "y":220 |
| 263 | }, |
| 264 | "xaxis2": { |
| 265 | "string":"+X", "x":300, "y":220 |
| 266 | }, |
| 267 | "yaxis1": { |
| 268 | "string":"-Y", "x":205, "y":100 |
| 269 | }, |
| 270 | "yaxis2": { |
| 271 | "string":"+Y", "x":205, "y":300 |
| 272 | } |
| 273 | }; |
| 274 | |
| 275 | var typefaces = { |
| 276 | "description": { "style":"normal", "family":"Helvetica,Arial" } |
| 277 | }; |
| 278 | |
| 279 | var paints = { |
| 280 | "axisStroke": { "style":"stroke", "color":rgb(191,191,191) }, |
| 281 | "axisTextDesc": { "paint":"textBase", "color":rgb(191,191,191) }, |
| 282 | "axisTextRight": { "paint":"axisTextDesc", "textAlign":"right" }, |
| 283 | "axisTextTop": { "paint":"axisTextDesc", "textBaseline":"hanging" }, |
| 284 | "diagSegment": { "style":"stroke", "color":rgb(127,63,127), "strokeWidth":2 }, |
| 285 | "gradient1": { "style":"fill", "gradient":"gradients.grad1", "color":alpha(255) }, |
| 286 | "gradient2": { "paint":"gradient1", "gradient":"gradients.grad2" }, |
| 287 | "gradient3": { "paint":"gradient1", "gradient":"gradients.grad3" }, |
| 288 | "gradient4": { "paint":"gradient1", "gradient":"gradients.grad4" }, |
| 289 | "gradient5": { "paint":"gradient1", "gradient":"gradients.grad5" }, |
| 290 | "gradient6": { "paint":"gradient1", "gradient":"gradients.grad6" }, |
| 291 | "gradient7": { "paint":"gradient1", "gradient":"gradients.grad7" }, |
| 292 | "gradient8": { "paint":"gradient1", "gradient":"gradients.grad8" }, |
| 293 | "horzSegment": { "paint":"diagSegment", "color":rgb(192,92,31) }, |
| 294 | "picture": { "color":alpha(255) }, |
| 295 | "sectorADesc": { "paint":"textBase", "color":rgb(0,0,255) }, |
| 296 | "sectorBDesc": { "paint":"textBase", "color":rgb(0,127,0) }, |
| 297 | "sectorCDesc": { "paint":"textBase", "color":rgb(255,0,0) }, |
| 298 | "sectorXY1": { "paint":"textBase", "color":rgb(192,63,192) }, |
| 299 | "sectorXY2": { "paint":"textBase", "color":rgb(127,127,0) }, |
| 300 | "sectorXY3": { "paint":"textBase", "color":rgb(255,0,0) }, |
| 301 | "sectorXY4": { "paint":"textBase", "color":rgb(127,0,127) }, |
| 302 | "sectorXY5": { "paint":"textBase", "color":rgb(0,127,127) }, |
| 303 | "sectorXY6": { "paint":"textBase", "color":rgb(0,127,0) }, |
| 304 | "sectorXY7": { "paint":"textBase", "color":rgb(63,192,63) }, |
| 305 | "sectorXY8": { "paint":"textBase", "color":rgb(0,0,255) }, |
| 306 | "sectorXY9": { "paint":"textBase", "color":rgb(192,92,31) }, |
| 307 | "sectorXY10": { "paint":"textBase", "color":rgb(31,92,192) }, |
| 308 | "sectorXY11": { "paint":"textBase", "color":rgb(127,63,127) }, |
| 309 | |
| 310 | "stroke": { "style":"stroke", "color":rgb(0,0,0) }, |
| 311 | "textBase": { "style":"fill", "color":rgb(0,0,0), "typeface":"description", |
| 312 | "textSize":"1.3rem" }, |
| 313 | "vertSegment": { "paint":"diagSegment", "color":rgb(31,92,192) }, |
| 314 | }; |
| 315 | |
| 316 | var pictures = { |
| 317 | "curve1DDestText": [ |
| 318 | { "draw":"text.curve1d1", "paint":"paints.textBase" }, |
| 319 | { "draw":"text.curve1d2", "paint":"paints.textBase" } |
| 320 | ], |
| 321 | "curveMultipleText": [ |
| 322 | { "draw":"text.curveMultiple1", "paint":"paints.textBase" }, |
| 323 | { "draw":"text.curveMultiple2", "paint":"paints.textBase" } |
| 324 | ], |
| 325 | "line1DDestText": [ |
| 326 | { "draw":"text.line1DDest1", "paint":"paints.textBase" }, |
| 327 | { "draw":"text.line1DDest2", "paint":"paints.textBase" } |
| 328 | ], |
| 329 | "sectorXYA": [ |
| 330 | { "draw":"text.sectorXYA", "paint":"paints.sectorADesc" }, |
| 331 | { "draw":"paths.wedgeXY8", "paint":"paints.gradient1" } |
| 332 | ], |
| 333 | "sectorXYB": [ |
| 334 | { "draw":"text.sectorXYB", "paint":"paints.sectorBDesc" }, |
| 335 | { "draw":"paths.wedgeXY6", "paint":"paints.gradient2" } |
| 336 | ], |
| 337 | "sectorXYC": [ |
| 338 | { "draw":"text.sectorXYC", "paint":"paints.sectorCDesc" }, |
| 339 | { "draw":"paths.wedgeXY3", "paint":"paints.gradient3" } |
| 340 | ], |
| 341 | "sectorText": [ |
| 342 | { "draw":"text.sector1", "paint":"paints.textBase" }, |
| 343 | { "draw":"text.sector2", "paint":"paints.textBase" } |
| 344 | ], |
| 345 | "trivialWedgeSpans": [ |
| 346 | { "draw":"paths.span4", "paint":"paints.stroke" }, |
| 347 | { "draw":"paths.wedge4", "paint":"paints.gradient4" }, |
| 348 | { "draw":"paths.span5", "paint":"paints.stroke" }, |
| 349 | { "draw":"paths.wedge5", "paint":"paints.gradient5" }, |
| 350 | { "draw":"paths.span6", "paint":"paints.stroke" }, |
| 351 | { "draw":"paths.wedge6", "paint":"paints.gradient6" } |
| 352 | ], |
| 353 | "trivialWedgeText": [ |
| 354 | { "draw":"text.trivialWedge1", "paint":"paints.textBase" }, |
| 355 | { "draw":"text.trivialWedge2", "paint":"paints.textBase" } |
| 356 | ], |
| 357 | "xaxis": [ |
| 358 | { "draw":"paths.xaxis", "paint":"paints.axisStroke" }, |
| 359 | { "draw":"text.xaxis1", "paint":"paints.axisTextDesc" }, |
| 360 | { "draw":"text.xaxis2", "paint":"paints.axisTextRight" } |
| 361 | ], |
| 362 | "yaxis": [ |
| 363 | { "draw":"paths.yaxis", "paint":"paints.axisStroke" }, |
| 364 | { "draw":"text.yaxis1", "paint":"paints.axisTextTop" }, |
| 365 | { "draw":"text.yaxis2", "paint":"paints.axisTextDesc" } |
| 366 | ], |
| 367 | "axes": [ |
| 368 | { "draw":"pictures.xaxis", "paint":"paints.picture" }, |
| 369 | { "draw":"pictures.yaxis", "paint":"paints.picture" } |
| 370 | ] |
| 371 | }; |
| 372 | |
| 373 | var gradientLookup = [ |
| 374 | 0, 4, 5, 3, 6, 7, 2, 8, 1 |
| 375 | ]; |
| 376 | |
| 377 | var keyframes = { |
| 378 | "_default": [ |
| 379 | { "actions": [ |
| 380 | { "range":[0,255], "paint":"paints.picture", "target":"paint.color", |
| 381 | "params":"target", "formula":"alpha(value, params)" } |
| 382 | ]} |
| 383 | ], |
| 384 | "keyframe1": [ |
| 385 | { "time": 0, "duration":1000, "canvas":"clear", "actions": [ |
| 386 | { "draw":"text.spanWedge", "paint":"paints.textBase" } |
| 387 | ]}, |
| 388 | { "time":1000, "duration":1000, "actions": [ |
| 389 | { "ref":"span1", "draw":"paths.span1", "paint":"paints.stroke" } |
| 390 | ]}, |
| 391 | { "time":1500, "duration":1500, "actions": [ |
| 392 | { "ref":"wedge1", "draw":"paths.wedge1", "paint":"paints.gradient1" } |
| 393 | ]}, |
| 394 | { "time":3500, "duration": 500, "actions": [ |
| 395 | { "ref":"span1", "range":[255,0] }, |
| 396 | { "ref":"wedge1", "range":[255,0] } |
| 397 | ]}, |
| 398 | { "time":4000, "duration":1000, "actions": [ |
| 399 | { "ref":"span2", "draw":"paths.span2", "paint":"paints.stroke" } |
| 400 | ]}, |
| 401 | { "time":4500, "duration":1500, "actions": [ |
| 402 | { "ref":"wedge2", "draw":"paths.wedge2", "paint":"paints.gradient2" } |
| 403 | ]}, |
| 404 | { "time":6500, "duration": 500, "actions": [ |
| 405 | { "ref":"span2", "range":[255,0] }, |
| 406 | { "ref":"wedge2", "range":[255,0] } |
| 407 | ]}, |
| 408 | { "time":7000, "duration":1000, "actions": [ |
| 409 | { "draw":"paths.span3", "paint":"paints.stroke" } |
| 410 | ]}, |
| 411 | { "time":7500, "duration":1500, "actions": [ |
| 412 | { "draw":"paths.wedge3", "paint":"paints.gradient3" } |
| 413 | ]} |
| 414 | ], |
| 415 | "keyframe2": [ |
| 416 | { "time": 0, "duration":1000, "canvas":"clear", "actions": [ |
| 417 | { "draw":"pictures.trivialWedgeText", "paint":"paints.picture" } |
| 418 | ]}, |
| 419 | { "time":2000, "duration":1500, "actions": [ |
| 420 | { "draw":"pictures.trivialWedgeSpans", "paint":"paints.picture" } |
| 421 | ]} |
| 422 | ], |
| 423 | "keyframe3": [ |
| 424 | { "time": 0, "duration":1000, "canvas":"clear", "actions": [ |
| 425 | { "draw":"pictures.sectorText" }, |
| 426 | { "draw":"pictures.xaxis" } |
| 427 | ]}, |
| 428 | { "time": 500, "duration":1000, "actions": [ |
| 429 | { "draw":"pictures.yaxis" } |
| 430 | ]}, |
| 431 | { "time":2000, "duration":1500, "actions": [ |
| 432 | { "draw":"pictures.sectorXYA" } |
| 433 | ]}, |
| 434 | { "time":3000, "duration":1500, "actions": [ |
| 435 | { "draw":"pictures.sectorXYB" } |
| 436 | ]}, |
| 437 | { "time":4000, "duration":1500, "actions": [ |
| 438 | { "draw":"pictures.sectorXYC" } |
| 439 | ]} |
| 440 | ], |
| 441 | "keyframe4": [ |
| 442 | { "time": 0, "duration":1000, "canvas":"clear", "actions": [ |
| 443 | { "draw":"text.lineSingle", "paint":"paints.textBase" }, |
| 444 | { "draw":"pictures.axes" } |
| 445 | ]}, |
| 446 | { "time":1000, "duration":1000, "actions": [ |
| 447 | { "ref":"line", "draw":"paths.lineSegment", "paint":"paints.stroke" } |
| 448 | ]}, |
| 449 | { "time":1850, "duration":1000, "actions": [ |
| 450 | { "ref":"sectorXY1", "draw":"text.sectorXY1", "paint":"paints.sectorXY1" }, |
| 451 | { "ref":"sectorXY1", "target":"draw.y", "formula":260 }, |
| 452 | { "ref":"wedgeXY1", "draw":"paths.wedgeXY1", "paint":"paints.gradient4" } |
| 453 | ]}, |
| 454 | { "time":3000, "duration":4000, "actions": [ |
| 455 | { "ref":"line", "target":"draw[0].line[2]", |
| 456 | "range":[-22.5 * Math.PI / 180, (-22.5 - 360) * Math.PI / 180], "params":"circle", |
| 457 | "formula":"params.center.x + params.radius * Math.cos(value)" |
| 458 | }, |
| 459 | { "ref":"line", "target":"draw[0].line[3]", |
| 460 | "range":[-22.5 * Math.PI / 180, (-22.5 - 360) * Math.PI / 180], "params":"circle", |
| 461 | "formula":"params.center.y + params.radius * Math.sin(value)" |
| 462 | } |
| 463 | ]}, |
| 464 | { "for":["i=2", "i<=8", "++i"], "time":"2250 + 500 * i", "duration":100, "actions": [ |
| 465 | { "ref":"'sectorXY' + i", "draw":"'text.sectorXY' + i", |
| 466 | "paint":"'paints.sectorXY' + i" }, |
| 467 | { "ref":"'sectorXY' + i", "target":"draw.y", "formula":260 }, |
| 468 | { "ref":"'wedgeXY' + i", "draw":"'paths.wedgeXY' + i", |
| 469 | "paint":"'paints.gradient' + gradientLookup[i]" }, |
| 470 | { "ref":"'sectorXY' + (i - 1)", "range":[255,0] }, |
| 471 | { "ref":"'wedgeXY' + (i - 1)", "range":[255,0] } |
| 472 | ]}, |
| 473 | { "time":2250 + 500 * 9, "duration":100, "actions": [ |
| 474 | { "ref":"sectorXY1" }, |
| 475 | { "ref":"wedgeXY1" }, |
| 476 | { "ref":"sectorXY8", "range":[255,0] }, |
| 477 | { "ref":"wedgeXY8", "range":[255,0] } |
| 478 | ]} |
| 479 | ], |
| 480 | "keyframe5": [ |
| 481 | { "time": 0, "duration":1000, "canvas":"clear", "actions": [ |
| 482 | { "draw":"pictures.curveMultipleText" }, |
| 483 | { "draw":"pictures.axes" } |
| 484 | ]}, |
| 485 | { "time":1000, "duration":1000, "actions": [ |
| 486 | { "ref":"curve", "draw":"paths.curveSegment1", "paint":"paints.stroke" } |
| 487 | ]}, |
| 488 | { "time":2000, "duration":1000, "actions": [ |
| 489 | { "draw":"text.sectorXY1", "paint":"paints.sectorXY1", |
| 490 | "target":"draw.y", "formula":260 + 1 * 25}, |
| 491 | { "draw":"paths.wedgeXY1", "paint":"paints.gradient4" } |
| 492 | ]}, |
| 493 | { "time":3000, "duration":1000, "actions": [ |
| 494 | { "ref":"curve", "range":[0,1], "target":"draw", |
| 495 | "params":["paths.curveSegment1","paths.curveSegment2"], |
| 496 | "formula":"interp_paths(value, params)" |
| 497 | } |
| 498 | ]}, |
| 499 | { "time":4000, "duration":1000, "actions": [ |
| 500 | { "draw":"text.sectorXY2", "paint":"paints.sectorXY2", |
| 501 | "target":"draw.y", "formula":260 + 2 * 25}, |
| 502 | { "draw":"paths.wedgeXY2", "paint":"paints.gradient5" } |
| 503 | ]}, |
| 504 | { "time":5000, "duration":1000, "actions": [ |
| 505 | { "ref":"curve", "range":[0,1], "target":"draw", |
| 506 | "params":["paths.curveSegment2","paths.curveSegment3"], |
| 507 | "formula":"interp_paths(value, params)" |
| 508 | } |
| 509 | ]}, |
| 510 | { "for":["i=3", "i<=6", "++i"], "time":"6000", "actions": [ |
| 511 | { "ref":"'text' + i", "draw":"'text.sectorXY' + i", "paint":"'paints.sectorXY' + i", |
| 512 | "target":"draw.y", "formula":"260 + i * 25" }, |
| 513 | ]}, |
| 514 | { "for":["i=3", "i<=6", "++i"], "time":"6000", "duration":1000, "actions": [ |
| 515 | { "ref":"'text' + i" }, |
| 516 | ]}, |
| 517 | { "time":6000, "duration":1000, "actions": [ |
| 518 | { "draw":"paths.wedgeXY3", "paint":"paints.gradient3" }, |
| 519 | { "draw":"paths.wedgeXY4", "paint":"paints.gradient6" }, |
| 520 | { "draw":"paths.wedgeXY5", "paint":"paints.gradient7" }, |
| 521 | { "draw":"paths.wedgeXY6", "paint":"paints.gradient2" }, |
| 522 | ]} |
| 523 | ], |
| 524 | "keyframe6": [ |
| 525 | { "time": 0, "duration":1000, "canvas":"clear", "actions": [ |
| 526 | { "draw":"pictures.line1DDestText" }, |
| 527 | { "draw":"pictures.axes" } |
| 528 | ]}, |
| 529 | { "time":2000, "duration":1000, "actions": [ |
| 530 | { "ref":"xy9", "draw":"text.sectorXY9", "paint":"paints.sectorXY9" }, |
| 531 | { "ref":"xy9", "target":"draw.y", "formula":260 + 25}, |
| 532 | { "draw":"paths.horzSegment", "paint":"paints.horzSegment" } |
| 533 | ]}, |
| 534 | { "time":3000, "duration":1000, "actions": [ |
| 535 | { "ref":"xy10", "draw":"text.sectorXY10", "paint":"paints.sectorXY10" }, |
| 536 | { "ref":"xy10", "target":"draw.y", "formula":260 + 50 }, |
| 537 | { "draw":"paths.vertSegment", "paint":"paints.vertSegment" } |
| 538 | ]}, |
| 539 | { "time":4000, "duration":1000, "actions": [ |
| 540 | { "ref":"xy11", "draw":"text.sectorXY11", "paint":"paints.sectorXY11" }, |
| 541 | { "ref":"xy11", "target":"draw.y", "formula":260 + 75 }, |
| 542 | { "draw":"paths.diagSegment", "paint":"paints.diagSegment" } |
| 543 | ]} |
| 544 | ], |
| 545 | "keyframe7": [ |
| 546 | { "time": 0, "duration":1000, "canvas":"clear", "actions": [ |
| 547 | { "draw":"pictures.curve1DDestText" }, |
| 548 | { "draw":"pictures.axes" } |
| 549 | ]}, |
| 550 | { "time":2000, "duration":1000, "actions": [ |
| 551 | { "ref":"cubic", "draw":"paths.cubicSegment1", "paint":"paints.stroke" }, |
| 552 | { "ref":"cubic", "range":[0,1], "target":"draw", |
| 553 | "params":"paths.cubicSegment2", "formula":"path_partial(value, params)" }, |
| 554 | { "ref":"xy9", "draw":"text.sectorXY9", "paint":"paints.sectorXY9" }, |
| 555 | { "ref":"xy9", "target":"draw.y", "formula":260 + 25}, |
| 556 | { "draw":"paths.horzSegment", "paint":"paints.horzSegment" } |
| 557 | ]}, |
| 558 | { "time":3000, "duration":1000, "actions": [ |
| 559 | { "ref":"xy1", "draw":"text.sectorXY1", "paint":"paints.sectorXY1" }, |
| 560 | { "ref":"xy1", "target":"draw.y", "formula":260 + 60}, |
| 561 | { "draw":"paths.wedgeXY1", "paint":"paints.gradient4" } |
| 562 | ]}, |
| 563 | ] |
| 564 | }; |