fill shapes with generative patterns

Programming Questions

robertofa..

fill shapes with generative patterns

in Programming Questions • 1 year ago

Hello
I'm wondering if is there a way to fill a shapes like triangles with a simple for cycle like this. In my project I would like to fill some triangles with differents pattern like points, lines,etc...

beginShape(TRIANGLES);
vertex(30, 75);
vertex(40, 20);
vertex(50, 75);
for (int i = 0; i < width; i = i+5) {
for (int j = 0; j < height; j = j+5) {
point(i, j);
}
}
endShape();

Where widht and height would be the range inside the vertex.
I suppose this is no the way but I cannot find the right solution.
I don't want to fill with images like png or jpg because it's heavy for my project, I have a lot of triangles inside an arrayList so could be not useful ... I prefer to generate the patterns.

Thanks for your support
Roberto

Replies(4)

eltodesuk..

Re: fill shapes with generative patterns

1 year ago

You have to check for each point i,j if it is inside the shape.

If the shape is a triangle, the point has to be on the correct side of the 3 lines forming the triangles.

ref: http://www.blackpawn.com/texts/pointinpoly/default.html

For triangles only, this would do: (If the shape is more complex, then it's more complex...)

void setup() {
drawT(30,75, 40,20, 50,55);
drawT(10,15, 30,15, 20,35);
noLoop();
}
void draw() {
}
void drawT(int x1,int y1,int x2,int y2,int x3,int y3) {
beginShape(TRIANGLES);
PVector a, b, c, p;
a = new PVector(x1,y1);
b = new PVector(x2,y2);
c = new PVector(x3,y3);
vertex(a.x, a.y);
vertex(b.x, b.y);
vertex(c.x, c.y);
for (int i = 0; i < width; i = i+5) {
    for (int j = 0; j < height; j = j+5) {
      p = new PVector(i, j);
      if (PointInTriangle(p, a, b, c)) point(i, j);
    }
}
endShape();
}
PVector CrossProduct(PVector p1, PVector p2) {
return p1.cross(p2);
}
float DotProduct(PVector p1, PVector p2) {
return p1.dot(p2);
}
//are p1, p2 on same side of a,b?
boolean SameSide(PVector p1, PVector p2, PVector a, PVector b) {
//http://www.blackpawn.com/texts/pointinpoly/default.html
PVector cp1=CrossProduct(PVector.sub(b,a), PVector.sub(p1,a));
PVector cp2=CrossProduct(PVector.sub(b,a), PVector.sub(p2,a));
return (DotProduct(cp1, cp2)>=0);
}
//is p in triangle(a,b,c)?
boolean PointInTriangle(PVector p, PVector a, PVector b, PVector c) {
//http://www.blackpawn.com/texts/pointinpoly/default.html
return (SameSide(p, a, b, c) & SameSide(p, b, a, c) & SameSide(p, c, a, b));
}

eltodesuk..

Re: fill shapes with generative patterns

1 year ago

a small variation:

void setup() {
drawT(20,95, 50,20, 90,55, 3,6);
drawT(10,5, 40,10, 30,45, 3,2);
noLoop();
}
void draw() {
}
void drawT(int x1,int y1,int x2,int y2,int x3,int y3, int ii, int jj) {
beginShape(TRIANGLES);
PVector a, b, c, p;
a = new PVector(x1,y1);
b = new PVector(x2,y2);
c = new PVector(x3,y3);
vertex(a.x, a.y);
vertex(b.x, b.y);
vertex(c.x, c.y);
for (int i = 0; i < width; i = i+ii) {
    for (int j = 0; j < height; j = j+jj) {
      p = new PVector(i, j);
      if (PointInTriangle(p, a, b, c)) point(i, j);
    }
}
endShape();
}
PVector CrossProduct(PVector p1, PVector p2) {
return p1.cross(p2);
}
float DotProduct(PVector p1, PVector p2) {
return p1.dot(p2);
}
//are p1, p2 on same side of a,b?
boolean SameSide(PVector p1, PVector p2, PVector a, PVector b) {
//http://www.blackpawn.com/texts/pointinpoly/default.html
PVector cp1=CrossProduct(PVector.sub(b,a), PVector.sub(p1,a));
PVector cp2=CrossProduct(PVector.sub(b,a), PVector.sub(p2,a));
return (DotProduct(cp1, cp2)>=0);
}
//is p in triangle(a,b,c)?
boolean PointInTriangle(PVector p, PVector a, PVector b, PVector c) {
//http://www.blackpawn.com/texts/pointinpoly/default.html
return (SameSide(p, a, b, c) & SameSide(p, b, a, c) & SameSide(p, c, a, b));
}

robertofa..

Re: fill shapes with generative patterns

1 year ago

Thanks eltodesukane,
this is exactly that I was looking for.. thanks for the reference too, I will take a look

this is the first step of my little installation.
Is an interactive installation based on the analysis of climatic conditions from 6 cities of the world. User can change the informations by using the hash tag twitter and Yahoo API. We have just started... but I'm glad to share this first step with you...
I have to add your class , maybe PatternPoint , PatternLine, etc.. follow your useful code and change approach with PVector for each points

when I add a new triangle I would like to randomize the pattern class , lines, points ....

trgs.add(new Triangoli(120, 100, 100, 50, 400, 0, c));

I'll let you know how it's going

Thanks you for your support

import controlP5.*;
boolean Pointer = true;
int AddTriangles = 0;

Triangoli primoTriang;
// Vertici croci;
ControlP5 controlP5;

color[] palette = { color(200, 102, 142), color(176, 176, 176), color(230, 230, 30), color(192, 227, 232), color(255, 255, 255),color(35, 60, 67), color(0, 170, 212), color(50, 232, 23), color(252, 134, 23)};

ArrayList trgs;
void setup() {

    size(1024, 768);

    controlP5 = new ControlP5(this);
    controlP5.addToggle("Pointer",true,20,40,20,20).setId(6);;
    controlP5.addButton("AddTriangles",1,20,80,100,20).setId(7);

    int randomcol = int (random(0, palette.length - 1));
    color c = palette[randomcol];

    trgs = new ArrayList();

}
void draw() {

    background(0);
    frameRate(60); // println(frameRate);
    smooth();
    fill(255);
    text("FPS",20,20);
    fill(255);
    text(frameRate,40,20);
    fill(255);
    text(int(frameRate),20,60);

     for ( int i = trgs.size()-1; i >= 0; i--) { // println("Triangolo aggiunto: "+i);
      Triangoli objTrg = (Triangoli) trgs.get(i);

      objTrg.update();
      objTrg.display();

    if(Pointer == true) {
    objTrg.showV();
    }
    else { objTrg.hideV(); }

}

}
// aggiungo un triangolo, prendo il valore theValue = 1 che è il primo valore di controlP5.addButton("AddTriangles",1,20,240,100,20).setId(7);
public void AddTriangles(int theValue) {

     int randomcol = int (random(0, palette.length - 1));
     color c = palette[randomcol];
     // un nuovo oggetto trgs è aggiunto all'arrayList ( di default dalla fine)
     trgs.add(new Triangoli(120, 100, 100, 50, 400, 0, c));


}

public void controlEvent(ControlEvent theEvent) {

      println(theEvent.controller().name());
      println("Controller id "+theEvent.controller().id());
      switch(theEvent.controller().id()) {
      case(5):
      println(theEvent.controller().stringValue());
      break;

    }
}

This is class Triangoli

Vertici v;

class Triangoli {

float vx, vy;
float v2x, v2y;
float v3x, v3y;
boolean v_visible;
public float r, g , b , a;
float xpos, ypos;
float xspeed, yspeed;

// dichiaro la posizione dei 3 vertici, variabili pubbliche
Triangoli( float temp_vx, float temp_vy, float temp_v2x, float temp_v2y, float temp_v3x, float temp_v3y, color temp_c ) {
      vx = temp_vx;
      vy = temp_vy;
      v2x = temp_v2x;
      v2y = temp_v2y;
      v3x = temp_v3x;
      v3y = temp_v3y;

      r = red(temp_c);
      g = green(temp_c);
      b = blue(temp_c);
      a = 125;

      v = new Vertici(vx, vy ,v2x, v2y, v3x, v3y);
      v_visible = true;
}

void update() {

       vx = vx + 1;
       vy = vy + 0.1;
       v2x = v2x + 0.1;
       v2y = v2y + 1;
       v3y = v3y + 2;
       r = r; g = g; b = b; a = a;

       v.update(vx, vy, v2x, v2y, v3x, v3y);

}

void display() {
      //disegno il triangolo test


      beginShape(TRIANGLES);
      noStroke();
      fill(r,g,b,a);
      vertex(vx, vy);
      vertex(v2x, v2y);
      vertex(v3x, v3y);
      endShape();

      if(v_visible) {
        v.display();
      }




}

void showV() {

v_visible = true;

}

void hideV() {

v_visible = false;

}

// Per prelevare le variabili che non sono pubbliche .. setter e resetter retrurn
float getvx() { return vx; }
float getvy() { return vy; }
float getv2x() { return v2x; }
float getv2y() { return v2y; }
float getv3x() { return v3x; }
float getv3y() { return v3y; }

void coloreRandom() {

}

void patternLineeOrz() {

}

void patternLineeVert() {

}

void patternPuntini() {

}

void patternCrocette() {

}

void patternQuadratini() {

}

// ultima parentesi :)
}

the update method will be connect to a special grid which rappresent our world for the data viz, now the movement of triangles it's just a test..

This is the class Vertici

class Vertici {

// definisce la dimensione del crocino
float crdim = 10;

// definisce il colore del crocino
color r = 0;
color g = 100;
color b = 255;
// canale alpha per disabilitare i crocini 0 = off 255 = on
color a = 255;
float vx, vy ,v2x, v2y, v3x, v3y;
boolean crvis;

Vertici(float x, float y, float x2, float y2, float x3, float y3 ) {

   vx = x;
   vy = y;
   v2x = x2;
   v2y = y2;
   v3x = x3;
   v3y = y3;
}

void update(float x, float y, float x2, float y2, float x3, float y3 ){
     vx = x;
     vy = y;
     v2x = x2;
     v2y = y2;
     v3x = x3;
    v3y = y3;
      r = r;
      g = g;
      b = b;
      a = a ;

}

void display() {

      fill(30);
      stroke(r,g,b,a);
      // disegno il crocino prendendo le coordinate veritice
      line(vx + crdim, vy, vx - crdim, vy);
      line(vx, vy - crdim, vx, vy + crdim);
      line(v2x + crdim, v2y, v2x - crdim, v2y);
      line(v2x, v2y - crdim, v2x, v2y + crdim);
      line(v3x + crdim, v3y, v3x - crdim, v3y);
      line(v3x, v3y - crdim, v3x, v3y + crdim);


}

}

sorry for the dirty code... and no comment :P

www.robertofazio.com

eltodesuk..

Re: Re: fill shapes with generative patterns

1 year ago

As you say in your message, my code is quite slow.

It's doing a lot of computations just to find if one dot is inside the triangle.

And there are many dots to check, and probably many triangles.

All this adds up.

There are probably ways to improve this code.

-----------------------------------

for (int i = 0; i < width; i = i+ii) {
for (int j = 0; j < height; j = j+jj) {
p = new PVector(i, j);
if (PointInTriangle(p, a, b, c)) point(i, j);
}
}

-----------------------------------

the preceding code tests all i,j from 0 to width height.

we could precompute the min max x y of the triangle

and only loop for those i j (like putting the triangle in a square box)

min x would be min(ax,bx,cx), etc

so triangle 30,75, 40,20, 50,55

has min max x 30 50 so i=30..50 instead of 0..width

and min max y 20 75 so j=20..75 instead of 0..height

There may also be other better ways to solve such problem.

Could the pattern inside the triangle be part of the Shape?

This way it would have to be calculated only once.

>>> replace those lines in the middle of drawT() in your last code,

(but it's probably not enough to help the frame rate)

int imin=(int)min(a.x,min(b.x,c.x));
int imax=(int)max(a.x,max(b.x,c.x));
int jmin=(int)min(a.y,min(b.y,c.y));
int jmax=(int)max(a.y,max(b.y,c.y));
for (int i = imin; i<=imax; i = i+ii) {
for (int j = jmin; j<=jmax; j = j+jj) {

Top Reply