Updated all examples to match current api, mainly rewrites of Path.re…

…ct to new Rect and Circle
uxebu · Oct 24, 2012 · df57218 · df57218
1 parent 6950699
commit df57218
Show file tree

Hide file tree

Showing 125 changed files with 613 additions and 219 deletions.
diff --git a/example/library/movies/10000-objects.js b/example/library/movies/10000-objects.js
@@ -1,3 +1,4 @@
+/** 10000 objects */
 stage.addChild(new Rect(500, 0, 100, 100).attr('fillColor', 'random'));
 setTimeout(function() {
   for (var i = 0; i < 10000; i++) {

diff --git a/example/library/movies/animation-circles.js b/example/library/movies/animation-circles.js
@@ -1,3 +1,6 @@
+/**
+ * animation circles
+ */
 var centerX = 250,
     centerY = 250,
     circles = 180,

diff --git a/example/library/movies/animation-clone.js b/example/library/movies/animation-clone.js
@@ -1,4 +1,5 @@
 /**
+ * animation clone
  * Cloned animations. Note how the cloned animation does not pause along with the original one.
  */
 var shape1 = new Rect(0, 50, 100, 100).attr({fillColor: 'red'});

diff --git a/example/library/movies/animation-easing.js b/example/library/movies/animation-easing.js
@@ -1,9 +1,10 @@
 /**
+ * animation easing
  * Animated attributes
  */
-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]);
 

diff --git a/example/library/movies/animation-filter.js b/example/library/movies/animation-filter.js
@@ -40,7 +40,7 @@ new bonsai.Bitmap('assets/redpanda.jpg', function() {
   });
 });
 
-Path.rect(200,200,100,100)
+new Rect(200,200,100,100)
   .addTo(stage)
   .attr({fillColor:'green',
     filters:[

diff --git a/example/library/movies/animation-gradient.js b/example/library/movies/animation-gradient.js
@@ -1,4 +1,5 @@
 /**
+ * animation gradient
  * Animated Color
  */
 var rect = new Rect(10, 10, 500, 500).attr({

diff --git a/example/library/movies/animation-keyframes.js b/example/library/movies/animation-keyframes.js
@@ -1,4 +1,5 @@
 /**
+ * animation keyframes
  * Animated attributes
  */
 var shape = new Rect(0, 0, 100, 100).attr({fillColor: 'red'});
@@ -23,7 +24,8 @@ var animation = new KeyframeAnimation('4s', {
     '3s': {x: 400, y: 400, fillColor: 'red',   strokeColor:'yellow'},
     to:   {x: 400, y: 0,   fillColor: 'black', strokeColor:'blue'}
 }, {repeat:Infinity});
-Path.rect(0, 0, 100, 100)
+
+new Rect(0, 0, 100, 100)
   .addTo(stage)
   .attr({strokeWidth:15})
   .animate(animation);
diff --git a/example/library/movies/animation-morph-2.js b/example/library/movies/animation-morph-2.js
@@ -1,5 +1,7 @@
 /*
 
+animation morph2
+
 This is a demonstration of morphing between two shapes originally
 of different segment lengths. The toCurves method is passed the intended
 number of curves. We insert NULL curves to satisfy this -- i.e. curves

diff --git a/example/library/movies/animation-morph.js b/example/library/movies/animation-morph.js
@@ -1,3 +1,6 @@
+/**
+ * animation morph
+ */
 var a = new Star(100, 100, 100, 5).attr({
   fillColor: 'red',
   opacity: .5

diff --git a/example/library/movies/animation-multiprop.js b/example/library/movies/animation-multiprop.js
@@ -1,4 +1,5 @@
 /**
+ * animation multiprop
  * Animated attributes
  */
 var rectPath = new Rect(50, 50, 100, 100).attr({

diff --git a/example/library/movies/animation-rotation.js b/example/library/movies/animation-rotation.js
@@ -1,4 +1,5 @@
 /**
+ * animation rotation
  * Animated attributes
  */
 var rectPath = new Rect(0, 0, 150, 150).attr({

diff --git a/example/library/movies/animation-shared.js b/example/library/movies/animation-shared.js
@@ -1,4 +1,6 @@
 /**
+ * animation shared
+ *
  * Shared animations
  */
 var shape1 = new Rect(0, 50, 100, 100).attr({fillColor: 'red'});

diff --git a/example/library/movies/animation-simple.js b/example/library/movies/animation-simple.js
@@ -1,3 +1,6 @@
+/**
+ * animation simple
+ */
 var aRect1 = new Rect(0, 0, 150, 150).fill('red').addTo(stage);
 var aRect2 = new Rect(0, 200, 150, 150).fill('green').addTo(stage);
 var aRect3 = new Rect(0, 400, 150, 150).fill('blue').addTo(stage);

diff --git a/example/library/movies/animation-stars-2.js b/example/library/movies/animation-stars-2.js
@@ -1,3 +1,6 @@
+/**
+ * animation stars2
+ */
 var numStars = 7;
 var width = 500;
 var height = 500;

diff --git a/example/library/movies/animation-stars.js b/example/library/movies/animation-stars.js
@@ -1,3 +1,6 @@
+/**
+ * animation stars
+ */
 var numStars = 7;
 var width = 500;
 var height = 500;

diff --git a/example/library/movies/animation-unbound.js b/example/library/movies/animation-unbound.js
@@ -1,4 +1,6 @@
 /**
+ * animation unbound
+ *
  * Demonstrating the animation's independence of the timeline.
  */
 var shape1 = new Rect(0, 50, 100, 100).attr({fillColor: 'red'});

diff --git a/example/library/movies/assets-loading-image-simple.js b/example/library/movies/assets-loading-image-simple.js
@@ -1,4 +1,6 @@
 /**
+ * assets loading image simple
+ *
  * Tests a simple image creation.
  */
 

diff --git a/example/library/movies/assets/submovies/redsquare.js b/example/library/movies/assets/submovies/redsquare.js
@@ -1,3 +1,3 @@
-Path.rect(0, 0, 100, 100).attr({
+new Rect(0, 0, 100, 100).attr({
 	fillColor: 'red'
 }).addTo(stage);
diff --git a/example/library/movies/asteroids.js b/example/library/movies/asteroids.js
@@ -1,4 +1,7 @@
-var player = new bonsai.Path()
+/**
+ * asteroids
+ */
+var player = new Path()
     .moveTo(0,-20)
     .lineBy(10,30)
     .lineBy(-20,0)
@@ -35,7 +38,7 @@ function move(object, speed, direction) {
 
 function fireBullet () {
     var rotation = Math.PI * direction / 180 + Math.PI / 2;
-    var bulletPath = new bonsai.Path()
+    var bulletPath = new Path()
         .moveTo(0,0)
         .lineTo(0,10)
         .attr({

diff --git a/example/library/movies/audio-boom.js b/example/library/movies/audio-boom.js
@@ -1,4 +1,6 @@
-
+/**
+ * audio boom
+ */
 new Rect(145, 290, 1000, 60).fill('black').addTo(stage);
 
 var teamText = new Text('loading...').attr({

diff --git a/example/library/movies/audio-button.js b/example/library/movies/audio-button.js
@@ -1,4 +1,6 @@
-
+/**
+ * audio button
+ */
 var audio = new Audio([
   { src: 'assets/cinematicBoomNorm.m4a' },
   { src: 'assets/cinematicBoomNorm.ogg' }

diff --git a/example/library/movies/audio-piano-sprite.js b/example/library/movies/audio-piano-sprite.js
@@ -1,3 +1,6 @@
+/**
+ * audio piano sprite
+ */
 var pianoSprite = [], changePianoSprite = 0;
 
 function aSound(atTime) {

diff --git a/example/library/movies/audio-simple.js b/example/library/movies/audio-simple.js
@@ -1,3 +1,6 @@
+/**
+ * audio simple
+ */
 new Audio([
   { src: 'assets/cinematicBoomNorm.m4a' },
   { src: 'assets/cinematicBoomNorm.ogg' }

diff --git a/example/library/movies/audio-tick-16.js b/example/library/movies/audio-tick-16.js
@@ -1,3 +1,6 @@
+/**
+ * audio tick
+ */
 var tick = new Audio('assets/tick16.m4a').addTo(stage);
 stage.on('tick', function() {
    // soooooound!!

diff --git a/example/library/movies/audio-volume.js b/example/library/movies/audio-volume.js
@@ -1,3 +1,6 @@
+/**
+ * audio volume
+ */
 var vol = 0.0;
 var tick = new Audio('assets/tick16.m4a').addTo(stage);
 stage.on('tick', function() {

diff --git a/example/library/movies/bikeshed-logo-full.js b/example/library/movies/bikeshed-logo-full.js
diff --git a/example/library/movies/bitmap-memory-check.js b/example/library/movies/bitmap-memory-check.js
@@ -1,3 +1,6 @@
+/**
+ * bitmap memory checker
+ */
 var url = 'http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Friendly_Male_Koala.JPG/220px-Friendly_Male_Koala.JPG';
 var bitmap = new Bitmap(url).addTo(stage);
 

diff --git a/example/library/movies/bitmap-move-rotation.js b/example/library/movies/bitmap-move-rotation.js
@@ -1,3 +1,6 @@
+/**
+ * bitmap move rotation
+ */
 new Bitmap('assets/redpanda.jpg', function(err) {
   if (err) return;
   this.attr({

diff --git a/example/library/movies/bitmap-source.js b/example/library/movies/bitmap-source.js
@@ -1,3 +1,6 @@
+/**
+ * bitmap source
+ */
 var bitmap = new Bitmap('assets/redpanda.jpg').addTo(stage);
 
 stage.frames({

diff --git a/example/library/movies/bitmap.js b/example/library/movies/bitmap.js
@@ -1,3 +1,6 @@
+/**
+ * bitmap
+ */
 new Bitmap('assets/redpanda.jpg', function(err) {
   if (err) return;
   this.attr({

diff --git a/example/library/movies/blobs-by-manfred.js b/example/library/movies/blobs-by-manfred.js
@@ -1,3 +1,6 @@
+/**
+ * blobs by manfred
+ */
 var groups = [];
 groups.push( new Group().addTo(stage) );
 groups.push( new Group().addTo(stage) );
@@ -51,7 +54,7 @@ function newBlob(){
     xSpeed:Math.random()*10-5,
     ySpeed:Math.random()*10-5
   };
-  blob.shape = Path.circle(blob.x,blob.y,blob.width).attr({fillColor:newColor(),opacity:blob.opacity});
+  blob.shape = new Circle(blob.x,blob.y,blob.width).attr({fillColor:newColor(),opacity:blob.opacity});
   return blob;
 }
 function stats(){

diff --git a/example/library/movies/bounding-box.js b/example/library/movies/bounding-box.js
@@ -1,3 +1,6 @@
+/**
+ * bounding box
+ */
 function Tracker(path) {
   this.trackee = path;
   this.group = new Group().addTo(path.parent);
@@ -19,7 +22,7 @@ Tracker.prototype = {
   }
 }
 
-var star = new Path.star(100, 100, 50, 5, 3);
+var star = new Star(100, 100, 50, 5, 3);
 
 star.fill('yellow').stroke('black', 1);
 star.addTo(stage);
@@ -30,7 +33,7 @@ anim();
 
 function anim() {
   star.morphTo(
-    new Path.star(
+    new Star(
       Math.random() * 400 + 200,
       Math.random() * 400 + 200,
       Math.random() * 80 + 20,
@@ -43,4 +46,4 @@ function anim() {
       easing: 'sineInOut'
     }
   );
-}
+}
diff --git a/example/library/movies/business-card.js b/example/library/movies/business-card.js
@@ -1,3 +1,7 @@
+/**
+ * business card
+ */
+
 g = new Group().addTo(stage)
   .attr({scale:1})
 
@@ -14,7 +18,7 @@ var logo = 'M173.173,23.565 c5.034,0,8.475,1.461,11.424,5.027c4.299,5.281,4.546,
   +'c2.949,3.438,6.51,5.034,11.791,5.034c2.337,0,4.669-0.735,6.513-1.843c1.597-0.856,3.314-2.577,'
   +'4.42-4.053v4.913h12.405V24.538';
 
-Path.rect(10,10,500,300).addTo(g)
+new Rect(10,10,500,300).addTo(g)
   .attr({fillColor:'black'})
 
 new Path(logo).addTo(g)
@@ -42,9 +46,9 @@ new Text('@wolframkriesing').addTo(g)
 
 // back side
 
-Path.rect(10,320,500,300).addTo(g)
+new Rect(10,320,500,300).addTo(g)
   .attr({fillColor:'black'})
-Path.rect(30,410,460,190).addTo(g)
+new Rect(30,410,460,190).addTo(g)
   .attr({fillColor:'white'})
 
 new Text('Bonsai – the Flash alternative in pure HTML5').addTo(g)

diff --git a/example/library/movies/charts-bars-3D.js b/example/library/movies/charts-bars-3D.js
@@ -1,3 +1,7 @@
+/**
+ * charts bars 3d
+ */
+
 new Rect(0, 0, 600, 600)
   .attr({fillColor: 'grey'})
   .addTo(stage)

diff --git a/example/library/movies/charts-bubbles.js b/example/library/movies/charts-bubbles.js
@@ -1,3 +1,7 @@
+/**
+ * charts bubbles
+ */
+
 // Inspired by http://morph.com.au/blog/wp-content/uploads/2010/08/Infographic-The-Geosocial-Universe-Hi-Res.jpg
 var bs = bonsai;
 

diff --git a/example/library/movies/clip-and-mask.js b/example/library/movies/clip-and-mask.js
@@ -1,3 +1,7 @@
+/**
+ * combine clip and mask
+ */
+
 // combine clip and mask
 
 var group = new Group()

diff --git a/example/library/movies/clip-animated.js b/example/library/movies/clip-animated.js
@@ -1,3 +1,7 @@
+/**
+ * clip animated
+ */
+
 // animated clipping object
 // expected behaviour: a small blue rect at the left, top corner that animates
 

diff --git a/example/library/movies/clip-basic.js b/example/library/movies/clip-basic.js
@@ -1,11 +1,15 @@
-var rainbow = Path.rect(0, 0, 480, 480).attr({
+/**
+ * clip basic
+ */
+
+var rainbow = new Rect(0, 0, 480, 480).attr({
   strokeWidth: 1,
   fillGradient: gradient.linear(90,
     ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
   )
 }).addTo(stage);
 
-var clip = Path.circle(0, 0, 100);
+var clip = new Circle(0, 0, 100);
 
 stage.on('mouseover pointerdown', function() {
   rainbow.attr('clip', clip);

diff --git a/example/library/movies/clip-group.js b/example/library/movies/clip-group.js
@@ -1,4 +1,8 @@
-var rainbow = Path.rect(0, 0, 480, 480).attr({
+/**
+ * clip group
+ */
+
+var rainbow = new Rect(0, 0, 480, 480).attr({
   strokeWidth: 1,
   fillGradient: gradient.linear(90,
     ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet']
@@ -7,10 +11,10 @@ var rainbow = Path.rect(0, 0, 480, 480).attr({
 
 var mask = new Group();
 
-Path.circle(-50, -50, 50).addTo(mask);
-Path.circle(50, -50, 50).addTo(mask);
-Path.circle(-50, 50, 50).addTo(mask);
-Path.circle(50, 50, 50).addTo(mask);
+new Circle(-50, -50, 50).addTo(mask);
+new Circle(50, -50, 50).addTo(mask);
+new Circle(-50, 50, 50).addTo(mask);
+new Circle(50, 50, 50).addTo(mask);
 
 stage.on('mouseover pointerdown', function() {
   rainbow.attr('clip', mask);