How can I draw objects on canvas using vectors as coordinates?

Question

I am a beginner to programming and I want to make a blackhole simulations, I can't draw objects using vectors as coordinates (and I want it to be this way so I can animate them afterwards using vectors), here is my code:

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8" />
 <title>test trou noir</title>
 <script>


  var canvas, ctx;
  var blackhole;
  var circle;
 var circles = new Array();   

 function init (){
  var  G = 6.67e-11, //gravitational constant 
  c = 3e8, //speed of light (m/s)
  M = 12e31, // masseof the blackhole in kg (60 solar masses)  
 Rs = (2 * G * M) / 9e16, //Schwarzchild radius 
pixel_Rs = Rs / 1e3,// scaled radius 

 canvas = document.getElementById ("space");
ctx = canvas.getContext ('2d');

drawCircle();

 blackhole = new Ball (pixel_Rs, new Vector (700, 400), "black" );

  blackhole.draw (ctx);




 };

function Ball (radius, pos2D, color, vx, vy){
this.radius = radius;

this.pos2D = pos2D;
this.color = color;
this.vx = vx;
this.vy = vy; 
};  
  Ball.prototype.draw = function (ctx){
 ctx.fillStyle = this.color;
 ctx.beginPath ();
 ctx.arc  ( pos2D, this.radius, 0, 2*Math.PI);
 ctx.closePath ();
 ctx.fill();
 };



function drawCircle (ctx){
  canvas = document.getElementById ("space");
ctx = canvas.getContext ('2d');
 for (var i = 0; i<200; i++){
circle = new Ball (5,new Vector( Math.floor (Math.random()*1400), Math.floor (Math.random()*800)), "grey");
circle.draw (ctx)
circles.push (circle);  
 }
  }; 

function Vector2D (x,y){
this.x = x;
this.y= y;  
}   

  Vector2D.prototype = {
  length: function (){
  return this.x*this.x + this.y*this.y;
    },
  add: function (vec){
  return new Vector2D (this.x + vec.x, this.y + vec.y);

  },

  subtract: function (vec){
    return new Vector2D (this.x - vec.x, this.y - vec.y);
  },
  decrementBy: function (vec){
    this.x -= vec.x;
    this.y -= vec.y;
  }

   };






window.onload = init;

</script>
<style>
body {
background-color:#021c36 ;
  margin: 0px;}
 </style>
 </head>
 <body>


    <canvas id ="space", width = "1400", height = "800">
   </canvas>  
  </body>
  </html>

Now, I think it is because the arc () method doesn't have specific coordinates, but then how can I implement vector coordinates so it draws something on the canvas? If someone have an idea it'd be great, also, if someone had a few tips as to how to animate 100 objects using vectors, it'd be great. Thanks alot

after your update I created the function update, but i can't make it work, here is the code: function update (){ for (var i = 0; i<200; i++){ var vec2D = new Vector2D (Math.floor (Math.random()*1400), Math.floor (Math.random()*800)); circle = new Ball (5,vec2D.x,vec2D.y, "grey"); circle.draw (ctx) circles.push (circle); var distance = Math.sqrt (((vec2D.x-700)*(vec2D.x-700))+((vec2D.y400)* (vec2D.y-400))); if (distance > pixel_Rs){ var delta = new Vector2D(1,1); var forceDirection = Math.atan2(vec2D.y-700,vec2D.x-400); delta.x += Math.cos(forceDirection)*3 ; delta.y += Math.sin(forceDirection)*3; vec2D.x += delta.x;
vec2D.y += delta.y; requestAnimationFrame (update);

   }

  } 

  };

I did it without the force for now, but i can't make it work, do you know why? PS:sorry about the code, my editing doesn't want to work properly :(

Answer 1

To draw with a vector.

// defining
var Vec = function(x,y){
   this.x = x;
   this.y = y;
}

// creating 
var vec2D = new Vec(100,100);

// Using
ctx.arc(vec2D.x, vec2D.y, radius, 0, Math.PI *2);

To animate the vector you need to update it many times a second. Modern browsers provide a function to help you with that.

requestAnimationFrame(yourRenderFuntion) will call yourRenderFunction when it is ready for another frame. To use you create an update function that does all the drawing, and when done requests the next frame.

function update(time){ // Time is passed by requestAnimationFrame

     // code to do the drawing and animation.

     // request another frame
     requestAnimationFrame(update);
}
// to start it 
requestAnimationFrame(update);

Then you need to do the movements. I will create a second vector to hold the delta change per frame.

var delta = new Vec(1,1);

Then in the update function add the forces to the delta and add that to the position vector

// get direction of force
var forceDirection = Math.atan2(vec2D.y-blackHole.pos.y,vec2D.x-blackHole.pos.x);
// get magnitude of force
var force = getForce(vec2D); // get force of gravity you write that function

// apply that to the delta
delta.x += Math.cos(forceDirection) * force;
delta.y += Math.sin(forceDirection) * force;

// then update the position
vec2D.x += delta.x;  // do it for both x and y axis
vec2D.y += delta.y;

Then you can draw the object at the next position.

How can I draw objects on canvas using vectors as coordinates?

Question

1 answers

solution1
1 ACCPTED 2016-01-25 19:50:01

How can I draw objects on canvas using vectors as coordinates?

Question

1 answers

solution1 1 ACCPTED 2016-01-25 19:50:01

solution1
1 ACCPTED 2016-01-25 19:50:01