MysteryShape with PShape

Gallery
1

The following source code was an attempt at creating a torus by drawing the center band of a cylinder repetitvely to create a torus; instead what I got is shown below and I’m not sure whether it has a name or not:

PShape ring;

void drawRing(float radius, float ht, int sides) {
  float angle = 0;
  float angleIncrement = TWO_PI / sides;
  ring.beginShape(TRIANGLE_STRIP);
  for (int i = 0; i <= sides; ++i) {
    ring.vertex(radius*cos(angle), 0, radius*sin(angle));
    ring.vertex(radius*cos(angle), ht, radius*sin(angle));
    angle += angleIncrement;
  }
  ring.endShape();
  ring.setStrokeWeight(2.0);
  for (int i = 0; i < ring.getVertexCount(); i++) {
    ring.setFill(i, color(random(255), random(255), random(255)));
  }
}

void drawCircleWithRings(float r) {
  float cntrX, cntrY;
  float rad;
  for (float ang = 0; ang <= 360; ang +=5) {
    rad = radians(ang);
    cntrX  = r * cos(rad);
    cntrY = r * sin(rad);
    shape(ring, cntrX, cntrY);
  }
}

void setup() {
  size(600, 600, P3D);
  background(255);
  strokeWeight(1);
  ring = createShape();
  drawRing(100, 20, 48);
}

void draw() { 
  background(255);
  translate(width/2, height/2);
  rotateX(map(mouseY, 0, height, PI, -PI));
  rotateY(map(mouseX, 0, width, -PI, PI));
  drawCircleWithRings(100);
}

Output:

whatisit
whatisit1012×812 187 KB

Another example:

PShape ring;
float theta = 0.5;

void drawRing(float radius, float ht, int sides) {
  float angle = 0;
  float angleIncrement = TWO_PI / sides;
  ring = createShape();
  ring.beginShape(TRIANGLE_STRIP);
  for (int i = 0; i <= sides; ++i) {
    ring.vertex(radius*cos(angle), 0, radius*sin(angle));
    ring.vertex(radius*cos(angle), ht, radius*sin(angle));
    angle += angleIncrement;
  }
  ring.endShape();
  ring.setStroke(false);
  for (int i = 0; i < ring.getVertexCount(); i++) {
    ring.setFill(i, color(random(255), random(255), random(255)));
  }
}

void setup() {
  size(600, 600, P3D);
  drawRing(100, 20, 24);
}

void draw() {
  background(209);
  translate(width/2, height/2);
  rotateX(map(mouseY, 0, height, PI, -PI));
  rotateY(map(mouseX, 0, width, -PI, PI));
  scale(2);
  for (float ang = 0; ang <= 355; ang +=5.0) {
    rotateX(theta);
    rotateY(theta);
    shape(ring);
  }
}

void mousePressed() {
  for (int i = 0; i < ring.getVertexCount(); i++) {
    ring.beginTessellation();
    ring.setFill(i, color(random(255), random(255), random(255)));
    ring.endTessellation();
  }
}

Output:

artsy2
artsy21076×1062 284 KB

Addendum:
My hat is off to the contributors who made it possible for us to use openGL in Processing to create all of this art. This technique is like an art incubator. Below is a series of images that I created in a very short period of time:

cornucopia
cornucopia1290×1190 340 KB

springy
springy1550×1584 404 KB

wreath
wreath1310×1240 355 KB

weave
weave1062×976 208 KB

twisted
twisted968×860 224 KB

Torus Output with @Chrisir solution:

soln
soln1098×1082 255 KB

6 Likes
2

:wink:


PShape ring;

void drawRing(float radius, float ht, int sides) {
  float angle = 0;
  float angleIncrement = TWO_PI / sides;
  ring.beginShape(TRIANGLE_STRIP);
  for (int i = 0; i <= sides; ++i) {
    ring.vertex(radius*cos(angle), 0, radius*sin(angle));
    ring.vertex(radius*cos(angle), ht, radius*sin(angle));
    angle += angleIncrement;
  }
  ring.endShape();
  ring.setStrokeWeight(2.0);
  for (int i = 0; i < ring.getVertexCount(); i++) {
    ring.setFill(i, color(random(255), random(255), random(255)));
  }
}

void drawCircleWithRings(float r) {
  float cntrX, cntrY;
  float rad;
  for (float ang = 0; ang <= 360; ang +=5) {
    rad = radians(ang);
    cntrX  = r * cos(rad);
    cntrY = r * sin(rad);
    pushMatrix();
    rotateY(-rad);
    shape(ring, cntrX, cntrY);
    popMatrix();
  }
}

void setup() {
  size(600, 600, P3D);
  background(255);
  strokeWeight(1);
  ring = createShape();
  drawRing(100, 20, 48);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  rotateX(map(mouseY, 0, height, PI, -PI));
  rotateY(map(mouseX, 0, width, -PI, PI));
  drawCircleWithRings(200);
}

:wink:


PShape ring;

void drawRing(float radius, float ht, int sides) {
  float angle = 0;
  float angleIncrement = TWO_PI / sides;
  ring.beginShape(TRIANGLE_STRIP);
  for (int i = 0; i <= sides; ++i) {
    ring.vertex(radius*cos(angle), 0, radius*sin(angle));
    ring.vertex(radius*cos(angle), ht, radius*sin(angle));
    angle += angleIncrement;
  }
  ring.endShape();
  ring.setStrokeWeight(2.0);
  for (int i = 0; i < ring.getVertexCount(); i++) {
    ring.setFill(i, color(random(255), random(255), random(255)));
  }
}

void drawCircleWithRings(float r) {
  float cntrX, cntrY;
  float rad;
  for (float ang = 0; ang <= 360; ang +=5) {
    rad = radians(ang);
    cntrX  = r * cos(rad);
    cntrY = r * sin(rad);

    pushMatrix();
    translate(cntrX, cntrY);
    rotateX(rad);
    shape(ring, 0, 0);
    popMatrix();
  }
}

void setup() {
  size(600, 600, P3D);
  background(255);
  strokeWeight(1);
  ring = createShape();
  drawRing(100, 20, 48);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  rotateX(map(mouseY, 0, height, PI, -PI));
  rotateY(map(mouseX, 0, width, -PI, PI));
  drawCircleWithRings(200);
}

You can work with rotateZ to bring the circles into the right angle


PShape ring;

void drawRing(float radius, float ht, int sides) {
  float angle = 0;
  float angleIncrement = TWO_PI / sides;
  ring.beginShape(TRIANGLE_STRIP);
  for (int i = 0; i <= sides; ++i) {
    ring.vertex(radius*cos(angle), 0, radius*sin(angle));
    ring.vertex(radius*cos(angle), ht, radius*sin(angle));
    angle += angleIncrement;
  }
  ring.endShape();
  ring.setStrokeWeight(2.0);
  for (int i = 0; i < ring.getVertexCount(); i++) {
    ring.setFill(i, color(random(255), random(255), random(255)));
  }
}

void drawCircleWithRings(float r) {
  float cntrX, cntrY;
  float rad;
  for (float ang = 0; ang <= 360; ang +=5) {
    rad = radians(ang);
    cntrX  = r * cos(rad);
    cntrY = r * sin(rad);

    pushMatrix();
    translate(cntrX, cntrY);
    rotateZ(rad);
    shape(ring, 0, 0);
    popMatrix();
  }
}

void setup() {
  size(600, 600, P3D);
  background(255);
  strokeWeight(1);
  ring = createShape();
  drawRing(100, 20, 48);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  rotateX(map(mouseY, 0, height, PI, -PI));
  rotateY(map(mouseX, 0, width, -PI, PI));
  drawCircleWithRings(200);
}

I think in drawRing you want to have a nested for loop to drag the ring all around the torus / donut

Warm regards,

Chrisir

2 Likes
3

Chrisir,

Thank you for your contributions of two more artistic creations and a solution to the problem that I was having creating a torus. I was unable to get the PShape rotated correctly and was just stacking them on top of one another. Pushing…popping the PShape with rotateY fixed it and I greatly appreciate your time and efforts.

2 Likes