Circular Movement

Download the code for Movement

Sprites move along a circular path.

You'll need a contemporary browser with javascript turned on to be able to see this page

Circling and MouseCircling Behaviors

Attach the Circling behavior to a sprite and it moves in a circle. Add MouseCircling to a sprite and it circles around the mouse.

Both scripts accept the following arguments:

• radians

  The radians argument defines the point along the circular path where the sprite starts. 0 radians positions the sprite at 3 o'clock; Math.PI/2 or 1.57 radians puts the sprite at 6 o'clock; Math.PI or 3.14 radians places the sprite at 9 o'clock; Math.PI * 3/2 or 4.71 radians positions the sprite at 12 o'clock.

• rps (radians per second)

  The rps property determines how quickly or slowly the sprite moves along its path. An rps value of Math.PI/2 or about 1.57 would move the sprite a quarter turn (90 degrees) along its circular path each second.

• centerPoint

  The centerPoint is the X and Y position around which the sprite circles. For MouseCircling, centerPoint is set to the mouse's position. For Circling, the centerPoint is a point on the screen around which the sprite circles.

• radius

  The radius determines how far away from the center point the sprite circles. We have an x and a y radius. If you want your circular path to be more elliptical (not a perfect circle but an oval instead), set the x and y radiuses to different values.

Here's the code for a sprite with a Circling behavior and a sprite with a MouseCircling behavior:

this.catAnim1 = {
	spriteProps:{name:'catAnim1', x:0, y:0, w:400, h:220, XYscale: [0.2, 0.2], rotation: 0, graphics:['img/cat-sprite-sheet.png'], sheets:[this.catSheet], alpha: 0.5, visible:true}, 
	painters:[new BitmapPainter()], 
	behaviors:[new Circling({radians: 0.0, rps:1.0, centerPoint:{x:600, y:400}, radius: {x:120, y:120}}), new Cycling({cycleTime: 60})]
  };
  
  this.myCatAnim1 = new BitmapGraphic(this.catAnim1);
  
  this.catAnim4 = {
	spriteProps:{name:'catAnim4', x:0, y:0, w:400, h:220, XYscale: [0.4, 0.4], rotation: 0, graphics:['img/cat-sprite-sheet.png'], sheets:[this.catSheet], visible:true}, 
	painters:[new BitmapPainter()], 
	behaviors:[new MouseCircling({radians: Math.PI * 1/3, rps:1.4, centerPoint:{x:0, y:0}, radius: {x: 200, y: 200}}), new Cycling({cycleTime: 60})]
  };
  
  this.myCatAnim4 = new BitmapGraphic(this.catAnim4);

Take a look at the setup script—js/projects/movement/circling-setup.js—to see more examples of Circling and MouseCircling behaviors attached to sprites.