Triangle grid moving

LiPLiP
edited March 2018 in Questions about Code

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

`

Answers

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

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

  • Answer ✓

    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())

  • edited March 2018 Answer ✓

    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.

  • 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;
          }
        }
    
  • edited March 2018 Answer ✓

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

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

  • edited March 2018 Answer ✓

    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)

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

  • look at reference boolean please

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

  • Answer ✓

    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;
    //  }
    //}
    
  • 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?

  • Answer ✓

    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
    //
    
  • Answer ✓

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

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

  • Thank you so much!

Sign In or Register to comment.