Why do I need to swap x with y?

[clankill3r]

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

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?

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;
}

[glv]

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.

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:

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

3. 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.

[clankill3r]

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

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;
}

[glv]

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.

[clankill3r]

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

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;
}