Permalink
Browse files

Merge from master and fix conflicts

  • Loading branch information...
padolsey committed Oct 18, 2012
2 parents 22424a3 + d01fbf9 commit fd34f4857be11bf6df2382f6c56a25c8ece39dc1
Showing with 1,344 additions and 1,492 deletions.
  1. +5 −0 CHANGELOG
  2. +1 −0 example/library/index.html
  3. +2 −3 example/library/movies/10000-objects.js
  4. +3 −4 example/library/movies/animation-circles.js
  5. +4 −4 example/library/movies/animation-clone.js
  6. +9 −4 example/library/movies/animation-color.js
  7. +3 −3 example/library/movies/animation-events.js
  8. +6 −6 example/library/movies/animation-gradient.js
  9. +3 −3 example/library/movies/animation-keyframes.js
  10. +3 −3 example/library/movies/animation-morph-2.js
  11. +2 −2 example/library/movies/animation-morph.js
  12. +5 −1 example/library/movies/animation-multiprop.js
  13. +5 −1 example/library/movies/animation-rotation.js
  14. +4 −4 example/library/movies/animation-shared.js
  15. +1 −9 example/library/movies/animation-stars-2.js
  16. +1 −9 example/library/movies/animation-stars.js
  17. +4 −4 example/library/movies/animation-unbound.js
  18. +3 −3 example/library/movies/assets-loading-image-simple.js
  19. +6 −6 example/library/movies/audio-button.js
  20. 0 example/library/movies/bbdevcon.js
  21. +2 −2 example/library/movies/bitmap-move-rotation.js
  22. +1 −1 example/library/movies/bitmap-source.js
  23. +1 −1 example/library/movies/bitmap.js
  24. +7 −7 example/library/movies/blobs-by-manfred.js
  25. +0 −106 example/library/movies/breakout.js
  26. +6 −8 example/library/movies/charts-bars-3D.js
  27. +3 −3 example/library/movies/charts-bubbles.js
  28. +3 −3 example/library/movies/clip-and-mask.js
  29. +3 −3 example/library/movies/clip-animated.js
  30. +1 −1 example/library/movies/color.js
  31. +8 −8 example/library/movies/demo-questionaire-v2.js
  32. +1 −1 example/library/movies/displayobject-delete.js
  33. +2 −2 example/library/movies/event-bubble.js
  34. +2 −2 example/library/movies/event-drag.js
  35. +2 −2 example/library/movies/execution-order.js
  36. +2 −2 example/library/movies/fill-image.js
  37. +2 −2 example/library/movies/filter-blur.js
  38. +11 −11 example/library/movies/filter-list.js
  39. +3 −3 example/library/movies/filter-multi.js
  40. +4 −4 example/library/movies/fx-morph.js
  41. +3 −3 example/library/movies/group-add-and-remove.js
  42. +7 −7 example/library/movies/group-nested-remove.js
  43. +5 −5 example/library/movies/group-nested.js
  44. +2 −2 example/library/movies/group.js
  45. +8 −8 example/library/movies/layering.js
  46. +2 −2 example/library/movies/logo.js
  47. +3 −3 example/library/movies/movie.js
  48. +0 −1 example/library/movies/movie_list.js
  49. +1 −1 example/library/movies/nested-movies-clear.js
  50. +2 −2 example/library/movies/pacman.js
  51. +8 −8 example/library/movies/radial-gradients.js
  52. +4 −6 example/library/movies/raining-rainbows.js
  53. +13 −13 example/library/movies/shape-arc.js
  54. +2 −2 example/library/movies/shape-center-of-arc.js
  55. +4 −4 example/library/movies/shape-clone.js
  56. +2 −2 example/library/movies/shape-getPointAtLength.js
  57. +5 −5 example/library/movies/shape-simple.js
  58. +1 −1 example/library/movies/shape-square.js
  59. +1 −1 example/library/movies/sprite.js
  60. +1 −1 example/library/movies/star-shape.js
  61. +1 −1 example/library/movies/star-using-mask.js
  62. +4 −4 example/library/movies/stepping_feet.js
  63. +6 −8 example/library/movies/text.js
  64. +1 −1 example/library/movies/tr-dropshadow.js
  65. +2 −2 example/library/movies/tr-line.js
  66. +2 −2 example/library/movies/ugly2polygon-morph.js
  67. +2 −2 example/library/movies/ugly2polygon-morph2.js
  68. +6 −6 example/library/movies/ui-button.js
  69. +1 −1 example/library/movies/ui-debugger.js
  70. +1 −1 example/library/movies/video-remote.js
  71. +1 −1 example/library/movies/video.js
  72. +0 −1 src/bootstrapper/context/iframe/context.js
  73. +40 −2 src/bootstrapper/context/node/context.js
  74. +8 −14 src/color.js
  75. +6 −473 src/runner/animation/animation.js
  76. +0 −38 src/runner/animation/color_translations.js
  77. +0 −33 src/runner/animation/corner_radius_translations.js
  78. +0 −118 src/runner/animation/filter_translations.js
  79. +0 −105 src/runner/animation/gradient_translations.js
  80. +239 −177 src/runner/animation/keyframe_animation.js
  81. +0 −48 src/runner/animation/matrix_translations.js
  82. +110 −0 src/runner/animation/properties_tween.js
  83. +61 −0 src/runner/animation/property_tween.js
  84. +0 −57 src/runner/animation/segment_translations.js
  85. +30 −0 src/runner/animation/translators/color.js
  86. +25 −0 src/runner/animation/translators/corner_radius.js
  87. +102 −0 src/runner/animation/translators/filter.js
  88. +99 −0 src/runner/animation/translators/gradient.js
  89. +27 −0 src/runner/animation/translators/matrix.js
  90. +46 −0 src/runner/animation/translators/segment.js
  91. +1 −1 src/runner/display_object.js
  92. +20 −10 src/runner/matrix.js
  93. +10 −8 src/runner/path/path.js
  94. +48 −30 test/animation/animation-spec.js
  95. +84 −20 test/animation/keyframe_animation-spec.js
  96. +62 −0 test/animation/properties_tween-spec.js
  97. +31 −0 test/animation/property_tween-spec.js
  98. +18 −9 test/color-spec.js
  99. +40 −1 test/matrix-spec.js
  100. +2 −0 test/runner.html
View
@@ -7,6 +7,11 @@ v0.4.1
disable/enable the context menu from the `bonsai.run` configuration object.
* Introduce MediaDisplayObject that combines the basic functionality of
Video and Audio.
+* Fixed examples to be in line with the documentation.
+* Fix out-of-range hsl color values
+* Fix out-of-range alpha values when parsing rgba() strings
+* Add additional method signature for new Matrix([a, b, c, d, tx, ty])
+* Add Matrix.fromString() method to create new Matrix instance from a string.
* Rename DisplayObject#getComputed to DisplayObject#getBoundingBox and improve
implementation for calculating the bounding box of paths
@@ -77,6 +77,7 @@
url: 'movies/' + script + '?' + new Date().getTime(),
width: document.width,
height: document.height - 50,
+ framerate: 60,
fpsLog: /animation/.test(script) // only show FPS log on animations
});
});
@@ -1,8 +1,7 @@
-stage.addChild(bonsai.Path.rect(500, 0, 100, 100).attr('fillColor', 'random'));
+stage.addChild(new Rect(500, 0, 100, 100).attr('fillColor', 'random'));
setTimeout(function() {
for (var i = 0; i < 10000; i++) {
var factor = i % 500, add = i / 50 | 0;
-
- stage.addChild(bonsai.Path.rect(10*factor+add,10*factor, 100, 100).attr('fillColor', 'random'));
+ stage.addChild(new Rect(10*factor+add,10*factor, 100, 100).attr('fillColor', 'random'));
}
}, 100);
@@ -15,12 +15,12 @@ for (var i = 0; i < circles; ++i) {
y = centerY + distance * -Math.cos(f*2*Math.PI),
radius = random() * radiusVar + radiusMin;
- circle = bonsai.Path.
- circle(x, y, radius).
-// attr({fillColor: 'hsl(' + (i / circles * 360) + ', 100%, 50%)'});
+ circle = new Circle(x, y, radius).
attr({fillColor: 'random', fillGradient: bonsai.gradient.radial(['#FFFFFF88', '#FFFFFF00'])});
+
circle.x = x;
circle.y = y;
+
stage.addChild(circle);
}
@@ -29,7 +29,6 @@ stage.length(frames);
var spread = 80;
stage.on(0, function() {
for (var i = 0, circle; (circle = c[i++]); ) {
-
circle.animate(frames, {
x: circle.x + spread * random() - spread / 2,
y: circle.y + spread * random() - spread / 2
@@ -1,13 +1,13 @@
/**
* Cloned animations. Note how the cloned animation does not pause along with the original one.
*/
-var shape1 = bonsai.Path.rect(0, 50, 100, 100).attr({fillColor: 'red'});
-var shape2 = bonsai.Path.rect(0, 200, 100, 100).attr({fillColor: 'green'});
-var shape3 = bonsai.Path.rect(0, 350, 100, 100).attr({fillColor: 'blue'});
+var shape1 = new Rect(0, 50, 100, 100).attr({fillColor: 'red'});
+var shape2 = new Rect(0, 200, 100, 100).attr({fillColor: 'green'});
+var shape3 = new Rect(0, 350, 100, 100).attr({fillColor: 'blue'});
stage.children([shape1,shape2,shape3]);
-var fadeOutAnim = new bonsai.Animation('3s', { opacity: 0 });
+var fadeOutAnim = new Animation('3s', { opacity: 0 });
@@ -1,8 +1,13 @@
/**
* Animated Color
*/
-var rect = bonsai.Path.rect(150, 150, 150, 150).attr({fillColor: 'red', strokeColor: 'green'});
+var rect = new Rect(150, 150, 150, 150).attr({
+ fillColor: 'red',
+ strokeColor: 'green'
+}).addTo(stage);
-stage.addChild(rect);
-
-rect.animate('3s', {fillColor: 'blue', strokeColor: 'yellow', strokeWidth: 70});
+rect.animate('3s', {
+ fillColor: 'blue',
+ strokeColor: 'yellow',
+ strokeWidth: 70
+});
@@ -2,16 +2,16 @@
* Animation events
*/
-var shape1 = bonsai.Path.rect(0, 50, 100, 100).attr({fillColor: 'red'});
-var shape2 = bonsai.Path.rect(0, 200, 100, 100).attr({fillColor: 'green'});
+var shape1 = new Rect(0, 50, 100, 100).attr({fillColor: 'red'});
+var shape2 = new Rect(0, 200, 100, 100).attr({fillColor: 'green'});
stage.children([shape1,shape2]);
var onEnd = function(animation) { console.log('animation ended'); };
var onStart = function(animation) { console.log('animation started'); };
// explicit listener
-var anim = new bonsai.Animation('1s', { x: 300 });
+var anim = new Animation('1s', { x: 300 });
anim.on('play', onStart);
anim.on('end', onEnd);
shape1.animate(anim);
@@ -1,16 +1,16 @@
/**
* Animated Color
*/
-var rect = bonsai.Path.rect(10, 10, 500, 500).attr({
+var rect = new Rect(10, 10, 500, 500).attr({
fillGradient: bonsai.gradient.linear('45', [
'green', 'yellow'
]),
strokeWidth: 20,
strokeGradient: gradient.linear(0, ['red', 'yellow', 'orange', 'red'], 2)
});
-var rectOverlay = bonsai.Path.rect(20, 20, 500, 500).attr({
- fillGradient: bonsai.gradient.radial([
+var rectOverlay = new Rect(20, 20, 500, 500).attr({
+ fillGradient: gradient.radial([
'rgba(255,255,255,0.6)', 'rgba(255,255,255,0)'
], 10, 100, 0)
});
@@ -19,14 +19,14 @@ stage.addChild(rect);
stage.addChild(rectOverlay);
rect.animate('3s', {
- fillGradient: bonsai.gradient.linear('-45', [
- bonsai.color('red').darker(.2), 'orange'
+ fillGradient: gradient.linear('-45', [
+ color('red').darker(.2), 'orange'
]),
strokeGradient: gradient.linear(0, ['blue', 'pink', 'purple', 'blue'], 2)
});
rectOverlay.animate('3s', {
- fillGradient: bonsai.gradient.radial([
+ fillGradient: gradient.radial([
'rgba(255,255,255,0.6)', 'rgba(255,255,255,0)'
], 80, 0, 100)
});
@@ -1,9 +1,9 @@
/**
* Animated attributes
*/
-var shape = bonsai.Path.rect(0, 0, 100, 100).attr({fillColor: 'red'});
+var shape = new Rect(0, 0, 100, 100).attr({fillColor: 'red'});
-var animation = new bonsai.KeyframeAnimation('4s', {
+var animation = new KeyframeAnimation('4s', {
'0s': {x: 0, y: 0},
'1s': {y: 0, x: 400},
'2s': {x: 400, y: 400},
@@ -16,7 +16,7 @@ shape.animate(animation);
// Animate the fillColor, strokeColor and position.
-var animation = new bonsai.KeyframeAnimation('4s', {
+var animation = new KeyframeAnimation('4s', {
from: {x: 400, y: 0, fillColor: 'blue', strokeColor:'black'},
'1s': {x: 0, y: 0, fillColor: 'yellow',strokeColor:'red'},
'2s': {x: 0, y: 400, fillColor: 'green', strokeColor:'green'},
@@ -9,8 +9,8 @@ that don't do anything, but can be animated by the Animation class
*/
-var a = Path.rect(10, 10, 400, 150).attr('fillColor', 'red');
-var b = Path.star(100, 100, 100, 5).attr('fillColor', 'blue');
+var a = new Rect(10, 10, 400, 150).attr('fillColor', 'red');
+var b = new Star(100, 100, 100, 5).attr('fillColor', 'blue');
var numberOfCurves = Math.max(
a.attr('segments').length,
@@ -28,7 +28,7 @@ var animation = new Animation('3s', {
y: b.attr('y')
});
-animation.setSubject(a);
+animation.addSubject(a);
a.addTo(stage);
animation.play();
@@ -1,8 +1,8 @@
-var a = Path.star(100, 100, 100, 5).attr({
+var a = new Star(100, 100, 100, 5).attr({
fillColor: 'red',
opacity: .5
});
-var b = Path.star(250, 250, 200, 10).attr({
+var b = new Star(250, 250, 200, 10).attr({
fillColor: 'blue'
});
@@ -1,7 +1,11 @@
/**
* Animated attributes
*/
-var rectPath = bonsai.Path.rect(50, 50, 100, 100).attr({fillColor: 'red', strokeColor: 'green', strokeWidth: 5});
+var rectPath = new Rect(50, 50, 100, 100).attr({
+ fillColor: 'red',
+ strokeColor: 'green',
+ strokeWidth: 5
+});
stage.addChild(rectPath);
@@ -11,4 +11,8 @@ var rectPath = new Rect(0, 0, 150, 150).attr({
stage.addChild(rectPath);
-rectPath.animate('2s', {rotation: Math.PI*2}, {easing: 'elasticInOut'});
+rectPath.animate('2s', {
+ rotation: Math.PI*2
+}, {
+ easing: 'elasticInOut'
+});
@@ -1,13 +1,13 @@
/**
* Shared animations
*/
-var shape1 = bonsai.Path.rect(0, 50, 100, 100).attr({fillColor: 'red'});
-var shape2 = bonsai.Path.rect(0, 200, 100, 100).attr({fillColor: 'green'});
-var shape3 = bonsai.Path.rect(0, 350, 100, 100).attr({fillColor: 'blue'});
+var shape1 = new Rect(0, 50, 100, 100).attr({fillColor: 'red'});
+var shape2 = new Rect(0, 200, 100, 100).attr({fillColor: 'green'});
+var shape3 = new Rect(0, 350, 100, 100).attr({fillColor: 'blue'});
stage.children([shape1,shape2,shape3]);
-var fadeOutAnim = new bonsai.Animation('5000ms', { opacity: 0 });
+var fadeOutAnim = new Animation('5000ms', { opacity: 0 });
[shape1,shape2,shape3].forEach(function(shape) {
@@ -2,11 +2,6 @@ var numStars = 7;
var width = 500;
var height = 500;
-
-//*
-
-
-var Path = bonsai.Path;
var stars = (function(star) {
var stars = [];
for (var i = 0; i < numStars; i++) {
@@ -19,7 +14,7 @@ var stars = (function(star) {
}
return stars;
-}(Path.star(width/2, height/2, 1, 5)));
+}(new Star(width/2, height/2, 1, 5)));
stage.length(14);
var i = 0;
@@ -39,6 +34,3 @@ stage.on(0, function() {
i = (i + 1) % numStars;
});
-
-
-//*/
@@ -2,11 +2,6 @@ var numStars = 7;
var width = 500;
var height = 500;
-
-//*
-
-
-var Path = bonsai.Path;
var stars = (function(star) {
var stars = [];
for (var i = 0; i < numStars; i++) {
@@ -19,7 +14,7 @@ var stars = (function(star) {
}
return stars;
-}(Path.star(width/2, height/2, 1, 5)));
+}(new Star(width/2, height/2, 1, 5)));
stage.length(14);
var i = 0;
@@ -39,6 +34,3 @@ stage.on(0, function() {
i = (i + 1) % numStars;
stage.removeChild(stars[i]);
});
-
-
-//*/
@@ -1,13 +1,13 @@
/**
* Demonstrating the animation's independence of the timeline.
*/
-var shape1 = bonsai.Path.rect(0, 50, 100, 100).attr({fillColor: 'red'});
-var shape2 = bonsai.Path.rect(0, 200, 100, 100).attr({fillColor: 'green'});
-var shape3 = bonsai.Path.rect(0, 350, 100, 100).attr({fillColor: 'blue'});
+var shape1 = new Rect(0, 50, 100, 100).attr({fillColor: 'red'});
+var shape2 = new Rect(0, 200, 100, 100).attr({fillColor: 'green'});
+var shape3 = new Rect(0, 350, 100, 100).attr({fillColor: 'blue'});
stage.children([shape1,shape2,shape3]);
-var fadeOutAnim = new bonsai.Animation(
+var fadeOutAnim = new Animation(
'5s',
{ opacity: 0 },
{ isTimelineBound: false }
@@ -5,13 +5,13 @@
var attributes = {x:20, y:20, width:200, height:200};
// as data uri
-var imageDataUri = new bonsai.Bitmap('').attr(attributes);
+var imageDataUri = new Bitmap('').attr(attributes);
stage.addChild(imageDataUri);
// as local source
-var imageLocal = new bonsai.Bitmap('').attr(attributes);
+var imageLocal = new Bitmap('').attr(attributes);
stage.addChild(imageLocal);
// as external source
-var imageExternal = new bonsai.Bitmap('').attr(attributes);
+var imageExternal = new Bitmap('').attr(attributes);
stage.addChild(imageExternal);
@@ -18,29 +18,29 @@ new Button('Boooom!', 50, 50).on('click', function() {
// BUTTON IMPLEMENTATION
function Button(text, x, y) {
- var button = new bonsai.Group().addTo(stage).attr({x: x, y: y});
+ var button = new Group().addTo(stage).attr({x: x, y: y});
- button.bg = bonsai.Path.rect(0, 0, 100, 40, 5).attr({
- fillGradient: bonsai.gradient.radial(['#19D600', '#0F8000'], 100, 50, -20),
+ button.bg = new Rect(0, 0, 100, 40, 5).attr({
+ fillGradient: gradient.radial(['#19D600', '#0F8000'], 100, 50, -20),
strokeColor: '#CCC',
strokeWidth: 0
}).addTo(button);
button
.on('mouseover', function() {
button.bg.animate('.2s', {
- fillGradient: bonsai.gradient.radial(['#9CFF8F', '#0F8000'], 100, 50, -20),
+ fillGradient: gradient.radial(['#9CFF8F', '#0F8000'], 100, 50, -20),
strokeWidth: 3
});
})
.on('mouseout', function() {
button.bg.animate('.2s', {
- fillGradient: bonsai.gradient.radial(['#19D600', '#0F8000'], 100, 50, -20),
+ fillGradient: gradient.radial(['#19D600', '#0F8000'], 100, 50, -20),
strokeWidth: 0
});
});
- button.text = new bonsai.Text(text).attr({
+ button.text = new Text(text).attr({
x: 10,
y: 13,
fontFamily: 'Arial',
No changes.
@@ -1,12 +1,12 @@
-new bonsai.Bitmap('assets/redpanda.jpg', function(err) {
+new Bitmap('assets/redpanda.jpg', function(err) {
if (err) return;
this.attr({
origin: {x: 128, y: 128},
y: -256,
x: -256
});
stage.addChild(this);
- stage.addChild(bonsai.Path.circle(250, 250, 128).attr({fillColor: 'rgba(255, 0, 0, .5)'}));
+ stage.addChild(new Circle(250, 250, 128).attr({fillColor: 'rgba(255, 0, 0, .5)'}));
this.animate('5s', {
rotation: Math.PI * 10 + .2,
x: 149.61,
@@ -1,4 +1,4 @@
-var bitmap = new bonsai.Bitmap('assets/redpanda.jpg').addTo(stage);
+var bitmap = new Bitmap('assets/redpanda.jpg').addTo(stage);
stage.frames({
"2s": function() {
@@ -1,4 +1,4 @@
-new bonsai.Bitmap('assets/redpanda.jpg', function(err) {
+new Bitmap('assets/redpanda.jpg', function(err) {
if (err) return;
this.attr({
y: -256,
Oops, something went wrong.

0 comments on commit fd34f48

Please sign in to comment.