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

AKK

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?

GoToLoop

https://forum.Processing.org/two/discussions/tagged?Tag=setfill()
https://forum.Processing.org/two/discussions/tagged?Tag=setstroke()

AKK

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.

GoToLoop

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

AKK

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

kfrajer

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


}

AKK

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

AKK

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: GoToLoop and kfrajer, thanks for your advice!

koogs

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

AKK

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.