# Change moving angle by changing the moving directions/speeds

**URL:** <https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065>\
**Category:** Coding Questions\
**Created:** [May 12, 2021, 1:45pm UTC](https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065 "2021-05-12T13:45:16Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![helloscoopz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/helloscoopz/32/5116_2.png) [@helloscoopz](https://discourse.processing.org/u/helloscoopz)\
**Post date:** [May 12, 2021, 1:45pm UTC](https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065/1 "2021-05-12T13:45:16Z")

</div>

```auto
void turn(float angle) {
   // need to change xSpeed and ySpeed so that object will move
   // with that changed angle
}

```

My problem is that I need to change the direction of the moving object counterclockwise with the angle parameter. The method has to change the xSpeed and ySpeed values which are getting added to the position x and y respectively in the move method.

for an example:

let’s say current xSpeed = 10, ySpeed = -10. the combined vector would be the square root of 200, 45 degrees clockwise from the y axis. So when I pass 45 to this method angle parameter the xSpeed should change to be 0, and ySpeed should be -10 (no change in this case). because when I move the previously combined vector (square root of 200) counterclockwise to 45 degrees, now the object should be moving directly UP with that same combined vector. If that makes sense.

I think this has something to do with trigonometrical ratios, I’m looking for a solution. I really appreciate if someone can help me with this.

Thanks!

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 12, 2021, 2:09pm UTC](https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065/2 "2021-05-12T14:09:18Z")

</div>

see [Trigonometry Primer \ Processing.org](https://www.processing.org/tutorials/trig/)

you can add seed to your player

```auto
let seed;

function setup() {
  createCanvas(1000,1000);
  angleMode(DEGREES); // Change the mode to DEGREES
  
  seed = createVector(0, 0);
}

function draw() {
  background(51);
  
  let angle=185; 
  seed.x=cos(angle) * 30 + width/2;
  seed.y=sin(angle) * 30 + height/2; 
  
  line(width/2,height/2,seed.x,seed.y);

}

```

---

<div class="post-metadata">

**Author:** ![helloscoopz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/helloscoopz/32/5116_2.png) [@helloscoopz](https://discourse.processing.org/u/helloscoopz)\
**Post date:** [May 12, 2021, 3:13pm UTC](https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065/3 "2021-05-12T15:13:29Z")

</div>

Thanks for your response. however this seems like not the solution to my particular problem. In fact, I don’t have any idea why that formula multiplied by a constant 30. 😕

---

<div class="post-metadata">

**Author:** ![Flolo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/flolo/32/13874_2.png) [@Flolo](https://discourse.processing.org/u/Flolo)\
**Post date:** [May 12, 2021, 4:01pm UTC](https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065/4 "2021-05-12T16:01:37Z")

</div>

I am not sure, but maby what you are looking for is this:  
[PVector.fromAngle(radians(ANGLE));](https://processing.org/reference/PVector_fromAngle_.html)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 12, 2021, 7:08pm UTC](https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065/5 "2021-05-12T19:08:00Z")

</div>

here is a processing example

you can steer the ball with left and right cursor

The functions turnRight and turnLeft receive the angle and xSpeed and ySpeed gets changed accordingly.

```auto

float ax=300, ay=330; 
float xSpeed=1, ySpeed=1;
float prevAngle; 

void setup() {
  size(1300, 800);
  frameRate(23);
}

void draw() {
  // background(51);

  ax+=xSpeed;
  ay+=ySpeed;

  fill(255);
  ellipse(ax, ay, 17, 17);

  //if (frameCount % 3 == 0)
  // turnLeft(10);

  if (keyPressed) {
    if (keyCode==LEFT)
      turnLeft(10); 
    else if (keyCode==RIGHT)
      turnRight(10);
  }
}

//-----------------------------------------------------------------------

void turnRight(float angle) {
  // receives angle in degree 
  // turn right 
  // need to change xSpeed and ySpeed so that object will move
  // with that changed angle

  float angle2=radians(angle)+prevAngle;
  prevAngle=angle2;
  xSpeed=cos(angle2) * 3 ;
  ySpeed=sin(angle2) * 3 ;
}

void turnLeft(float angle) {
  // receives angle in degree 
  // turn right 
  // need to change xSpeed and ySpeed so that object will move
  // with that changed angle

  float angle2=prevAngle-radians(angle);
  prevAngle=angle2;
  xSpeed=cos(angle2) * 3 ;
  ySpeed=sin(angle2) * 3 ;
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 12, 2021, 7:52pm UTC](https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065/6 "2021-05-12T19:52:26Z")

</div>

new version

```auto

float ax=300, ay=330; 
float xSpeed=0, ySpeed=0;
float prevAngle; 

void setup() {
  size(1300, 800);
  background(210);
  frameRate(23);
  turnRight(0);
}

void draw() {
  // background(51);

  ax+=xSpeed;
  ay+=ySpeed;

  fill(255);
  ellipse(ax, ay, 17, 17);

  //if (frameCount % 3 == 0)
  // turnLeft(10);

  if (keyPressed) {
    if (keyCode==LEFT)
      turnLeft(10); 
    else if (keyCode==RIGHT)
      turnRight(10);
    else if (key=='c')
      background(210);
  }
}

//-----------------------------------------------------------------------

void turnRight(float angle) {
  // receives angle in degree 
  // turn right 
  // need to change xSpeed and ySpeed so that object will move
  // with that changed angle

  float angle2=radians(angle)+prevAngle;
  prevAngle=angle2;
  xSpeed=cos(angle2) * 3 ;
  ySpeed=sin(angle2) * 3 ;
}

void turnLeft(float angle) {
  // receives angle in degree 
  // turn right 
  // need to change xSpeed and ySpeed so that object will move
  // with that changed angle

  float angle2=prevAngle-radians(angle);
  prevAngle=angle2;
  xSpeed=cos(angle2) * 3 ;
  ySpeed=sin(angle2) * 3 ;
}

```

---

<div class="post-metadata">

**Author:** ![helloscoopz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/helloscoopz/32/5116_2.png) [@helloscoopz](https://discourse.processing.org/u/helloscoopz)\
**Post date:** [May 12, 2021, 8:13pm UTC](https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065/7 "2021-05-12T20:13:14Z")

</div>

Thank you, this is really what I’m looking for. but this code has a bug. Just change the parameter values to 45 degrees and see. It does total nonsense. If this piece of code works as how it’s intended to work, this is exactly what I’m looking for.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a471662b12fcf3555e53f7526721dcfbbad9e866.png)

---

<div class="post-metadata">

**Author:** ![helloscoopz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/helloscoopz/32/5116_2.png) [@helloscoopz](https://discourse.processing.org/u/helloscoopz)\
**Post date:** [May 12, 2021, 8:14pm UTC](https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065/8 "2021-05-12T20:14:23Z")

</div>

I’m not sure how I can do anything about it. if you can do a snippet for me, that’d be really awesome. Thanks for your response anyways.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 12, 2021, 8:31pm UTC](https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065/9 "2021-05-12T20:31:23Z")

</div>

I am not at the computer right now

I can’t see any errors in the code

Or maybe you have another expectation than I.

You sure there’s an error?

Can you please show your entire code?

---

<div class="post-metadata">

**Author:** ![helloscoopz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/helloscoopz/32/5116_2.png) [@helloscoopz](https://discourse.processing.org/u/helloscoopz)\
**Post date:** [May 12, 2021, 8:40pm UTC](https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065/10 "2021-05-12T20:40:45Z")

</div>

There’s no error, but there is a bug. code executes perfectly. here is my whole code:

Cow.pde

```auto
public class Cow { 
  float x, y, dx, dy, radius;
  color c;
  boolean colliding = false;
  boolean selected = true;
  float prevAngle = 0;

  Cow(float rad, float x, float y, float dx, float dy) {
    radius = rad;
    this.x = x;
    this.y = y;
    this.dx = 5;//(int)(dx*100)/100.0;
    this.dy = -5;//(int)(dy*100)/100.0;
    c = color(random(255), random(255), random(255));
  }

  Cow() {
    this(20+(int)(Math.random()*30), width/2, height/2, random(6)-3, random(6)-3);
  }

  void move() {
    int mult = 1;
    if (selected && colliding) {
      mult = 2;
    } 

    x += dx * mult;
    y += dy * mult;

    if (x + radius > width || x - radius < 0) dx *= -1;
    if (y + radius > height || y - radius < 0) dy *= -1;
  }

  void display() {
    noStroke();

    if (colliding) {
      fill(255, 0, 0, 100);
    } else {
      fill(c);
    }

    ellipse(x, y, radius*2, radius*2);

    if (selected) {
      fill(255);
      ellipse(x-10, y, 5, 5);
      ellipse(x+10, y, 5, 5);
    }
  }

  void click() {
    if (dist(mouseX, mouseY, this.x, this.y) <= radius) {
      selected = !selected;
    }
  }

  void collide(ArrayList<Cow> others) {
    int counter = 0;
    for (Cow oc : others) {
      if (oc != this && dist(oc.x, oc.y, this.x, this.y) <= (oc.radius + this.radius)) {
        counter ++;
      }
    }
    if (counter > 0) colliding = true;
    else colliding = false;
  }

  void turn(float angle) {
    float newAngle = prevAngle-radians(angle);
    prevAngle = newAngle;
    dx = cos(newAngle)*5;
    dy = sin(newAngle)*5;
  }

  void changeSpeed(float dv) {
    this.dx += dv;
    this.dy += dv;
  }
}

```

CowDemo.pde

```auto
ArrayList<Cow> cows;

void setup() {
  frameRate(30);
  size(1000, 800);
  //size(300, 300);
  cows = new ArrayList<Cow>();
  for (int i = 0; i < 1; i++) {
    cows.add(new Cow());
  }
}

void draw() {
  background(200);

  int showPos = 1;
  for (Cow c : cows) {
    c.collide(cows);
    c.move();
    c.display();

    if (c.selected) {
      fill(0);
      text("Dx: "+c.dx+" Dy: "+c.dy, width-200, 20*showPos);
      showPos++;
    }
  }

  fill(0);
  textSize(20);
  text("FPS: "+frameRate+"Cows: "+cows.size(), 0, 20);
}

void mousePressed() {
  if (mouseButton == RIGHT) {
    cows.add(new Cow(20+(int)(Math.random()*30), mouseX, mouseY, random(6)-3, random(6)-3));
  }

  for (Cow c : cows) {
    c.turn(90);
  }  
}

void keyPressed() {
  if (keyCode == 32) {
    cows.clear();
  }
}

```

In this configuration, All seems working fine, except the first turn becomes wrong. I’ve set the angle to 90. but when i execute turn first time it does 45 degree angle. and then onwards it does 90 degree as intended.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 12, 2021, 9:14pm UTC](https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065/11 "2021-05-12T21:14:18Z")

</div>

> [@helloscoopz](#):
>
> `c.turn(0);`

After adding a new cow (or in the constructor of the class), can you please say `turn(0);`

Besides, angle of 0 is east not north in processing

---

<div class="post-metadata">

**Author:** ![helloscoopz](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/helloscoopz/32/5116_2.png) [@helloscoopz](https://discourse.processing.org/u/helloscoopz)\
**Post date:** [May 13, 2021, 1:41pm UTC](https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065/12 "2021-05-13T13:41:41Z")

</div>

If I do so, it doesn’t work as intended. because the initial angle is generated randomly and if after constructor if I say turn(0) it starts to go in a single direction. so that doesn’t work. again that constant 5 in the turn method doesn’t make any sense in this context.

we already know currently changing x and y size. so basically what we need to calculate is the x, y result when the combined vector of current speedX, speedY changed by the given angle. so theoretically there shouldn’t be any constant used.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [May 13, 2021, 3:12pm UTC](https://discourse.processing.org/t/change-moving-angle-by-changing-the-moving-directions-speeds/30065/13 "2021-05-13T15:12:00Z")

</div>

```auto

ArrayList<Cow> cows;

void setup() {
  frameRate(30);
  size(1000, 800);
  //size(300, 300);
  cows = new ArrayList<Cow>();
  for (int i = 0; i < 1; i++) {
    cows.add(new Cow());
  }
}

void draw() {
  background(200);

  int showPos = 1;
  for (Cow c : cows) {
    c.collide(cows);
    c.move();
    c.display();

    if (c.selected) {
      fill(0);
      text("Dx: "+c.dx+" Dy: "+c.dy, width-200, 20*showPos);
      showPos++;
    }
  }

  fill(0);
  textSize(20);
  text("FPS: "
    +nfs(int(frameRate), 0)
    +" Cows: "
    +cows.size(), 
    0, 20);
}

// ---------------------------------------------------------------------------------

void mousePressed() {
  if (mouseButton == RIGHT) {
    cows.add(new Cow(20+(int)(Math.random()*30), mouseX, mouseY, random(6)-3, random(6)-3));
  } else {
    for (Cow c : cows) {
      c.turn(90);
    }
  }
}

void keyPressed() {
  if (keyCode == 32) {
    cows.clear();
  }
}

// =======================

public class Cow { 
  float x, y, dx, dy, radius;
  color c;
  boolean colliding = false;
  boolean selected = true;
  float prevAngle = 0;

  Cow(float rad, float x, float y, float dx, float dy) {
    radius = rad;
    this.x = x;
    this.y = y;
    this.dx = 0;//(int)(dx*100)/100.0;
    this.dy = 0;//(int)(dy*100)/100.0;
    turn(45);
    c = color(random(255), random(255), random(255));
  }

  Cow() {
    this(20+(int)(Math.random()*30), width/2, height/2, random(6)-3, random(6)-3);
  }

  void move() {
    int mult = 1;
    if (selected && colliding) {
      mult = 2;
    } 

    x += dx * mult;
    y += dy * mult;

    if (x + radius > width || x - radius < 0)
      dx *= -1;
    if (y + radius > height || y - radius < 0) 
      dy *= -1;
  }

  void display() {
    noStroke();

    if (colliding) {
      fill(255, 0, 0, 100);
    } else {
      fill(c);
    }

    ellipse(x, y, radius*2, radius*2);

    if (selected) {
      fill(255);
      ellipse(x-10, y, 5, 5);
      ellipse(x+10, y, 5, 5);
    }
  }

  void click() {
    if (dist(mouseX, mouseY, this.x, this.y) <= radius) {
      selected = !selected;
    }
  }

  void collide(ArrayList<Cow> others) {
    int counter = 0;
    for (Cow oc : others) {
      if (oc != this && dist(oc.x, oc.y, this.x, this.y) <= (oc.radius + this.radius)) {
        counter ++;
      }
    }
    if (counter > 0) colliding = true;
    else colliding = false;
  }

  void turn(float angle) {
    float newAngle = prevAngle-radians(angle);
    prevAngle = newAngle;
    dx = cos(newAngle)*5;
    dy = sin(newAngle)*5;
  }

  void changeSpeed(float dv) {
    this.dx += dv;
    this.dy += dv;
  }
}

```