# Need Help Connecting Points in 2D Array

**URL:** <https://discourse.processing.org/t/need-help-connecting-points-in-2d-array/12803>\
**Category:** Coding Questions\
**Created:** [July 19, 2019, 2:26am UTC](https://discourse.processing.org/t/need-help-connecting-points-in-2d-array/12803 "2019-07-19T02:26:24Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![jmorri36](https://avatars.discourse-cdn.com/v4/letter/j/e68b1a/32.png) [@jmorri36](https://discourse.processing.org/u/jmorri36)\
**Post date:** [July 19, 2019, 2:26am UTC](https://discourse.processing.org/t/need-help-connecting-points-in-2d-array/12803/1 "2019-07-19T02:26:25Z")

</div>

Hi,

The sketch that I’m working on makes a random ripple on the screen, or when you click inside the ripple. Right now I have it with a bunch of points moving up and down on the Z axis along a grid. I’m having trouble figuring out how I can now connect the points the create a surface. Suggestions? The _for_ statement I’m having trouble with is on line 174.

Thanks

```auto
float[][] particle;
float[][] particlesSpeed;

float[][] particlesNew;
float[][] particlesSpeedNew;

float particelGain = 0.00999;
float forceGain = 0.999; // Speed

int funberOfPArticles = 100;
float CameraX = 500;
float CameraY = 501;
float CameraZ = 850;
//float CameraZ = 1520;

float CameraMovments = 0;
int CameraMovInt = 0;

float zoom = 1000 / funberOfPArticles;
float offset = 0;

float waveOrNot = -20;

long hitTime = 0;
int muonX;
int muonY;
boolean mouse = false;
int MouseXIndex; 
int MouseYIndex;
boolean Print = false;

void setup() {
  size(1000, 1000, P3D);
  //fullScreen(P3D);
  //pixelDensity(2);
  particle = new float[funberOfPArticles][funberOfPArticles];
  particlesSpeed = new float[funberOfPArticles][funberOfPArticles];
  particlesNew = new float[funberOfPArticles][funberOfPArticles];
  particlesSpeedNew = new float[funberOfPArticles][funberOfPArticles];

  for (int x = 1; x<funberOfPArticles-1; x++) {
    for (int y = 1; y<funberOfPArticles-1; y++) {

      particle[x][y] = 0.0;
      particlesNew[x][y] = 0.0;
      particlesSpeed[x][y] = 0.0;
      particlesSpeedNew[x][y] = 0.0;
    }
  }

  noFill();
  stroke(0);
  noStroke();
}

void draw() {

  //pointLight(255, 255, 255, mouseX, mouseY, 600);
  //ambientLight(102, 102, 102);  
  //lights();

  camera(CameraX, CameraY, CameraZ, 500, 500, 0.0, 
    0.0, 0.0, -1.0);

  updateMesh();
  background(255);
  //fill(255, 255, 0);
  //ellipse(mouseX, mouseY, 20, 20);
  drawMesh();
}

void updateMesh() {

  for (int x = 1; x<funberOfPArticles-2; x++) {
    for (int y = 1; y<funberOfPArticles-2; y++) {
      //under 
      float force1 = 0.0;
      force1 += particle[x-1][y-1] - particle[x][y];
      force1 += particle[x-1][y] - particle[x][y];
      force1 += particle[x-1][y+1] - particle[x][y];
      //over
      force1 += particle[x+1][y-1] - particle[x][y];
      force1 += particle[x+1][y] - particle[x][y];
      force1 += particle[x+1][y+1] - particle[x][y];
      //sidene
      force1 += particle[x][y-1] - particle[x][y];
      force1 += particle[x][y+1] - particle[x][y];

      force1 -= particle[x][y+1] / 8;

      //force1 = constrain(force1, -1, 1);

      particlesSpeedNew[x][y] = 0.995 * particlesSpeedNew[x][y] + force1/100;

      particlesNew[x][y] = particle[x][y] + particlesSpeedNew[x][y];
    }
  }

  for (int x = 1; x<funberOfPArticles-1; x++) {
    for (int y = 1; y<funberOfPArticles-1; y++) {
      particle[x][y] = particlesNew[x][y];
    }
  }
  if (waveOrNot != 0) {
    offset += .1;
    MouseXIndex = 2 + (funberOfPArticles-4) * muonX / width;
    MouseYIndex = 2 + (funberOfPArticles-4) * muonY / height;
    if (Print == true) {
      Print = false;
      print("xIndex " + MouseXIndex + ", yIndex " + MouseYIndex + " | ");
      println(muonX + ", " + muonY + " | Seconds Passed " + ((millis() - hitTime))/1000 + " | frameRate " + int(frameRate));
    }
    particlesSpeedNew[MouseXIndex][MouseYIndex] = waveOrNot;
    particlesSpeedNew[MouseXIndex+1][MouseYIndex+1] = waveOrNot;
    particlesSpeedNew[MouseXIndex+1][MouseYIndex] = waveOrNot;
    particlesSpeedNew[MouseXIndex+1][MouseYIndex-1] = waveOrNot;
    particlesSpeedNew[MouseXIndex][MouseYIndex-1] = waveOrNot;
    particlesSpeedNew[MouseXIndex-1][MouseYIndex+1] = waveOrNot;
    particlesSpeedNew[MouseXIndex-1][MouseYIndex] = waveOrNot;
    particlesSpeedNew[MouseXIndex-1][MouseYIndex-1] = waveOrNot;

    particle[MouseXIndex][MouseYIndex] = waveOrNot*10;
    particle[MouseXIndex+1][MouseYIndex+1] = waveOrNot*5;
    particle[MouseXIndex+1][MouseYIndex] = waveOrNot*10;
    particle[MouseXIndex+1][MouseYIndex-1] = waveOrNot*5;
    particle[MouseXIndex][MouseYIndex-1] = waveOrNot*10;
    particle[MouseXIndex-1][MouseYIndex+1] = waveOrNot*5;
    particle[MouseXIndex-1][MouseYIndex] = waveOrNot*10;
    particle[MouseXIndex-1][MouseYIndex-1] = waveOrNot*5;

    //particlesSpeedNew[40a][40] = 100.0 * sin( offset);
  }

  if (frameCount % int(random(30, 800)) == 0 || mouse == true) {
    muonX = int(random(0, width));
    muonY = int(random(0, height));
    if (mouse == true) {
      muonX = mouseX;
      muonY = mouseY;
    }
    Print = true;
    waveOrNot = -20;
    hitTime = millis();
    mouse = false;
  }

  if (millis() - hitTime > 500) {
    waveOrNot = 0;
  }
}

void mouseClicked() {
  mouse = true;
}

boolean c = true;

void drawMesh() {
  strokeWeight(3);
  stroke(0);

  //fill(255, 0, 0);
  //ellipse(muonX, muonY, 20, 20);

  //vertical lines
  for (int x = 0; x<funberOfPArticles; x++) {

    beginShape();
    for (int y = 0; y<funberOfPArticles; y++) {
      //fill(0);
      //vertex( (x)*zoom, (y)*zoom, particle[x][y] );
      point( (x)*zoom, (y)*zoom, particle[x][y] );
    }
    endShape();
  }
}

int adjAmt = 50;

void keyPressed() {
  if (keyCode == UP) {
    CameraY -= adjAmt;
  } else if (keyCode == DOWN) {
    CameraY += adjAmt;
  }
  if (keyCode == RIGHT) {
    CameraX += adjAmt;
  }  
  if (keyCode == LEFT) {
    CameraX -= adjAmt;
  }

  if (key==' ') {
    if (waveOrNot == 0) {
      waveOrNot = -20;
    } else {
      waveOrNot = 0;
    }
  }

  if (key == 'a') {
    CameraZ += adjAmt;
  }  
  if (key == 'z') {
    CameraZ -= adjAmt;
  }
  println(" " + CameraX + ", " + CameraY + ", " + CameraZ);
}

```

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [July 19, 2019, 4:22am UTC](https://discourse.processing.org/t/need-help-connecting-points-in-2d-array/12803/2 "2019-07-19T04:22:52Z")

</div>

Looks neat! Have you considered creating a vertex shape or quad between 4 points and fill this with a transparent color? So for instance, if you’d go for quad(x1, y1, x2, y2, x3, y3, x4, y4):

x1, y1 = the very first point in the left top  
x2, y2 = one point to the right  
x3, y3 = the second point to the left on the second row  
x4, y4 = the first point to the left on the second row

**update**  
Woopsie Daisy, just crossed my mind that quads don’t have z-values so guess the suggestion above won’t work. ‘Quad vertices’ probably will though 🙂

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [July 19, 2019, 8:56pm UTC](https://discourse.processing.org/t/need-help-connecting-points-in-2d-array/12803/3 "2019-07-19T20:56:22Z")

</div>

I noticed you commented out some code at Line 175:

```auto
  for (int x = 0; x<funberOfPArticles; x++) {

    beginShape();
    for (int y = 0; y<funberOfPArticles; y++) {
      //fill(0);
      //vertex( (x)*zoom, (y)*zoom, particle[x][y] );
      point( (x)*zoom, (y)*zoom, particle[x][y] );
    }
    endShape();
  }

```

Was `vertex()` not working for you?

---

<div class="post-metadata">

**Author:** ![jmorri36](https://avatars.discourse-cdn.com/v4/letter/j/e68b1a/32.png) [@jmorri36](https://discourse.processing.org/u/jmorri36)\
**Post date:** [July 19, 2019, 9:49pm UTC](https://discourse.processing.org/t/need-help-connecting-points-in-2d-array/12803/4 "2019-07-19T21:49:38Z")

</div>

Vertex does work, it looks better than just the points, but I’d like to create triangles or quads at the Z (particle[x][y]) locations.

What I’m having trouble with is how to create a for statement to link the Z’s together.

---

<div class="post-metadata">

**Author:** ![jmorri36](https://avatars.discourse-cdn.com/v4/letter/j/e68b1a/32.png) [@jmorri36](https://discourse.processing.org/u/jmorri36)\
**Post date:** [July 19, 2019, 10:45pm UTC](https://discourse.processing.org/t/need-help-connecting-points-in-2d-array/12803/5 "2019-07-19T22:45:39Z")

</div>

Okay, I got it. Was thinking of how to construct the shape wrong. Below is the working code. Only thing is, when the Z axis goes too low, Processing glitches out and doesn’t draw the shape correctly.

```auto
float[][] particle;
float[][] particlesSpeed;

float[][] particlesNew;
float[][] particlesSpeedNew;

float particelGain = 0.00999;
float forceGain = 0.999; // Speed

int funberOfPArticles = 80;
float CameraX = 500;
float CameraY = 501;
float CameraZ = 850;
//float CameraZ = 1520;

float CameraMovments = 0;
int CameraMovInt = 0;

float zoom = 1000 / funberOfPArticles;
float offset = 0;

float waveOrNot = -5;

long hitTime = 0;
int muonX;
int muonY;
boolean mouse = false;
int MouseXIndex; 
int MouseYIndex;
boolean Print = false;

void setup() {
  size(1000, 1000, P3D);
  //fullScreen(P3D);
  //pixelDensity(2);
  particle = new float[funberOfPArticles][funberOfPArticles];
  particlesSpeed = new float[funberOfPArticles][funberOfPArticles];
  particlesNew = new float[funberOfPArticles][funberOfPArticles];
  particlesSpeedNew = new float[funberOfPArticles][funberOfPArticles];

  for (int x = 1; x<funberOfPArticles-1; x++) {
    for (int y = 1; y<funberOfPArticles-1; y++) {

      particle[x][y] = 0.0;
      particlesNew[x][y] = 0.0;
      particlesSpeed[x][y] = 0.0;
      particlesSpeedNew[x][y] = 0.0;
    }
  }

  noFill();
  stroke(0);
  noStroke();
}

void draw() {

  pointLight(255, 255, 255, 200, 400, 600);
  //ambientLight(102, 102, 102);  
  //lights();

  camera(CameraX, CameraY, CameraZ, 500, 500, 0.0, 
    0.0, 0.0, -1.0);

  updateMesh();
  background(0);
  //fill(255, 255, 0);
  //ellipse(mouseX, mouseY, 20, 20);
  drawMesh();
}

void updateMesh() {

  for (int x = 1; x<funberOfPArticles-2; x++) {
    for (int y = 1; y<funberOfPArticles-2; y++) {
      //under 
      float force1 = 0.0;
      force1 += particle[x-1][y-1] - particle[x][y];
      force1 += particle[x-1][y] - particle[x][y];
      force1 += particle[x-1][y+1] - particle[x][y];
      //over
      force1 += particle[x+1][y-1] - particle[x][y];
      force1 += particle[x+1][y] - particle[x][y];
      force1 += particle[x+1][y+1] - particle[x][y];
      //sidene
      force1 += particle[x][y-1] - particle[x][y];
      force1 += particle[x][y+1] - particle[x][y];

      force1 -= particle[x][y+1] / 8;

      //force1 = constrain(force1, -1, 1);

      particlesSpeedNew[x][y] = 0.995 * particlesSpeedNew[x][y] + force1/100;

      particlesNew[x][y] = particle[x][y] + particlesSpeedNew[x][y];
    }
  }

  for (int x = 1; x<funberOfPArticles-1; x++) {
    for (int y = 1; y<funberOfPArticles-1; y++) {
      particle[x][y] = particlesNew[x][y];
    }
  }
  if (waveOrNot != 0) {
    offset += .1;
    MouseXIndex = 2 + (funberOfPArticles-4) * muonX / width;
    MouseYIndex = 2 + (funberOfPArticles-4) * muonY / height;
    if (Print == true) {
      Print = false;
      print("xIndex " + MouseXIndex + ", yIndex " + MouseYIndex + " | ");
      println(muonX + ", " + muonY + " | Seconds Passed " + ((millis() - hitTime))/1000 + " | frameRate " + int(frameRate));
    }
    particlesSpeedNew[MouseXIndex][MouseYIndex] = waveOrNot;
    particlesSpeedNew[MouseXIndex+1][MouseYIndex+1] = waveOrNot;
    particlesSpeedNew[MouseXIndex+1][MouseYIndex] = waveOrNot;
    particlesSpeedNew[MouseXIndex+1][MouseYIndex-1] = waveOrNot;
    particlesSpeedNew[MouseXIndex][MouseYIndex-1] = waveOrNot;
    particlesSpeedNew[MouseXIndex-1][MouseYIndex+1] = waveOrNot;
    particlesSpeedNew[MouseXIndex-1][MouseYIndex] = waveOrNot;
    particlesSpeedNew[MouseXIndex-1][MouseYIndex-1] = waveOrNot;

    particle[MouseXIndex][MouseYIndex] = waveOrNot*10;
    particle[MouseXIndex+1][MouseYIndex+1] = waveOrNot*5;
    particle[MouseXIndex+1][MouseYIndex] = waveOrNot*10;
    particle[MouseXIndex+1][MouseYIndex-1] = waveOrNot*5;
    particle[MouseXIndex][MouseYIndex-1] = waveOrNot*10;
    particle[MouseXIndex-1][MouseYIndex+1] = waveOrNot*5;
    particle[MouseXIndex-1][MouseYIndex] = waveOrNot*10;
    particle[MouseXIndex-1][MouseYIndex-1] = waveOrNot*5;

    //particlesSpeedNew[40a][40] = 100.0 * sin( offset);
  }

  if (frameCount % int(random(30, 800)) == 0 || mouse == true) {
    muonX = int(random(0, width));
    muonY = int(random(0, height));
    if (mouse == true) {
      muonX = mouseX;
      muonY = mouseY;
    }
    Print = true;
    waveOrNot = -5;
    hitTime = millis();
    mouse = false;
  }

  if (millis() - hitTime > 500) {
    waveOrNot = 0;
  }
}

void mouseClicked() {
  mouse = true;
}

boolean c = true;

void drawMesh() {
  strokeWeight(1);
  stroke(0);

  //fill(255, 0, 0);
  //ellipse(muonX, muonY, 20, 20);

  //vertical lines
  fill(0);

  for (int x = 0; x<funberOfPArticles-1; x++) {

    for (int y = 0; y<funberOfPArticles-1; y++) {
      fill(255);
      beginShape();
      vertex( (x)*zoom, (y)*zoom, particle[x][y] );
      vertex( (x)*zoom, (y+1)*zoom, particle[x][y+1] );      
      vertex( (x+1)*zoom, (y+1)*zoom, particle[x+1][y+1] );
      vertex( (x+1)*zoom, (y)*zoom, particle[x+1][y] );
      endShape();

      //fill(150);
      //beginShape();
      //vertex( (x+1)*zoom, (y)*zoom, particle[x+1][y] );
      //vertex( (x+1)*zoom, (y+1)*zoom, particle[x][y+1] );
      //vertex( (x)*zoom, (y+1)*zoom, particle[x][y] );
      //endShape();
    }
  }
  //fill(150);
  //for (int y = 0; y<funberOfPArticles-1; y++) {

  // for (int x = 0; x<funberOfPArticles-1; x++) {
  // //fill(0);
  // //beginShape();
  // //vertex( (x)*zoom, (y)*zoom, particle[x][y] );
  // //vertex( (x+1)*zoom, (y)*zoom, particle[x+1][y] );
  // //vertex( (x)*zoom, (y+1)*zoom, particle[x][y+1] );
  // //endShape();

  // fill(150);
  // beginShape();
  // vertex( (x+1)*zoom, (y)*zoom, particle[x][y] );
  // vertex( (x+1)*zoom, (y+1)*zoom, particle[x][y+1] );
  // vertex( (x)*zoom, (y+1)*zoom, particle[x+1][y] );
  // endShape();
  // }
  //}
}

int adjAmt = 50;

void keyPressed() {
  if (keyCode == UP) {
    CameraY -= adjAmt;
  } else if (keyCode == DOWN) {
    CameraY += adjAmt;
  }
  if (keyCode == RIGHT) {
    CameraX += adjAmt;
  }  
  if (keyCode == LEFT) {
    CameraX -= adjAmt;
  }

  if (key==' ') {
    if (waveOrNot == 0) {
      waveOrNot = -5;
    } else {
      waveOrNot = 0;
    }
  }

  if (key == 'a') {
    CameraZ += adjAmt;
  }  
  if (key == 'z') {
    CameraZ -= adjAmt;
  }
  println(" " + CameraX + ", " + CameraY + ", " + CameraZ);
}

```

---

<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:** [July 20, 2019, 8:48am UTC](https://discourse.processing.org/t/need-help-connecting-points-in-2d-array/12803/6 "2019-07-20T08:48:02Z")

</div>

> [@jmorri36](#):
>
> when the Z axis goes too low, Processing glitches out

Z negative is away from you into your screen

Do you mean this? Does it get cut off when far away from?

---

<div class="post-metadata">

**Author:** ![jmorri36](https://avatars.discourse-cdn.com/v4/letter/j/e68b1a/32.png) [@jmorri36](https://discourse.processing.org/u/jmorri36)\
**Post date:** [July 21, 2019, 1:56pm UTC](https://discourse.processing.org/t/need-help-connecting-points-in-2d-array/12803/7 "2019-07-21T13:56:41Z")

</div>

Yeah, it doesn’t properly draw the square shapes that I’m using to get the surface if the Z goes too far toward the screen.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [July 21, 2019, 4:23pm UTC](https://discourse.processing.org/t/need-help-connecting-points-in-2d-array/12803/8 "2019-07-21T16:23:56Z")

</div>

Sounds like it might be helpful for you to understand the default perspective settings, and how they affect the rendering frustum.

- [https://processing.org/reference/perspective\_.html](https://processing.org/reference/perspective_.html)
- [https://processing.org/reference/frustum\_.html](https://processing.org/reference/frustum_.html)

You could translate your view farther back / your rendering farther forward. Or try changing the perspective.

---

<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:** [July 22, 2019, 9:15am UTC](https://discourse.processing.org/t/need-help-connecting-points-in-2d-array/12803/9 "2019-07-22T09:15:45Z")

</div>

maybe

// avoid clipping : https : // [forum.processing.org/two/discussion/4128/quick-q-how-close-is-too-close-why-when-do-3d-objects-disappear](http://forum.processing.org/two/discussion/4128/quick-q-how-close-is-too-close-why-when-do-3d-objects-disappear)  
perspective(PI/3.0, (float) width/height, 1, 1000000);