# Repositioning my bird character

**URL:** https://discourse.processing.org/t/repositioning-my-bird-character/32529
**Category:** Coding Questions
**Created:** [September 30, 2021, 2:23pm UTC](https://discourse.processing.org/t/repositioning-my-bird-character/32529 "2021-09-30T14:23:16Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)
#### Post date: [September 30, 2021, 3:10pm UTC](https://discourse.processing.org/t/repositioning-my-bird-character/32529/2 "2021-09-30T15:10:55Z")

</div>

Hello @CharrR,

One way to think about it is to realize that everything you are drawing is based on an origin point.  
When you say:

```auto
ellipse(40, 20, 3, 3);

```

You are saying that you want to draw an ellipse center 40 pixels on the right of the origin and 20 pixels under the origin.  
And of course the origin is the top right of your screen.

Now let’s say you want instead to draw the ellipse at the position (60, 50). Of course you can simply write:

```auto
ellipse(60, 50, 3, 3);

```

But in that case we are back at your issue to have to rewrite everything.

What if instead we move our origin point?  
As you can see, that ellipse is 20 pixels more on the right and 30 pixels more down than the previous one (40 + 20 = 60 and 20 + 30 = 50).  
So drawing the previous ellipse at the same “position” from the origin but moving the origin by (20, 30) would be a solution.

One way to achieve it is to write our own function

```auto
void drawEllipseFromOrigin(float x, float y) {
  ellipse(x + 60, y + 50, 3, 3);
}

```

With that function the following code would draw the 2 ellipses where we wanted them:

```auto
drawEllipseFromOrigin(0, 0) // The first ellipse at position (40, 20)
drawEllipseFromOrigin(20, 30) // The second ellipse at position (60, 50)

```

Now imagine that instead of having 1 ellipse you have several lines, and ellipses and arc like in your bird. Then every elements would be translated and you would just need to write in only once:

```auto
void setup() {
  size(500, 500);
  background(102, 178, 255); 
  scale(0.70);
  drawBird(0, 0);
  drawBird(400, 200);
}

void drawBird(float x, float y) {
  
  strokeWeight(1.5);
  fill(0, 153, 120);
  line(x + 50, y + 381, x + 300, y + 381);
  
  /*Right Leg*/
  line(x + 150, y + 220, x + 190, y + 300);
  line(x + 190, y + 300, x + 170, y + 380);
  arc(x + 176, y + 380, 20, 18, PI, TWO_PI, CLOSE);

  fill(250, 200, 100);

  /*body and head*/
  arc(x + 140, y + 180, 150, 150, 0, PI, CLOSE);
  arc(x + 220, y + 180, 50, 50, 0, 2*PI, CLOSE);

  /*left Leg*/
  fill(0, 153, 120);
  line(x + 120, y + 220, x + 150, y + 300);
  line(x + 150, y + 300, x + 110, y + 380);
  arc(x + 118, y + 380, 20, 18, PI, TWO_PI, CLOSE);

  /*eye*/
  fill(255);
  ellipse(x + 225, y + 175, 20, 20);
  fill(0, 0, 153);
  ellipse(x + 227, y + 174, 10, 10);
  fill(255);
  ellipse(x + 229, y + 175, 5, 5);

  /*Lashes*/
  fill(1);
  strokeWeight(2);
  line(x + 220, y + 165, x + 218, y + 160);
  line(x + 226, y + 165, x + 226, y + 158);
  line(x + 232, y + 166, x + 235, y + 162);

  /*Beak*/
  triangle(x + 236, y + 190, x + 232, y + 200, x + 247, y + 200);

  /*Antena*/
  noFill();
  strokeWeight(1);
  arc(x + 258, y + 148, 70, 85, 2.95, TWO_PI);
  arc(x + 288, y + 146, 10, 14, 0, TWO_PI);

  /*Tail*/
  strokeWeight(1);
  fill(255, 153, 153);
  triangle(x + 6, y + 180, x + 60, y + 120, x + 70, y + 180);
  fill(100, 180, 100);
  triangle(x + 12, y + 178, x + 58, y + 126, x + 68, y + 180);
  fill(0, 204, 204);
  triangle(x + 18, y + 176, x + 56, y + 132, x + 68, y + 180);
  fill(250, 200, 100);
  triangle(x + 24, y + 174, x + 54, y + 138, x + 70, y + 180);

  /*wings*/
  strokeWeight(1.5);
  fill(255, 170, 51);
  arc(x + 150, y + 190, 80, 70, 0, PI, CLOSE);
  strokeWeight(2);
  line(x + 126, y + 216, x + 134, y + 210);
  line(x + 144, y + 223, x + 146, y + 212);
  line(x + 164, y + 222, x + 156, y + 212);
}

```

Now this works but as you can see, there is a lot of `x +` and `y +`: it is easy to make a mistake, forget one etc. and it is not easy to read.

To simplify our life, we can use, as you said the `translate()` function. The idea is exactly the same as what we did (moving the origin point) but instead of adding manually the `x +` and `y +`, it does it automatically for us:

```auto
void setup() {
  size(500, 500);
  background(102, 178, 255); 
  scale(0.70);
  drawBird(0, 0);
  drawBird(400, 200);
}

void drawBird(float x, float y) {
  pushMatrix();
  translate(x, y);
  
  strokeWeight(1.5);
  fill(0, 153, 120);
  line( 50, 381, 300, 381);

  /*Right Leg*/
  line( 150, 220, 190, 300);
  line( 190, 300, 170, 380);
  arc( 176, 380, 20, 18, PI, TWO_PI, CLOSE);

  fill(250, 200, 100);

  /*body and head*/
  arc( 140, 180, 150, 150, 0, PI, CLOSE);
  arc( 220, 180, 50, 50, 0, 2*PI, CLOSE);

  /*left Leg*/
  fill(0, 153, 120);
  line( 120, 220, 150, 300);
  line( 150, 300, 110, 380);
  arc( 118, 380, 20, 18, PI, TWO_PI, CLOSE);

  /*eye*/
  fill(255);
  ellipse( 225, 175, 20, 20);
  fill(0, 0, 153);
  ellipse( 227, 174, 10, 10);
  fill(255);
  ellipse( 229, 175, 5, 5);

  /*Lashes*/
  fill(1);
  strokeWeight(2);
  line( 220, 165, 218, 160);
  line( 226, 165, 226, 158);
  line( 232, 166, 235, 162);

  /*Beak*/
  triangle( 236, 190, 232, 200, 247, 200);

  /*Antena*/
  noFill();
  strokeWeight(1);
  arc( 258, 148, 70, 85, 2.95, TWO_PI);
  arc( 288, 146, 10, 14, 0, TWO_PI);

  /*Tail*/
  strokeWeight(1);
  fill(255, 153, 153);
  triangle( 6, 180, 60, 120, 70, 180);
  fill(100, 180, 100);
  triangle( 12, 178, 58, 126, 68, 180);
  fill(0, 204, 204);
  triangle( 18, 176, 56, 132, 68, 180);
  fill(250, 200, 100);
  triangle( 24, 174, 54, 138, 70, 180);

  /*wings*/
  strokeWeight(1.5);
  fill(255, 170, 51);
  arc( 150, 190, 80, 70, 0, PI, CLOSE);
  strokeWeight(2);
  line( 126, 216, 134, 210);
  line( 144, 223, 146, 212);
  line( 164, 222, 156, 212);
  
  popMatrix();
}

```

If you want more info about the `translate()` function, I advise you to go read this post where I explain it a bit more in depth:

> [@How to repeat static drawing rotated four times by 90 degrees - python mode](https://discourse.processing.org/t/how-to-repeat-static-drawing-rotated-four-times-by-90-degrees-python-mode/32409/2):
>
> Hello @LeoP, you are on a good track with rotate() and translate()! They can be a bit complicated to grasp so start with simple things like drawing an ellipse and figure out what it does to that ellipse. Let’s draw one in position (0, 0) and one in position (-50, -50). def setup(): size(100, 100) background(20) noStroke() fill(230) ellipse(0, 0, 20, 20) ellipse(-50, -50, 20, 20) Of course you see only the one at (0, 0) and just partially but not the one in (-…

---

_[View the full topic](https://discourse.processing.org/t/repositioning-my-bird-character/32529)._