How to properly export this simple 3D sketch to PDF?

Processing Coding Questions
1

I have a somewhat simple sketch but whenever I export to pdf it looks really bad. What is the best way to get a vector file for this sketch that will look like how it does when run in Processing?

import processing.pdf.*;
boolean recordPDF;

float grid = 200;
float angle;

void setup() {
  size(500, 500, P3D);
  rectMode(CENTER);
  background(255);
}

void draw () {
  // Begin making the PDF
  if (recordPDF) {
    beginRaw(PDF, "3D.pdf" );
  }

  colorMode(HSB, 100, 100, 100, 100);
  translate(width/2, height/2);
  rotateX(radians(angle/1));
  rotateY(radians(angle/2));
  float h1 = map(sin(angle/50), -1, 1, 50, 100);
  float h2 = map(sin(angle/50), -1, 1, 70, 100);
  noStroke();
  fill(h1, h1, 100, 1);
  ellipse(0, 0, grid, grid);
  fill(h2, h2, 100, 1);
  ellipse(0, 0, grid, grid);

  angle+=1;

 if (recordPDF) {
    endRaw();
    recordPDF = false;
  }
}


void keyPressed() {
  // Use a key press so that it doesn't make a million files
  if (key == 'r') {
    recordPDF = true;
  }
}

Then I trued using Pgraphics and that looks super off (2d):

import processing.pdf.*;
boolean recordPDF;
PGraphics pg1;

float grid = 200;
float angle;

void setup() {
  size(500, 500, P3D);
  pg1 = createGraphics(width, height, P3D);
  rectMode(CENTER);
  background(255);
}

void draw () {
  // Begin making the PDF
  pg1.beginDraw();
  pg1.colorMode(HSB, 100, 100, 100, 100);
  pg1.translate(width/2, height/2);
  pg1.rotateX(radians(angle/1));
  pg1.rotateY(radians(angle/2));
  float h1 = map(sin(angle/50), -1, 1, 50, 100);
  float h2 = map(sin(angle/50), -1, 1, 70, 100);
  pg1.noStroke();
  pg1.fill(h1, h1, 100, 20);
  pg1.ellipse(0, 0, grid, grid);
  pg1.fill(h2, h2, 100, 20);
  pg1.ellipse(0, 0, grid, grid);
  angle+=1;
}
2

Hi :slight_smile: I think the issue with your first program is that it is only saving two circles with almost zero opacity to a PDF file, and you probably want to save many circles, right?

You could do that by using a for or a while loop to save many circles, or using frameCount instead to not end the PDF until you reach a certain frame number. Like this:

import processing.pdf.*;

float grid = 200;
float angle;

void setup() {
  size(500, 500, P3D);
  beginRaw(PDF, "/tmp/3D.pdf" );
  rectMode(CENTER);
  background(255);
}

void draw () {
  colorMode(HSB, 100, 100, 100, 100);
  translate(width/2, height/2);
  rotateX(radians(angle/1));
  rotateY(radians(angle/2));
  float h1 = map(sin(angle/50), -1, 1, 50, 100);
  float h2 = map(sin(angle/50), -1, 1, 70, 100);
  noStroke();
  fill(h1, h1, 100, 1);
  ellipse(0, 0, grid, grid);
  fill(h2, h2, 100, 1);
  ellipse(0, 0, grid, grid);

  angle+=1;

 if (frameCount > 100) {
    endRaw();
    exit();
  }
}

Then the PDF looks like this:

image
image668×657 57.1 KB

It seems to have an artifact due to how Processing draws the ellipses (by using tiny slices) which can be improved by not drawing the circles perfectly aligned, but maybe with an increasing tiny Z rotation on each circle.

This shows part of a circle highlighted in Inkscape:
image