Changing Stroke and Fill of a PShape in realtime

[animalfrommars]

Hello,
Could any one explain me how to change the Stroke and the Fill of a PShape in realtime ? See the code below.
Thank you very much for your help.

PShape D;

void setup() {
  size(400, 400, P3D);
  D = createShape();
  D.beginShape();
  D.fill(0, 255, 0);
  D.stroke(0);
  D.vertex(10, 20, 0);//! sens de création des carrés !
  D.vertex(200, 10, 0);
  D.vertex(200, 400, 0);
  D.vertex(10, 400, 0);
  D.endShape(CLOSE);
}

void draw() {
  background(120);
  changeStroke(color(random(255), 0, 0));
  changeCouleur(color(0, random(255), 0));
  changePosition(8);
  shape(D);
}

void changeCouleur(color uneCouleur) {
  D.setFill(color(uneCouleur));
}

void changeStroke(color uneStroke) {
  D.setStroke(color(uneStroke));
}

void changePosition(int uneValeur) {
  for (int i = 0; i <D.getVertexCount(); i++) {//< ou <=
    PVector v = D.getVertex(i);
    v.x += random(-1, 1);
    v.y += random(-1, 1);
    v.z += random(-1, 1);
    D.setVertex(i, v);
  }
}

[animalfrommars]

As you can see by trying my code… the Fill and the Stroke don’t change…

[glv]

Hello @animalfrommars,

It works as expected with Processing 3.5.4 and the fill() and stroke() are changing. There is a nice illusion of the background changing.

It does not work as expected with Processing 4.1.3.

Your code with minor changes (color transition instead of random):

PShape D;

void setup() {
  size(400, 400, P3D);
  D = createShape();
  D.beginShape();
  D.fill(0, 255, 0);
  D.stroke(0);
  D.strokeWeight(5);
  D.vertex(10, 20, 0);//! sens de création des carrés !
  D.vertex(200, 10, 0);
  D.vertex(200, 400, 0);
  D.vertex(10, 400, 0);
  D.endShape(CLOSE);
}

void draw() {
  background(120);
  int c1 = frameCount%256;
  changeStroke(color(c1, 0, 0));
  changeCouleur(color(0, c1, 0));
  changePosition();
  shape(D);
}

void changeCouleur(color uneCouleur) {
  D.setFill(color(uneCouleur));
}

void changeStroke(color uneStroke) {
  D.setStroke(color(uneStroke));
}

void changePosition() {
  for (int i = 0; i <D.getVertexCount(); i++) {//< ou <=
    PVector v = D.getVertex(i);
    v.x += random(-1, 1);
    v.y += random(-1, 1);
    v.z += random(-1, 1);
    D.setVertex(i, v);
  }
}

Processing 3.5.4:

Processing 4.1.3:

Related issue:

OpenGL PShape stroke problem when updating vertices

A simple workaround is to create your shape each frame in draw().
Performance may be an issue for more complex shapes.

References:

beginShape() / Reference

:)

[svan]

Change it to a class if you want to change multiple parameters at one time:

PVector[] v = new PVector[4];
  
color GREEN = color(0, 255, 0);
color RED = color(255, 0, 0);
color BLACK = color(0, 0, 0);

class MyShape {
  color shapeColor;
  color strokeColor;
  PVector[] v;

  //Constructor
  MyShape(color inColor, color inStroke, PVector[] vectorArray) {
    shapeColor = inColor;
    strokeColor = inStroke;
    v = vectorArray;
  }

  void display() {
    fill(shapeColor);
    stroke(strokeColor);
    beginShape();
    for (int i = 0; i < 4; i++) {
      vertex(v[i].x, v[i].y, v[i].z);
    }
    endShape(CLOSE);
  }
}
MyShape myShape;

void setup() {
  size(400, 450, P3D);
  v[0] = new PVector(10, 20, 0);
  v[1] = new PVector(200, 10, 0);
  v[2] = new PVector(200, 400, 0);
  v[3] = new PVector(10, 400, 0);
  myShape = new MyShape(GREEN, BLACK, v);
  frameRate(10); // Slow it down from default 60
}

void draw() {
  background(120);
  for (int i = 0; i < 4; i++) {
    v[i].x += random(-1, 1);
    v[i].y += random(-1, 1);
    v[i].z += random(-1, 1);
  }
  myShape.shapeColor = color(0, random(255), 0);
  myShape.strokeColor = color(random(255), 0, 0);
  myShape.display();
}

[animalfrommars]

Hello,

Thank you all for your advice and help.
I’ve tried it with a class and it works… i will try the second proposition soon.
I’was wondering if it will work also with the getVertextCount() method wich can be a way to store the index of each vertex ?

Anyway here is my new code, it works good, thanks.

import peasy.PeasyCam;
PeasyCam cam;

MyShape myShape, myShape2, myShape3;

int nbObjets = 200;//2
int nbVectors = nbObjets*4;
PVector[] v = new PVector[nbVectors];

MyShape [] tabMyShape = new MyShape[nbObjets];

color GREEN = color(0, 255, 0);
color RED = color(255, 0, 0);
color BLACK = color(0, 0, 0);

void setup() {
  size(800, 800, P3D);
  cam = new PeasyCam(this, 400);
  for (int i=0; i<nbVectors; i++) {
    v[i] = new PVector(int(random(width)), int(random(height)), int(random(-1000, 1000)));
  }
  for (int i=0; i<nbObjets; i++) {
    tabMyShape[i] = new MyShape(GREEN, BLACK, v, i+1);
  }
  //frameRate(20);
}

void draw() {
  background(120);
  for (int i = 0; i < nbVectors; i++) {
    v[i].x += random(-10, 10);
    v[i].y += random(-10, 10);
    v[i].z += random(-10, 10);
  }
  for (int i=0; i<nbObjets; i++) {
    tabMyShape[i].shapeColor = color(random(255), random(255));
    tabMyShape[i].strokeColor = color(random(255));
    tabMyShape[i].display();
  }
}

class MyShape {
  color shapeColor;
  color strokeColor;
  int index;
  //Constructor
  MyShape(color inColor, color inStroke, PVector[] vectorArray, int unIndex) {
    shapeColor = inColor;
    strokeColor = inStroke;
    v = vectorArray;
    index = unIndex;
  }

  void display() {
    strokeWeight(int(random(5)));
    fill(shapeColor);
    stroke(strokeColor);
    beginShape();
    for(int i=0; i<4; i++){//nbObjets
      vertex(v[i+(4*(index-1))].x, v[i+(4*(index-1))].y, v[i+(4*(index-1))].z);
    }
    endShape(CLOSE);
  }
}

[animalfrommars]

You are true, i’ve tried Processing 3.5.4 and 4.1.3 and seen the same things… thanks for the informations.