#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Triangle grid moving

edited March 14

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

`

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. :)

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 10 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 11 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 11 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];

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

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
//
``````

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!

• ;-)