Jittery Rotation

edited March 2018 in Questions about Code

Hi, I have translated this p5.js code From the Coding Train into processing so that I can export PDFs easily. It works fine except the rotation is very jittery. it seems like the lines can only rotate in fixed increments. It also shows when I'm exporting single frames. What am I missing here? Is it perhaps something with float rounding? Can you guys help me?

import processing.pdf.*;

float inc = 0.05;
float scl= 20;
int cols, rows;
float zoff = 0;
PVector[] flowField;

void setup(){
  //size(1020,600, PDF, "mesh.pdf");
  size(1020,600);
  cols = floor(width/scl);
  rows = floor(height/scl);
  flowField = new PVector[cols * rows];
}

void draw(){
  background(255);
  float yoff = 0;
  for (int y = 0; y < rows; y++){
    float xoff = 0;
    for (int x = 0; x < cols; x++){
      float angle = noise(xoff, yoff, zoff) * TWO_PI;
      PVector v = PVector.fromAngle(angle);
      xoff += inc;
      stroke(0);
      strokeWeight(3);
      pushMatrix();
      translate(x * scl +(scl/2), y * scl+(scl/2));
      rotate(v.heading());
      line(-scl/3.5, 0, scl/3.5, 0);
      popMatrix();
    }
    yoff += inc;
    zoff += 0.0002;
  }
  //exit();
}

Answers

  • um, you are calculating a noisy angle (line 23), converting that to a pvector (line 24) and then converting the pvector back to an angle (30). why not just keep the angle and ditch the pvector? you don't use it for anything else.

    i'd also play around with the order of the arguments in the call to noise - xoff and yoff don't change per frame, only zoff does. and maybe one argument has more weight in the noise calculation than the others.

  • Yes, the pvector was in the original and I added it back in when I was troubleshooting. I just found out that when i set the scale to 250 the rotation becomes a lot smoother. it seems like the endpoints of a line can only move full pixels and nothing in between. How can I detach the rotation from the pixel grid?

  • size(1020, 600, P2D);
    

    or

    size(1020, 600, FX2D);
    

    seems better.

    doesn't help you with the PDF (but perhaps the PDF is fine)

  • edited March 2018

    Thank you that looks better. For the PDF I tried making a huge PGraphic to increase the resolution but for some reason the exported PDF is empty.

    import processing.pdf.*;
    
    float incXY = 0.05;
    float incZ = 0.0002;
    float scl= 400;
    float zoff = 0;
    int cols, rows;
    PGraphics pdf;
    
    void setup(){
      //size(1020,600);
      cols = floor(width/scl);
      rows = floor(height/scl);
      pdf = createGraphics(20400, 12000, PDF, "mesh.pdf");
    }
    
    void draw(){
      pdf.beginDraw();
      pdf.background(255);
      float yoff = 0;
      for (int y = 0; y < rows; y++){
        float xoff = 0;
        for (int x = 0; x < cols; x++){
          float angle = noise(xoff, yoff, zoff) * TWO_PI;
          pdf.stroke(0);
          pdf.strokeWeight(60);
          pdf.pushMatrix();
          pdf.translate(x * scl +(scl/2), y * scl+(scl/2));
          pdf.rotate(angle);
          pdf.line(-scl/3.5, 0, scl/3.5, 0);
          pdf.popMatrix();
          xoff += incXY;
        }
        yoff += incXY;
        zoff += incZ;
      }
      pdf.dispose();
      pdf.endDraw();
      println("done");
      exit();
    }
    
  • I want to use the patterns in CAD so unfortunately I need a vector export.

  • Answer ✓

    add this after line 20

    println(rows, cols);
    

    trace that back to where it's set... think about why those are 0...

  • OOOOH Thank you so much it works perfectly now!

Sign In or Register to comment.