# Why do I need to swap x with y?

**URL:** <https://discourse.processing.org/t/why-do-i-need-to-swap-x-with-y/16227>\
**Category:** Coding Questions\
**Created:** [December 7, 2019, 6:55pm UTC](https://discourse.processing.org/t/why-do-i-need-to-swap-x-with-y/16227 "2019-12-07T18:55:32Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![clankill3r](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clankill3r/32/1098_2.png) [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Post date:** [December 7, 2019, 6:55pm UTC](https://discourse.processing.org/t/why-do-i-need-to-swap-x-with-y/16227/1 "2019-12-07T18:55:33Z")

</div>

I made a script where I can interpolate between the corners of a quad to get a grid of points.

 ![Screen Shot 2019-12-07 at 19.52.32](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/5/56652669099d32b8305f8624c7a89c96924558df.png)

First off all, I have a light headache, so maybe I understand it tomorrow.  
Why do I need to swap x and y to make the code work?

```auto
int LT = 0;
int LB = 1;
int RT = 2;
int RB = 3;

void setup() {
  size(600, 600, P3D);
}

PVector[] corners = {
  new PVector(10, 10), 
  new PVector(10, 590), 
  new PVector(590, 10), 
  new PVector(590, 590), 
};

int index = 0;

void draw() {
  background(0);

  stroke(255);
  fill(255);

  corners[index].x = mouseX;
  corners[index].y = mouseY;

  for (int y = 0; y < 10; y++) {

    float y1 = map(y, 0, 9, corners[LT].x, corners[LB].x);
    float x1 = map(y, 0, 9, corners[LT].y, corners[LB].y);
    float x2 = map(y, 0, 9, corners[RT].y, corners[RB].y);
    float y2 = map(y, 0, 9, corners[RT].x, corners[RB].x);

    line(y1, x1, y2, x2);

    for (int x = 0; x < 10; x++) {
      float t = x / 9.0;
      float px = lerp(y1, y2, t);
      float py = lerp(x1, x2, t);
      ellipse(px, py, 5, 5);
    }
  }

  fill(255, 0, 0);
  ellipse(corners[LT].x, corners[LT].y, 5, 5);
  ellipse(corners[RT].x, corners[RT].y, 5, 5);
  ellipse(corners[LB].x, corners[LB].y, 5, 5);
  ellipse(corners[RB].x, corners[RB].y, 5, 5);
}

void keyPressed() {
  index++;
  if (index == 4) index = 0;
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 7, 2019, 11:34pm UTC](https://discourse.processing.org/t/why-do-i-need-to-swap-x-with-y/16227/2 "2019-12-07T23:34:09Z")

</div>

Hello,

Very cool patterns!

I did not see keyPressed() so this is all I did for now…

I started with a fixed corner to understand this.

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

I can also draw vertical lines.

This is what I did:

1. Renamed everything to X1, Y1 (top left) and X2, Y2 (bottom right) to make it easier to follow
2. The **top left** is fixed and the **bottom right** is moved with the mouse:

```auto
 corners[X1].x = 10;            
 corners[Y1].y = 10;            
 corners[X2].x = mouseX;        
 corners[Y2].y = mouseY;      

```

1. I only mapped y1 and y2 in the outer y loop and lerped the x spacing in the inner x loop.

I may work on indexing corners later.  
Next step may be to retain state of grid and have a different mapping as you index through the corners.

Thanks for this! I enjoyed working through it.

You can sort this out by tomorrow I am sure.

🙂

---

<div class="post-metadata">

**Author:** ![clankill3r](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clankill3r/32/1098_2.png) [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Post date:** [December 8, 2019, 11:03am UTC](https://discourse.processing.org/t/why-do-i-need-to-swap-x-with-y/16227/3 "2019-12-08T11:03:47Z")

</div>

remainder to myself, don’t program with a slight headache

```auto

int FLB = 0;
int FLT = 1;
int BLT = 2;
int BLB = 3;
int FRB = 4;
int FRT = 5;
int BRT = 6;
int BRB = 7;

//PVector[] corners = {
// new PVector(-380, -380, -380),
// new PVector(-380, -380, 380),
// new PVector(-380, 380, -380),
// new PVector(-380, 380, -380),
// new PVector( 380, -380, -380),
// new PVector( 380, -380, 380),
// new PVector( 380, 380, 380),
// new PVector( 380, 380, -380),
//};

int LT = 0;
int LB = 1;
int RT = 2;
int RB = 3;

void setup() {
  size(600, 600, P3D);
}

PVector[] corners = {
  new PVector(10, 10), 
  new PVector(10, 590), 
  new PVector(590, 10), 
  new PVector(590, 590), 
};

int index = 0;

void draw() {
  background(0);

  stroke(255);
  fill(255);

  corners[index].x = mouseX;
  corners[index].y = mouseY;

  for (int y = 0; y < 10; y++) {

    float x1 = map(y, 0, 9, corners[LT].x, corners[LB].x);
    float y1 = map(y, 0, 9, corners[LT].y, corners[LB].y);
    float y2 = map(y, 0, 9, corners[RT].y, corners[RB].y);
    float x2 = map(y, 0, 9, corners[RT].x, corners[RB].x);

    line(x1, y1, x2, y2);

    for (int x = 0; x < 10; x++) {
      float t = x / 9.0;
      float px = lerp(x1, x2, t);
      float py = lerp(y1, y2, t);
      ellipse(px, py, 5, 5);
    }
  }

  fill(255, 0, 0);
  ellipse(corners[LT].x, corners[LT].y, 5, 5);
  ellipse(corners[RT].x, corners[RT].y, 5, 5);
  ellipse(corners[LB].x, corners[LB].y, 5, 5);
  ellipse(corners[RB].x, corners[RB].y, 5, 5);
}

void keyPressed() {
  index++;
  if (index == 4) index = 0;
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [December 8, 2019, 11:10am UTC](https://discourse.processing.org/t/why-do-i-need-to-swap-x-with-y/16227/4 "2019-12-08T11:10:16Z")

</div>

I like it!

> [@clankill3r](#):
>
> remainder to myself, don’t program with a slight headache

Reminder to myself… “Don’t rush through code and post!”  
We all do it… 🙂

I did not even see index part and worked through that; I enjoyed it nonetheless!  
Was a good exercise.

🙂

---

<div class="post-metadata">

**Author:** ![clankill3r](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/clankill3r/32/1098_2.png) [@clankill3r](https://discourse.processing.org/u/clankill3r)\
**Post date:** [December 8, 2019, 11:44am UTC](https://discourse.processing.org/t/why-do-i-need-to-swap-x-with-y/16227/5 "2019-12-08T11:44:48Z")

</div>

Here is the 3d version. If you wan’t a good exercise, try to do this before looking at the code 🙂

```auto
import peasy.*;

PeasyCam cam;

int FLB = 0;
int FLT = 1;
int BLT = 2;
int BLB = 3;
int FRB = 4;
int FRT = 5;
int BRT = 6;
int BRB = 7;

PVector[] corners = {
  new PVector(-380, -380, -380), 
  new PVector(-380, -380, 380), 
  new PVector(-380, 380, 380), 
  new PVector(-380, 380, -380), 
  new PVector( 380, -380, -380), 
  new PVector( 380, -380, 380), 
  new PVector( 380, 380, 380), 
  new PVector( 380, 380, -380), 
};

void setup() {
  size(600, 600, P3D);
  cam = new PeasyCam(this, 100);
}

int index = 0;

void draw() {
  background(0);
  //translate(width/2, height/2, -500);
  stroke(255);
  fill(255);

  corners[index].x = map(mouseX, 0, width, -500, 500);
  corners[index].y = map(mouseY, 0, height, -500, 500);

  for (int z = 0; z < 10; z++) {
    
    float t = z / 9.0;
    PVector lt = PVector.lerp(corners[FLT], corners[BLT], t);
    PVector lb = PVector.lerp(corners[FLB], corners[BLB], t);
    PVector rt = PVector.lerp(corners[FRT], corners[BRT], t);
    PVector rb = PVector.lerp(corners[FRB], corners[BRB], t);
    
    for (int y = 0; y < 10; y++) {

      float x1 = map(y, 0, 9, lt.x, lb.x);
      float y1 = map(y, 0, 9, lt.y, lb.y);
      float z1 = map(y, 0, 9, lt.z, lb.z);
      
      float x2 = map(y, 0, 9, rt.x, rb.x);
      float y2 = map(y, 0, 9, rt.y, rb.y);
      float z2 = map(y, 0, 9, rt.z, rb.z);
      
      

      line(x1, y1, z1, x2, y2, z2);

      for (int x = 0; x < 10; x++) {
        float t2 = x / 9.0;
        float px = lerp(x1, x2, t2);
        float py = lerp(y1, y2, t2);
        float pz = lerp(z1, z2, t2);
        push();
        translate(px, py, pz);
        box(5);
        pop();
      
      }
      
    }
  }

  fill(255, 0, 0);
  ellipse(corners[FLT].x, corners[FLT].y, 5, 5);
  ellipse(corners[FRT].x, corners[FRT].y, 5, 5);
  ellipse(corners[FLB].x, corners[FLB].y, 5, 5);
  ellipse(corners[FRB].x, corners[FRB].y, 5, 5);
}

void keyPressed() {
  index++;
  if (index == 4) index = 0;
}

```