Ad

Can't Get Sprite To Move In A Circle Path

I have this sprite called snitch and I'm trying to make it move in a circle, with the center in the canvas/2 (canvas is named space) and radius 30. I'm using the following code but it doesn't seem to do anything, the "snitch" just stands there doing nothing on coordinates (0,0). I've tried deleting these (0,0) coordinates from the MySprite2 function but when I do, the snitch doesn't even appear.

var ctx = space.getContext("2d"); 
var FPS = 40;
var snitch= new MySprite2("http://i.imgur.com/IgNKTbW.png");

function MySprite2 (img_url) {
  var x = this.x = 0;
  var y = this.y = 0; 
  this.visible= true;
  var img = this.MyImg2 = new Image();
  this.MyImg2.src = img_url;
}

MySprite2.prototype.Do_Frame_Things = function() {
  if (this.visible) ctx.drawImage(this.MyImg2, this.x, this.y);
}; 

function Do_a_Frame () {
  ctx.clearRect(0, 0, space.width, space.height);
  snitch.Do_Frame_Things();
}

function theMoves(snitch){
  var theta = 0;
  for (theta = 0; theta < 2 * Math.PI; theta+=0.1) { 
     snitch.x = (space.width/2) + Math.sin(theta)*30;
     snitch.y = (space.height/2) + Math.cos(theta)*30;
  }
}
setInterval(theMoves, 1000/FPS);
setInterval(Do_a_Frame, 1000/FPS);

Any idea what is wrong? OK GOT IT MOVING BUT now it just runs in a straight line, instead of a circle. New code below.

function MySprite (img_url) {
  var x = this.x = (space_x/2);
  var y = this.y = (space_y/2);
  var angle = this.angle = 0;
  this.visible= true;
  var img = this.MyImg = new Image();
  this.MyImg.src = img_url;
}

MySprite.prototype.Do_Frame_Things = function() {
  if (this.visible) ctx.drawImage(this.MyImg, this.x, this.y);
};  

function theMoves(){
  snitch.x += Math.cos(snitch.angle)*2;
  snitch.y += Math.sin(snitch.angle)*2;
}
setInterval(theMoves, 40);
Ad

Answer

The first error I see is that your sin function will return undefined because you will need to call it using the following syntax:

 Math.sin()

The second error is that your snitch variable is undefined. The error is thrown by the following line of code.

 snitch.x = (space.width/2) + Math.sin(theta)*30;

Your third error is:

snitch.y = (space.height/2) + cos(theta)*30;

I created a more modular approach to help you with your circular animation.

Live Demo: http://codepen.io/larryjoelane/pen/obGPwY

html:

     <canvas width ="500" height="500" id="canvasOne"></canvas>

JavaScript:

 var canvas = new Canvas("canvasOne");

 var thisCanvas = canvas.instance("canvasOne");

 var imageURL = "http://bytewarestudios.com/assets/images/sphere.png";

 var image = canvas.createImage(imageURL);

 var context = canvas.context2D("canvasOne");

 /* Formula to determine x and y points on the circumference of a    
  * circle
  * cx and cy = (origin or center of the circle)
  * r = radius of the circle
  * a = angle in radians(360deg = 6.285714285714285714285714285714 radian) or 2 * PI
  *  Formulas examples below for x and y points
  *   var x = cx + r * Math.cos(a);
  *   var y = cy + r * Math.sin(a);
  */

 //initialize the degree variable
 var deg = 0;

 //frames per second
 var fps = 45;

 window.requestAnimationFrame(drawCircle); // start the animation

 function drawCircle() { //begin function

   setTimeout(function() {

     //increment the degrees
     deg = deg + 1;

     //used to offset the circle radius to bring the circle in from the border of 
     //the canvas
     var offset = 120;

     //radius of the circle
     var r = ((thisCanvas.width - offset) / 2);

     //x coordinate of the circle origin
     var cx = ((thisCanvas.width) / 2);

     //y coordinate of the circle origin
     var cy = ((thisCanvas.height) / 2);

     //store the angle in radians
     var a = canvas.toRadians(deg);

     var x = cx + r * Math.cos(a);
     var y = cy + r * Math.sin(a);

     //clear the canvas  
     context.clearRect(0, 0, thisCanvas.width, thisCanvas.height);

     //draw the first image
     context.drawImage(image, x, y);

     //start the animation
     window.requestAnimationFrame(drawCircle);

   }, 1000 / fps);

 } //end function

 function Canvas() { //begin canvas constructor    

   Canvas.prototype.createImage = function(imageURL) {

     //create a new image
     var image = new Image();

     //set the image source
     image.src = imageURL;

     //return the image object
     return image;

   };

   Canvas.prototype.context2D = function(id) {

     var canvas = document.getElementById(id);

     var context = canvas.getContext("2d");

     return context;

   };

   Canvas.prototype.instance = function(id) {

     var canvas = document.getElementById(id);

     return canvas;

   };

   Canvas.prototype.toRadians = function(angle) {

     return angle * (Math.PI / 180);

   };

 } //end canvas constructor
Ad
source: stackoverflow.com
Ad