# MysteryShape with PShape

**URL:** <https://discourse.processing.org/t/mysteryshape-with-pshape/45612>\
**Category:** Gallery\
**Created:** [January 16, 2025, 4:58pm UTC](https://discourse.processing.org/t/mysteryshape-with-pshape/45612 "2025-01-16T16:58:55Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 16, 2025, 4:58pm UTC](https://discourse.processing.org/t/mysteryshape-with-pshape/45612/1 "2025-01-16T16:58:55Z")

</div>

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:

```Processing
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/b/f/bf897bc2d8a681f27b0e1177ba0fbd17d7eccba9.png)

**Another example:**

```Processing
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/9/c9ddbcc7a461154022ef6516f752a254dde569c3.jpeg)

**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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/e/8/e8cbd376ae63bc9212330735afc20762db03acdf.png)  
 ![springy](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/6/f/6f6f6f9b99a4c713dcd6f9ba37a760fa30595840.jpeg)  
 ![wreath](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/8/88c8acd613ffd2ee298cee3c1b702d6cb6b3f069.png)  
 ![weave](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/2/720a27b66afd7d14b4a775c456ac9944e4f858e1.png)  
 ![twisted](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/e/7e38643cec60fff51849ea8d1328d5783d669fff.png)

**Torus Output with** @Chrisir **solution:**

 ![soln](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/5/7/575aae6cf44a64ac8212caa1ed1c77906d20c95c.png)

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [January 17, 2025, 7:31pm UTC](https://discourse.processing.org/t/mysteryshape-with-pshape/45612/2 "2025-01-17T19:31:07Z")

</div>

😉

```Processing

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

```

😉

```Processing

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

```Processing

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

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [January 17, 2025, 9:03pm UTC](https://discourse.processing.org/t/mysteryshape-with-pshape/45612/3 "2025-01-17T21:03:57Z")

</div>

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 rotateZ fixed it and I greatly appreciate your time and efforts.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 5, 2025, 10:03am UTC](https://discourse.processing.org/t/mysteryshape-with-pshape/45612/4 "2025-02-05T10:03:55Z")

</div>

> [@svan](#):
>
> pushing…popping the PShape with rotateZ fixed it and I greatly appreciate your time and efforts.

execuse me, can you post your code please?

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [February 5, 2025, 1:46pm UTC](https://discourse.processing.org/t/mysteryshape-with-pshape/45612/5 "2025-02-05T13:46:10Z")

</div>

Here is the code that I used to create a torus:

```processing
PShape ring;

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.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 <= 355; ang +=5.0) {
    rad = radians(ang);
    cntrX = r * cos(rad);
    cntrY = r * sin(rad);
    pushMatrix();
    translate(cntrX, cntrY);
    rotateZ(rad);
    shape(ring);
    popMatrix();
  }
}

void setup() {
  size(600, 600, P3D);
  surface.setTitle("Use mouse to rotate.");
  background(255);
  drawRing(80, 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(120);
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 6, 2025, 12:22pm UTC](https://discourse.processing.org/t/mysteryshape-with-pshape/45612/6 "2025-02-06T12:22:30Z")

</div>

Wonderful!

Thank you so much!