Triangle grid moving

LiP

Hey guys, I'm pretty new at processing and need your help. I already have the triangle grid but now I need to clinche some lines and also remove some lines. It shoud look like the picture, but changing by mouseClicked. Thats what I already have:

float elementBr, elementH, anzahlX, anzahlY, rand1, rand2, rand3,a,b;
float[][] Dreiecke;
int Breite=70;
float[] KnotenX;
float[] KnotenY;
int nrX, nrY,nrKnoten;
float atr;
void setup() {
    size(800, 570);
    background(0);
    //smooth();
    strokeWeight(0.5);
    elementBr = 20;
    elementH = (sqrt(3)/2)*elementBr;
}

void draw() {
    background(0);
    stroke(255);
    noFill();
    nrX=width/Breite;
    nrY=height/Breite;
    nrKnoten=nrX*nrY;
    KnotenX= new float[nrKnoten];
    KnotenY= new float[nrKnoten];
    anzahlX=width/elementH;
    anzahlY=height/elementBr;
    //int x=0;
     for(int j = 0; j < anzahlX+(elementH*2); j++) {
        beginShape(TRIANGLE_STRIP);
        for(int i = 0; i < anzahlY +(elementBr*2); i++) {
            float shift = (j % 2) == 0 ? (elementH/2)+3 : 0;
            vertex(-elementBr+i*elementBr+shift, j*elementH);
            vertex(-elementBr+i*elementBr+(elementBr/2)+shift, j*elementH+elementH);
        }
        endShape();
    }

    //for(int j=0;j<pos.length;j++){
    //  float dist=atr.dist(pos[j]);
    //  if (dist<2*Breite){
    //    PVector dir=new PVector(atr.x,atr.y);
    //    dir.sub(pos[j]);
    //    float faktor=map(dist,0,2*Breite,0.8,0.2);
    //    dir.mult(faktor);
    //    pos[j].add(dir);
    //    fill(255,0,0);
    //    beginShape(TRIANGLE_STRIP);
    //    float shift = (j % 2) == 0 ? (elementH/2)+3 : 0;
    //        vertex(pos[j].x,pos[j].y);            
    //        vertex((pos[j].x)+shift, pos[j].y);
    //  } else{
    //    fill(255);
    //    vertex(pos[j].x,pos[j].y);
    //  }
    //}
    fill(0);
    noStroke();
    rect(0,0,40,height);
    rect(0,0,width,30);
    rect(width,0,-120,height);
    rect(0,height,width,-30);
    noLoop();
}
void mouseClicked(){
  loop();
}

`

jeremydouglass

What does "clinche some lines" mean? Did you mean clinch (grip, gather, knot), and can you be more specific?

LiP

It means, like you can see in the picture, that the grid isnt regularly anymore. Looking like folds of fabric. :)

Chrisir

What you see there is a height map

That’s why it looks like a fabric or landscape

There might be tutorials/ examples for height field

When you had a data set boolean [] vertexIsOn to store if a vertex is there (initial all true) you could set a position to false when the mouse is clicked in the area (use dist())

jeremydouglass

If the pictures you want to imitate are generated by triangle strip height maps (3D terrain) then here is a discussion of related techniques:

• 

Note that this approach would require using the P3D renderer in size() rather than the default 2D.

LiP

The tutorial was pretty helpful. Thanks to the two of you. But I don't get how to connect boolean with mouseClicked. Could you help me again? Thats how far I am:

    float[][] Bewegung;
    float Aenderung;
    int i, j; 
    int anzahlSpX, anzahlSpY, shift,x1,x2,y1,y2;
    int Breite=20;
    int Hoehe=17;
    int w=1300;
    int h=1000;
    boolean Farbe=true;


    void setup() {
      noLoop();
      size(800, 570, P3D);
      background(0);
      anzahlSpX= w/Breite;
      anzahlSpY=h/Hoehe;
      Bewegung=new float[anzahlSpX][anzahlSpY];

    }

    void draw () {
      background(0);
      if (Farbe){
      stroke(255);
      }
      if(!Farbe){
        stroke(0);
      }
      noFill();
      Aenderung+=0.01;

      translate(w/2, h/2);
      rotateX(PI/8);
      translate(-w/1.5, -h/1.2);
      float jBe=Aenderung;
      for ( j = 0; j < anzahlSpY; j++) {
        float iBe=Aenderung;
        for ( i = 0; i < anzahlSpX; i++) {
          Bewegung[i][j]=map(noise(iBe, jBe), 0, 1, -80, +80);
          iBe += 0.1;
        }
        jBe += 0.1;
      }
      Landschaft();
      //if(dist<4*Breite){
      //  stroke(0);
      //}


      //  Rahmen();
      //}
      //void Rahmen() {
      //  fill(0);
      //  noStroke();
      //  rect(0, 0, 40, height);
      //  rect(0, 0, width, 30);
      //  rect(width, 0, -120, height);
      //  rect(0, height, width, -30);
    }

    void Landschaft(){

        for ( j = 0; j < anzahlSpY-1; j++) {
        beginShape(TRIANGLE_STRIP);
        for ( i = 0; i < anzahlSpX-1; i++) {
          shift = (j % 2) == 0 ? (Hoehe/2)+3 : 0;
          x1=-Breite+i*Breite+shift;
          x2=-Breite+i*Breite+(Breite/2)+shift;
          y1=j*Hoehe;
          y2=j*Hoehe+Hoehe;
          vertex(x1, y1, Bewegung[i][j]);            
          vertex(x2, y2, Bewegung[i][j+1]);
        }
        endShape();
      }
    }

    void mouseClicked(){
      loop();
      if(dist(mouseX,mouseY,2*Breite,4*Hoehe)){ // ERROR: cannot convert from float to boolean
        Farbe=false;
      }
    }

jeremydouglass

@LiP -- re:

I don't get how to connect boolean with mouseClicked

Can you describe what you are trying to do in more detail?

1. if() expects a statement that evaluates to True or False.
2. dist() returns a number -- not true or false.

You might want something like "if the distance is greater than x" ....?

ERROR: cannot convert from float to boolean

This means: you are trying to put in a number where you should be putting in something that is true/false. For example, use > to return true/false.

LiP

I tried to turn the colour of the lines that are near to the mouse into black. So it is looking like something is missing in the grid. Like if the distance between mouse and line ist smaller than 4*width of the triangle the stroke is changing into black. But any way that could turn some lines in black would be good for me..

Chrisir

If this array Bewegung holds the lines / points:

make a parallel grid of boolean isThere as I described (before setup())

Before 72 place an if(isThere[...][...]......

which can suppress vertices (using the data of isThere)

in mouseClicked or mousePressed for loop over Bewegung and check the dist() for all and set them isThere[][] to false accordingly (storing data into isThere)

LiP

@Chrisir Do you have an example for the using of boolean []? I never used it before and find nothing, thats helpful.

Chrisir

look at reference boolean please

boolean[][] isThere = new boolean [111][111];

Chrisir

some works needs to be done

since we have ONE huge shape it looks dumb when we remove vertices

float[][] Bewegung;
boolean[][] isThere;

float Aenderung;
int i, j; 
int anzahlSpX, anzahlSpY, shift, x1, x2, y1, y2;
int Breite=20;
int Hoehe=17;
int w=1300;
int h=1000;
boolean Farbe=true;


void setup() {
  // noLoop();

  size(800, 570, P3D);

  background(0);
  anzahlSpX= w/Breite;
  anzahlSpY=h/Hoehe;

  Bewegung=new float[anzahlSpX][anzahlSpY];
  isThere = new boolean [anzahlSpX][anzahlSpY];

  for ( j = 0; j < anzahlSpY; j++) {
    for ( i = 0; i < anzahlSpX; i++) {
      isThere[i][j]=true;
    }
  }
}

void draw () {
  background(0);
  if (Farbe) {
    stroke(255);
  }
  if (!Farbe) {
    stroke(0);
  }
  noFill();
  Aenderung+=0.01;

  translate(w/2, h/2);
  rotateX(PI/8);
  translate(-w/1.5, -h/1.2);
  float jBe=Aenderung;
  for ( j = 0; j < anzahlSpY; j++) {
    float iBe=Aenderung;
    for ( i = 0; i < anzahlSpX; i++) {
      Bewegung[i][j]=map(noise(iBe, jBe), 0, 1, -80, +80);
      iBe += 0.1;
    }
    jBe += 0.1;
  }
  Landschaft();
  //if(dist<4*Breite){
  //  stroke(0);
  //}


  //  Rahmen();
  //}
  //void Rahmen() {
  //  fill(0);
  //  noStroke();
  //  rect(0, 0, 40, height);
  //  rect(0, 0, width, 30);
  //  rect(width, 0, -120, height);
  //  rect(0, height, width, -30);
}

void Landschaft() {

  for ( j = 0; j < anzahlSpY-1; j++) {
    beginShape(TRIANGLE_STRIP);
    for ( i = 0; i < anzahlSpX-1; i++) {
      if (isThere[i][j]) { 

        shift = (j % 2) == 0 ? (Hoehe/2)+3 : 0;
        x1=-Breite+i*Breite+shift;
        x2=-Breite+i*Breite+(Breite/2)+shift;
        y1=j*Hoehe;
        y2=j*Hoehe+Hoehe;

        vertex(x1, y1, Bewegung[i][j]);            
        vertex(x2, y2, Bewegung[i][j+1]);

        float theX = screenX(x1, y1, Bewegung[i][j]);
        float theY = screenY(x1, y1, Bewegung[i][j]);
        if ((mousePressed) &&
          dist(mouseX, mouseY, theX, theY)<28) {
          isThere[i][j]=false;
          isThere[i][j+1]=false;
        }
      }
    }
    endShape();
  }
}

//void mouseClicked() {
//  loop();
//  if (dist(mouseX, mouseY, 2*Breite, 4*Hoehe)<18) { // ERROR: cannot convert from float to boolean
//    Farbe=false;
//  }
//}

LiP

Thank you so much! I already have an other code without vertex and 3D. But stucking again.. I try to connect ellipses with lines. But in this code there are only lines in the left corner.

int i, j, shift;
int Breite=20;
int Hoehe=17;
int anzahlSpX=640/Breite;
int anzahlSpY=510/Hoehe; 
float W, X, Y, Z;
int anzahlSp = anzahlSpX*anzahlSpY;
float [][]x = new float[anzahlSpX][anzahlSpY];
float [][]y = new float[anzahlSpX][anzahlSpY];
void setup() {

  size(800, 570);
  background(0);
  stroke(255);
  strokeWeight(0.5);
   W=(i*Breite+shift)+random(-5,5);
      X=(j*Hoehe)+random(-5,5);
}

void draw() {
  noLoop();
  background(0);
  translate(40,30);
  for (i=0; i<anzahlSpX; i++) {
    for (j=0; j<anzahlSpY; j++) {
      shift= (j%2) == 0 ? (Hoehe/2)+3 : 0;
      W=(i*Breite+shift)+random(-5,5);
      X=(j*Hoehe)+random(-5,5);
      Y=y[j][0];
      Z=y[j][1];
      ellipse (W, X, 0.2, 0.2);
       if (dist(W, X, Y, Z)<2*Breite) {
        line(W, X, Y, Z);
      }
    }
  }
  for (i=0; i< anzahlSpX; i++) {
    for (j=0; j<anzahlSpY; j++) {
      W=x[i][0];
      X=x[i][1];
      Y=y[j][0];
      Z=y[j][1];
      if (dist(W, X, Y, Z)<2*Breite) {
        line(W, X, Y, Z);
      }
    }
  }
  //fill(0);
  //noStroke();
  //rect(0,0,40,height);
  //rect(0,0,width,30);
  //rect(width,0,-120,height);
  //rect(0,height,width,-30);
}

void mouseClicked(){
  loop();
}

And in this Code there is the grid missing:

int i, j, shift;
int Breite=20;
int Hoehe=17;
int w=640;
int h= 510;
int anzahlSpX=w/Breite;
int anzahlSpY=h/Hoehe; 
float W, X, Y, Z;
int anzahlSp = anzahlSpX*anzahlSpY;
float x[] = new float[anzahlSp];
float y[] = new float[anzahlSp];
void setup() {

  size(800, 570);
  background(0);
  stroke(255);
  strokeWeight(0.5);

}

void draw() {
  noLoop();
  background(0);
  translate(40,30);
   for (i=0; i<anzahlSpX; i++){
    for(j=0; j<anzahlSpY; j++){
      shift= (j%2) == 0 ? (Hoehe/2)+3 : 0;
       x[i]= (i*Breite+shift)+random(-2,2);
       y[i]= (j*Hoehe)+random(-2,5);
    }
  }
  for (i=0; i<anzahlSpX; i++) {
    for (j=0; j<anzahlSpY; j++) {
      shift= (j%2) == 0 ? (Hoehe/2)+3 : 0;
      W=map(noise(x[i]),0,1,0,w);
      X=map(noise(y[i]),0,1,0,h);
      Y=map(noise(x[j]),0,1,0,w);
      Z=map(noise(y[j]),0,1,0,h);
      ellipse (W, X, 0.2, 0.2);
       if (dist(W, X, Y, Z)<2*Breite) {
        line(W, X, Y, Z);
      }
    }
  }
}

void mouseClicked(){
  loop();
}

Could you please help me,`` again?

Chrisir

based on the first code of the last two codes you posted is this example.

Based on this first code I think you don't have a clue what's going on, eh?

int Breite=20;
int Hoehe=17;

int anzahlSpX=int(640.0/Breite);
int anzahlSpY=int(510.0/Hoehe); 

float [][]x = new float[anzahlSpX][anzahlSpY];
float [][]y = new float[anzahlSpX][anzahlSpY];
boolean [][] isThere = new boolean [anzahlSpX][anzahlSpY];

void setup() {

  size(800, 570);

  background(0);
  stroke(255);
  strokeWeight(0.5);

  int shift;

  // init
  for (int i=0; i<anzahlSpX; i++) {
    for (int j=0; j<anzahlSpY; j++) {

      shift= (j%2) == 0 ? (Hoehe/2)+3 : 0;

      x[i][j] = (i*Breite+shift)+random(-5, 5);
      y[i][j] = (j*Hoehe)+random(-5, 5);
      isThere[i][j] = true;
    }
  }
}//func 

void draw() {

  background(0);
  translate(40, 30);


  for (int i=0; i< anzahlSpX; i++) {
    for (int j=0; j<anzahlSpY; j++) {

      if (isThere[i][j]) { 

        stroke(255);
        if (j<anzahlSpY-1)
          line(  x[i][j], y[i][j], 
            x[i][j+1], y[i][j+1]); 

        if (i<anzahlSpX-1)
          line(  x[i][j], y[i][j], 
            x[i+1][j], y[i+1][j]); 

        if (i<anzahlSpX-1&&j<anzahlSpY-1)
          line(  x[i][j], y[i][j], 
            x[i+1][j+1], y[i+1][j+1]); 

        fill(255, 0, 0);
        noStroke();  
        ellipse (  x[i][j], y[i][j], 
          1.2, 1.2);

        if (mousePressed && 
          dist (mouseX, mouseY, x[i][j], y[i][j]) < 15 ) {
          isThere[i][j]=false;
        }//if (mousePressed &&.....
        //
      }//if(isThere........
    }//for
  }//for
}//func
//

Chrisir

I am not willing to look at your second code (of the two you posted last).

But please get rid of noLoop and loop.....

LiP

Thank you so much!

Chrisir

;-)