How to change the color of one triangle in a PShape? (TRIANGLES, TRIANGLE_FAN, TRIANGLE_STRIP...)

AKKAKK
edited November 2016 in How To...

In processing there is this cool tool called PShape that if you don't know about, you should learn, it is extremly powerful when it comes to complicated graphics (3d graphics in my case), and makes even unthinkable concepts managable. But I ran into a problem with it, processing provides a variaty of cool built-in shapes you can use, in my case things like triangle fans, triangle strips, and just a bunch of triangles, but they lack some functionality I wish it had, changing single triangle colors. When you use a GROUP shape it can have many children shapes which consist of it, and the best part is you still can use each child as an individual shape, and you would think triangle strips and fans should be the same, it is a big shape made from many little triangles, so I should be able to control each triangle individually, and to some level it is, you can get how many vertices make the shape, and even move them, but when it comes to color you can control only the color of the entire shape, and not each triangle by itself. Is there any way around this? Can I somehow change the color of a single triangle without the rest in a built-in shape?

Answers

  • GoToLoop thanks but setFill() and setStroke() are the problem, they change all of the triangles as a collective in built-in shapes while I need individual triangles.

  • Answer ✓

    Maybe make clones of your PShape, so each 1 can have its own color attribs.? :-?

  • Well, I was trying to avoid making my own shapes and just use the built-in shapes (assuming it would have better prformance), but I have considered it, and if there is no way around this problem I will probebly just do it...

  • Answer ✓

    Would this do the trick?

    https://processing.org/reference/vertex_.html

    Kf

    PImage img;
    PShape pyramid, side1, side2, side3, side4, base;
    
    import peasy.*;
    PeasyCam cam;
    
    void setup()
    {
      size(940, 540, P3D);
      //colorMode(HSB);
      background(0);
      textureMode(NORMAL);
      //textureMode(IMAGE);
      img = loadImage("fig2.jpg");
      imageMode(CENTER);
    
      pyramid = createShape(GROUP);
    
      side1 = createShape();
      side1.beginShape();  
      side1.texture(img);
      side1.vertex(-100, -100, -100,0,1);
      side1.vertex( 100, -100, -100,1,1);
      side1.vertex(   0, 0, 100,1,0);
      side1.endShape();
    
      side2 = createShape();  
      side2.beginShape();
      side2.fill(color(255,0,0));
      //side2.texture(img);
      side2.vertex( 100, -100, -100);
      side2.vertex( 100, 100, -100);
      side2.vertex(   0, 0, 100);
      side2.endShape();
    
      side3 = createShape();  
      side3.beginShape();
      //side3.texture(img);
      side3.fill(color(250,140,0));
      side3.vertex( 100, 100, -100);
      side3.vertex(-100, 100, -100);
      side3.vertex(   0, 0, 100);
      side3.endShape();
      side4 = createShape();
    
      side4.beginShape();
      side4.texture(img);
      side4.vertex(-100, 100, -100,0,0);
      side4.vertex(-100, -100, -100,0,1);
      side4.vertex(   0, 0, 100,1,0);
      side4.endShape();
    
      int sideLen=100;
      base = createShape();
    
      //base.fill(color(255,0,0));
      base.beginShape(); 
      base.texture(img);
      base.vertex(-sideLen, -sideLen, sideLen,0, 0);
      base.vertex( sideLen, -sideLen, sideLen, 1, 0);
      base.vertex( sideLen, sideLen, sideLen, 1, 1);
      base.vertex(-sideLen, sideLen, sideLen, 0, 1);
      base.endShape();
      //base.setTexture(img);
    
      pyramid.addChild(side1);
      pyramid.addChild(side2);
      pyramid.addChild(side3);
      pyramid.addChild(side4);
      pyramid.addChild(base);
    
      cam = new PeasyCam(this, 100);
      cam.setMinimumDistance(50);
      cam.setMaximumDistance(500);
    }
    
    void draw()
    { 
      background(0);
      noStroke();
      lights();
    
      shape(pyramid);
    
    
    }
    
  • kfrajer great example, but as I said to GoToLoop, I was trying to avoid creating my own shapes for triangle fans strips and lists (which I rely on with my project), since I am afraid it will impact my preformance, but I am getting a vibe that eventually this is what I will have to do... thanks anyway...:)

  • Well eventually I gave up on the built-in shapes and managed single triangles individualy from the start, it was a bit of work and I am not really sure what preformance I would have got otherwise but for my purposes it is good enough. And by the way if you were wanderring what I was making it was a spherical screen in which every triangle is a pixel, all of the pixels are about the same shape and size and evenly distributed, and this is how it looks: SphereScreenRainbow_res120 GoToLoop and kfrajer, thanks for your advice!

  • did you use children in the end?

    if you use TRIANGLES then you can happily use different fills for each triangle

    PShape shape;
    
    void setup() {
      size(400, 400, P3D);
    
      shape = createShape();
      shape.beginShape(TRIANGLES);
    
      shape.fill(255, 0, 0);
      shape.vertex(100, 100, 0);
      shape.vertex(150, 180, 0);
      shape.vertex(200, 100, 0);
    
      shape.fill(0, 255, 0);
      shape.vertex(150, 180, 0);
      shape.vertex(200, 100, 0);
      shape.vertex(250, 180, 0);
    
      shape.fill(0, 0, 255);
      shape.vertex(200, 100, 0);
      shape.vertex(250, 180, 0);
      shape.vertex(300, 100, 0);
    
      shape.endShape();
      noLoop();
    }
    
    void draw() {
      background(255);
      shape(shape);
    }
    

    you can also do per-vertex colours

    // per vertex stroke
    shape.stroke(0, 0, 255);
    shape.vertex(200, 100, 0);
    shape.stroke(0, 255, 0);
    shape.vertex(250, 180, 0);
    shape.stroke(255, 0, 0);
    shape.vertex(300, 100, 0);
    
      // per vertex fill
      shape.fill(0, 0, 255);
      shape.vertex(200, 100, 0);
      shape.fill(0, 255, 0);
      shape.vertex(250, 180, 0);
      shape.fill(255, 0, 0);
      shape.vertex(300, 100, 0);
    
  • Yes koogs, I have used children, but your suggestion isn't the right thing for this project, I want to be able to animate the triangles changing colors as efficiently possible, and as far as my understanding the best way of doing so in processing is to create a pshape with all of the triangles of the sphere and changing each color of each triangle without changing the shape, that way processing can do its magic and draw the shape on the screen faster.

Sign In or Register to comment.