Using heading() to generate angles

I'm trying to use heading to position a row of squares with an angle in direction to the mouse. Just as a test for using vector's and angles. I wrote a function for the squares, and generate an angle with mouseX and mouseY. Though P5 calculates the angles from the 0,0 point of the canvas, so i tried to create the vector in a matrix, but this doesn't seem to change much. So the question is; is there a way to generate the angle with mouseX/mouseY relative to the position of the object that has been created. or do I have to use if statements to check whether the X/Y of the mouse is </> relative to the objects position.

Code:

var rectArray = [];

var mouseVector;

function setup() {
  createCanvas(windowWidth,windowHeight);

  for (i = 0;i < 100; i++) {
  rectArray.push(new Square(10*i,40));
  }
}

function draw() {

  for (i = 0; i < rectArray.length; i++) {
    rectArray[i].rotation();
    rectArray[i].update();
    rectArray[i].display();
  }

}

function Square(x,y) {
  this.x = x;
  this.y = y;
  this.size = 20;
  this.color = color(200);
  this.target = 0;
  this.rotationValue = 0;

  this.rotation = function() {
    push();
    translate(this.x,this.y);
    mouseVector = createVector(mouseX,mouseY);
    this.target = mouseVector.heading();
    this.rotationValue = this.target;
    pop();
  }

  this.update = function() {
    //this.x = this.x + 1;
  }

  this.display = function() {
    push();
    translate(this.x,this.y);
    rectMode(CENTER);
    rotate(this.rotationValue);
    fill(this.color);
    rect(0,0,this.size,this.size);
    pop();
  }
}

Answers

Sign In or Register to comment.