PageRenderTime 28ms CodeModel.GetById 28ms RepoModel.GetById 0ms app.codeStats 0ms

/examples/demo/scene10.js

https://github.com/alvarlaigna/CAAT
JavaScript | 211 lines | 146 code | 36 blank | 29 comment | 4 complexity | 524c0f028be60504c9d67e9d074f31a9 MD5 | raw file
  1. /**
  2. * @author Hyperandroid || http://hyperandroid.com/
  3. *
  4. * Scene 10.
  5. * Shows some collision management. Thanks to Mario Gonzalez @onedayitwillmake.
  6. *
  7. */
  8. function __scene10(director) {
  9. // Start our scene created below
  10. var packedCircleScene = new PackedCircleScene();
  11. packedCircleScene.initDirector(director);
  12. __scene10_text(director, packedCircleScene.scene);
  13. }
  14. function __scene10_text(director,scene) {
  15. var gradient= director.crc.createLinearGradient(0,0,0,50);
  16. gradient.addColorStop(0,'orange');
  17. gradient.addColorStop(0.5,'red');
  18. gradient.addColorStop(1,'#3f00ff');
  19. var cc= new CAAT.ActorContainer().
  20. setBounds( 450,30, 150, 100 ).
  21. create().
  22. enableEvents(false).
  23. addBehavior(
  24. new CAAT.RotateBehavior().
  25. setCycle(true).
  26. setFrameTime( 0, 4000 ).
  27. setValues( -Math.PI/8, Math.PI/8, 50, 0 ).
  28. setInterpolator(
  29. new CAAT.Interpolator().createExponentialInOutInterpolator(3,true)
  30. )
  31. );
  32. scene.addChild(cc);
  33. var text= new CAAT.TextActor().
  34. setFont("50px sans-serif").
  35. setText("PackedCircle").
  36. create().
  37. setFillStyle(gradient).
  38. setOutline(true).
  39. calcTextSize(director);
  40. cc.addChild(text.cacheAsBitmap().setLocation((cc.width-text.textWidth)/2,0));
  41. var text2= new CAAT.TextActor().
  42. setFont("30px sans-serif").
  43. setText("Collision demo").
  44. calcTextSize(director).
  45. create().
  46. setFillStyle(gradient).
  47. setOutline(true);
  48. cc.addChild(text2.cacheAsBitmap().setLocation((cc.width-text2.textWidth)/2,50));
  49. }
  50. (function() {
  51. PackedCircleScene = function() {
  52. return this;
  53. };
  54. PackedCircleScene.prototype= {
  55. packedCirleManager: null,
  56. director: null,
  57. scene: null,
  58. root: null,
  59. mousePosition: null,
  60. sineOffset: 1212, // some arbitary number i liked
  61. initDirector: function(director)
  62. {
  63. this.mousePosition = new CAAT.Point(director.canvas.width/2, director.canvas.height/2);
  64. this.director = director;
  65. this.scene = new CAAT.Scene().
  66. create();
  67. this.root = new CAAT.ActorContainer().
  68. setBounds(0,0, director.canvas.width, director.canvas.height);
  69. this.scene.addChild( this.root );
  70. // Collision simulation
  71. this.packedCirleManager = new CAAT.modules.CircleManager.PackedCircleManager();
  72. this.packedCirleManager.setBounds(0, 0, director.width, director.height);
  73. this.packedCirleManager.setNumberOfCollisionPasses(2);
  74. this.packedCirleManager.setNumberOfTargetingPasses(1);
  75. // Create a bunch of circles!
  76. var colorHelper = new CAAT.Color(),
  77. rgb = new CAAT.Color.RGB(0, 0, 0),
  78. total = 75;
  79. for(var i = 0; i < total; i++)
  80. {
  81. // Size
  82. var aRadius = Math.random() * 25 + 9;
  83. // color it
  84. var hue = (360-((i/total) * 360) ), // HSV uses 0 - 360
  85. hex = colorHelper.hsvToRgb(hue, 80, 99).toHex(); // Convert to hex value
  86. var circleActor = new CAAT.ShapeActor()
  87. .setShape( CAAT.ShapeActor.prototype.SHAPE_CIRCLE )
  88. .setLocation( Math.random() * director.canvas.width, Math.random() * director.canvas.height)
  89. .setSize(aRadius*2, aRadius*2) // Size is in diameters
  90. .setFillStyle('#' + hex );
  91. // The 'packedCircle' in the simulation is considered completely separate entity than the circleActor itself
  92. var packedCircle = new CAAT.modules.CircleManager.PackedCircle()
  93. .setDelegate(circleActor)
  94. .setRadius(aRadius)
  95. .setCollisionMask(1) // packedCircle instnace - will collide against this group
  96. .setCollisionGroup(1) // packedCircle instance - is in this group
  97. .setTargetPosition(this.mousePosition)
  98. .setTargetChaseSpeed(Math.random() * 0.02);
  99. // disable mouse on specific circle
  100. packedCircle.mouseEnabled = false;
  101. this.animateInUsingScale(circleActor, this.scene.time+Math.random() * 3000, 500, 0.1, 1);
  102. // Add to the collision simulation
  103. this.packedCirleManager.addCircle(packedCircle);
  104. // Add actor to the scene
  105. this.root.addChild(circleActor);
  106. }
  107. this.director.addScene(this.scene);
  108. // Force all packedCircles to move to the position of their delegates
  109. this.packedCirleManager.forceCirclesToMatchDelegatePositions();
  110. var me= this;
  111. this.root.mouseMove= function(mouseEvent) {
  112. me.mousePosition.set(mouseEvent.point.x, mouseEvent.point.y);
  113. };
  114. this.scene.onRenderEnd= function(director, delta) {
  115. me.packedCirleManager.pushAllCirclesTowardTarget();
  116. me.packedCirleManager.handleCollisions();
  117. me.sineOffset += 0.01;
  118. var circleList = me.packedCirleManager.allCircles,
  119. len = circleList.length;
  120. // color it
  121. var color = new CAAT.Color();
  122. var longestDistance = 40000 + Math.sin(me.sineOffset) * 30000;
  123. if(longestDistance < 0) longestDistance *= -1; // abs
  124. while(len--) {
  125. var packedCircle = circleList[len];
  126. var circleActor = packedCircle.delegate;
  127. var distanceFromTarget = packedCircle.position.getDistanceSquared(packedCircle.targetPosition);
  128. if(distanceFromTarget > longestDistance) distanceFromTarget = longestDistance;
  129. var amplitude = (distanceFromTarget / longestDistance);
  130. var hue = 360 - (amplitude * 95);
  131. circleActor.x = packedCircle.position.x-packedCircle.radius;
  132. circleActor.y = packedCircle.position.y-packedCircle.radius;
  133. // color
  134. circleActor.setFillStyle('#' + color.hsvToRgb(hue, 95, 99).toHex() );
  135. // Here we are doing an interesting trick.
  136. // By randomly changing the targetChaseSpeed +/- 0.002 randomly
  137. // we introduce a seemingly complex hive behavior whereby certain circles
  138. // seem to want to 'leave' sometimes, and others decide to force their way to the center more strongly
  139. if(Math.random() < 0.2)
  140. packedCircle.setTargetChaseSpeed(packedCircle.targetChaseSpeed + Math.random() * 0.004 - 0.002);
  141. }
  142. };
  143. },
  144. /**
  145. * Adds a CAAT.ScaleBehavior to the entity, used on animate in
  146. */
  147. animateInUsingScale: function(actor, starTime, endTime, startScale, endScale)
  148. {
  149. var scaleBehavior = new CAAT.ScaleBehavior();
  150. scaleBehavior.anchor = CAAT.Actor.prototype.ANCHOR_CENTER;
  151. actor.scaleX = actor.scaleY = scaleBehavior.startScaleX = scaleBehavior.startScaleY = startScale; // Fall from the 'sky' !
  152. scaleBehavior.endScaleX = scaleBehavior.endScaleY = endScale;
  153. scaleBehavior.setFrameTime( starTime, starTime+endTime );
  154. scaleBehavior.setCycle(false);
  155. scaleBehavior.setInterpolator( new CAAT.Interpolator().createBounceOutInterpolator(false) );
  156. actor.addBehavior(scaleBehavior);
  157. return scaleBehavior;
  158. },
  159. /**
  160. * Adds a CAAT.ScaleBehavior to the entity, used on animate in
  161. */
  162. animateInUsingAlpha: function(actor, starTime, endTime, startAlpha, endAlpha)
  163. {
  164. var fadeBehavior = new CAAT.AlphaBehavior();
  165. fadeBehavior.anchor = CAAT.Actor.prototype.ANCHOR_CENTER;
  166. actor.alpha = fadeBehavior.startAlpha = startAlpha;
  167. fadeBehavior.endAlpha = endAlpha;
  168. fadeBehavior.setFrameTime( starTime, endTime );
  169. fadeBehavior.setCycle(false);
  170. fadeBehavior.setInterpolator( new CAAT.Interpolator().createExponentialOutInterpolator(2, false) );
  171. actor.addBehavior(fadeBehavior);
  172. return fadeBehavior;
  173. }
  174. }
  175. })();