Transformations issues

Processing Coding Questions
1

Hi there! I’ve been trying to code a torus and, while I have found valid examples, I still don’t understand why my code does not work. I’m sure it’s related to transformations and must’ve misunderstood something about them but after reading the reference and seeking up examples I’ve made no progress :confused:
I tried to position the vertices through transformations in a function but it appears as if they were not read and all the vertices ended up one on top of another.

Any help or suggestions are welcome!
Thanks!!

import peasy.*;

float r1, r2;
PeasyCam cam;

void setup() {
  size(900, 900, P3D);
  cam = new PeasyCam(this, 500);
}

void draw() {
  background(57);
  r1 = 200;
  r2 = 100;
  rotateY(frameCount*PI/370);
  rosquilla(r1, r2);
   
}



void rosquilla(float r1, float r2) {
  float sides = 20;
  float inc1 = TWO_PI/sides;
  float sides2 = 8;
  float inc2 = TWO_PI/sides2;
  
  beginShape(QUAD_STRIP);
  //noFill();
  stroke(255, 175, 100);
  pushMatrix();
  
  for  (int i = 0; i < sides; i++) {  // ihave some sort of problem with transformations
    pushMatrix();
    rotateY(inc1 * i);
    translate(r1, 0, 0);
    
    for (int j = 0; j < sides2; j++) {
      vertex(r2 * cos(inc2 * j), r2 *sin(inc2 * j), 0 );
      pushMatrix();
      rotateY(inc1 * (i + 1));
      vertex(r2 * cos(inc2 * j), r2 *sin(inc2 * j), 0);
      popMatrix();
      
    }
    popMatrix();
  }
  
  popMatrix();
  endShape();
  
}
1 Like
2

Try just moving your “beginShape” and “endShape” lines to around your inner loop, then run your sketch again.

void rosquilla(float r1, float r2) {
  float sides = 20;
  float inc1 = TWO_PI/sides;
  float sides2 = 8;
  float inc2 = TWO_PI/sides2;

  noFill();
  stroke(255, 175, 100);
  pushMatrix();

  for  (int i = 0; i < sides; i++) {  // ihave some sort of problem with transformations
    pushMatrix();
    rotateY(inc1 * i);
    translate(r1, 0, 0);

    beginShape(QUAD_STRIP);
    for (int j = 0; j <= sides2; j++) {
      vertex(r2 * cos(inc2 * j), r2 *sin(inc2 * j), 0 );
      pushMatrix();
      rotateY(inc1 * (i + 1));
      vertex(r2 * cos(inc2 * j), r2 *sin(inc2 * j), 0);
      popMatrix();
    }
    endShape(CLOSE);
    popMatrix();
  }

  popMatrix();
}

Screen Shot 2020-09-23 at 7.48.38 PM
Screen Shot 2020-09-23 at 7.48.38 PM1776×1310 142 KB

You may also want one extra vertex on each ring, and to close those shapes.

1 Like
3

[[Sorry, I wrote my answer before I saw Jeremy’s reply (I had difficulties to post my answer) ]]

several issues

foremost, shape / vertex ignores all rotate and translate commands.

so yours won’t work

Remark 1

Even this Sketch won’t take s.translate(r2,0,0) (it would take it, but not translate the vertex but the entire shape imho);

PShape s;  // The PShape object

void setup() {
  size(100, 100);
  // Creating a custom PShape as a square, by
  // specifying a series of vertices.
  s = createShape();
  s.beginShape();
  s.fill(0, 0, 255);
  s.noStroke();
  s.vertex(0, 0);
  s.vertex(0, 50);
  s.vertex(50, 50);
  s.vertex(50, 0);
  s.endShape(CLOSE);
}

void draw() {
  shape(s, 25, 25);
}

Remark 2

Here comes my approach using modelX etc.
but it’s far from perfect (I never understood QUAD_STRIP)

Chrisir


//https://discourse.processing.org/t/transformations-issues/24079


import peasy.*;

float r1, r2;
PeasyCam cam;

void setup() {
  size(900, 900, P3D);
  cam = new PeasyCam(this, 500);
}

void draw() {
  background(57);
  r1 = 200;
  r2 = 100;
  // rotateY(frameCount*PI/370);
  noFill();
  rosquilla(r1, r2);
}



void rosquilla(float r1, float r2) {
  float sides = 20;
  float inc1 = TWO_PI/sides;
  float sides2 = 8;
  float inc2 = TWO_PI/sides2;

  noFill();
  //fill(255, 0, 0); 
  stroke(255, 175, 100);
  //  pushMatrix();

  for  (int i = 0; i < sides; i++) {  // ihave some sort of problem with transformations

    beginShape();

    pushMatrix();
    rotateY(inc1 * i);
    translate(r1, 0, 0);

    for (int j = 0; j < sides2; j++) {
      //  vertex(r2 * cos(inc2 * j), r2 *sin(inc2 * j), 0 );
      pushMatrix();
      rotateZ(inc2 * (j));
      translate(r2, 0, 0);
      float x1= modelX(0, 0, 0);
      float y1= modelY(0, 0, 0);
      float z1= modelZ(0, 0, 0);
      vertex(x1, y1, z1); 
      popMatrix();
    }//for I
    popMatrix();
    endShape(CLOSE);
  }//for II

  // popMatrix();
}
3 Likes
4

Yeah I tried doing that through the rotation inside the nested loop, but, as @Chrisir said, shape/vertex ignore transformation commands :frowning: Thanks for your answer!

5

Thanks, I did not know that vertices ignored transformations. Guess I’ll try another algorithm to set the points, maybe filling an array of PVectors or so.
Thanks for mentioning modelX functions as well!! I’ll have to study harder hehe

2 Likes
6

It isn’t quite that it ignores them entirely. It is that the coordinate space for the vertex data is based on the transformation matrix when you write “beginShape().”

If you want a torus as a connected mesh, some good approaches are:

  1. use the equation for a torus, and compute the mesh coordinates without using translate / rotate – use sin/cos instead. This is how the processing.org Toroid example does it, using QUAD_STRIP for a square mesh. https://processing.org/examples/toroid.html

  2. use the Shapes 3D library – it has some really great tools for this.
    http://www.lagers.org.uk/s3d4p/index.html – @quark also has a much older tutorial on creating a toroid class http://lagers.org.uk/javafx/toroidclass.html

2 Likes
7

Thanks Jeremy!

ahh I see, I will check the resources!