# Trouble exporting 3D animation to SVG

**URL:** <https://discourse.processing.org/t/trouble-exporting-3d-animation-to-svg/23192>\
**Category:** Coding Questions\
**Created:** [August 11, 2020, 8:36pm UTC](https://discourse.processing.org/t/trouble-exporting-3d-animation-to-svg/23192 "2020-08-11T20:36:57Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lucianoinfanti](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lucianoinfanti/32/10519_2.png) [@Lucianoinfanti](https://discourse.processing.org/u/Lucianoinfanti)\
**Post date:** [August 11, 2020, 8:36pm UTC](https://discourse.processing.org/t/trouble-exporting-3d-animation-to-svg/23192/1 "2020-08-11T20:36:57Z")

</div>

Hey, everyone.

I’m just starting with coding and Processing, in particular. I’ve watched this great tutorial on how to make this nice 3D animation and I tried it myself. Everything worked great but I wanted to export the end result as a SVG file so I can edit it on Figma or Illustrator.

But no matter what I tried, I always end up with nothing but a white canvas. This is the code and what I’ve tried to do to solve this.

**First attempt:**

```auto
PImage img;
import processing.svg.*;
boolean record;

void setup() {
  size(900, 900, P3D);
  img = loadImage("art.png");
  img.resize(900, 900);
}

void draw() {
  if (record) {
    beginRecord(SVG, "frame-####.svg");
  }
  
  background(#f1f1f1);
  fill(0);
  noStroke();
  sphereDetail(3);
  float tiles = 100;
  float tileSize = width/tiles;
  
  push();
  
  translate(width/2,height/2);
  rotateY(radians(frameCount));
  
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {
      color c = img.get(int(x*tileSize),int(y*tileSize));
      float b = map(brightness(c),0,255,1,0);
      float z = map(b,0,1,-150,150);
      
      push();
      translate(x*tileSize - width/2, y*tileSize - height/2, z);
      sphere(tileSize*b*0.4);
      pop();
    }
  }
  
  pop();
  
  if (record) {
    endRecord();
    record = false;
  }
}

// Use a keypress so thousands of files aren't created
void mousePressed() {
  record = true;
}

```

What I’ve got from this is a small freeze in the animation when I click with my mouse and a gray (#f1f1f1) frame-####.svg (897 bytes).

**Second attempt:**

```auto
PImage img;
import processing.svg.*;
boolean record;

void setup() {
  size(900, 900, P3D);
  img = loadImage("art.png");
  img.resize(900, 900);
}

void draw() {
  if (record) {
    beginRaw(SVG, "output.svg");
  }
  
  background(#f1f1f1);
  fill(0);
  noStroke();
  sphereDetail(3);
  float tiles = 100;
  
  float tileSize = width/tiles;
  push();
  
  translate(width/2,height/2);
  rotateY(radians(frameCount));
  
  for (int x = 0; x < tiles; x++) {
    for (int y = 0; y < tiles; y++) {
      color c = img.get(int(x*tileSize),int(y*tileSize));
      float b = map(brightness(c),0,255,1,0);
      float z = map(b,0,1,-150,150);
    
      push();
      
      translate(x*tileSize - width/2, y*tileSize - height/2, z);
      sphere(tileSize*b*0.4);
      pop();
      
      if (record) {
        endRaw();
        record = false;
      }
    }
  }
   
  pop();
}

void keyPressed() {
  if (key == 'r') {
    record = true;
  }
}

```

What I’ve got from this is a small freeze in the animation when I hit r and a full white output.svg file (2KB).

I’ve tried moving the background and the if(record) statement but nothing has changed.

Any ideas on how to export this?

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [August 11, 2020, 10:47pm UTC](https://discourse.processing.org/t/trouble-exporting-3d-animation-to-svg/23192/2 "2020-08-11T22:47:54Z")

</div>

Welcome @Lucianoinfanti

I don’t think Processing works like this. It won’t automatically convert 3D objects to 2D vectors (for SVG). I’d suggest exporting as an _obj_ file. You can install the _OBJExport_ library (using Sketch \> Import Library \> Add Library). Here’s an example sketch:

```auto
import nervoussystem.obj.*;

size(600, 400, P3D);
beginRecord("nervoussystem.obj.OBJExport", "ellipse.obj"); 
translate(width/2, height/2, -200);
sphere(100);
endRecord();

```

This will create a new _ellipse.obj_ in your sketch folder. You can convert that to an SVG using [scVector](http://www.stylecampaign.com/scVector/html/about.html).

---

<div class="post-metadata">

**Author:** ![Lucianoinfanti](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lucianoinfanti/32/10519_2.png) [@Lucianoinfanti](https://discourse.processing.org/u/Lucianoinfanti)\
**Post date:** [August 11, 2020, 11:26pm UTC](https://discourse.processing.org/t/trouble-exporting-3d-animation-to-svg/23192/3 "2020-08-11T23:26:31Z")

</div>

Thanks for your help!

I’m quite confused now because I was actually following instructions from [Processing.org](http://Processing.org) on how to export SVG files from 3D scenes. The link is this one: [SVG Export / Libraries / Processing.org](https://processing.org/reference/libraries/svg/index.html)

It says:

> **SVG Files from 3D Geometry (With Screen Display)**
> 
> To create vectors from 3D data, use the beginRaw() and endRaw() commands. These commands will grab the shape data just before it is rendered to the screen. At this stage, your entire scene is nothing but a long list of lines and triangles. This means that a shape created with sphere() method will be made up of hundreds of triangles, rather than a single object.
> 
> When using beginRaw() and endRaw(), it’s possible to write to either a 2D or 3D renderer. For instance, beginRaw() with the SVG library will write the geometry as flattened triangles and lines.

I also tried the **Single Frame from an Animation (With Screen Display)** method, but it didn’t work either. Am I missing something?

---

<div class="post-metadata">

**Author:** ![tabreturn](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tabreturn/32/3697_2.png) [@tabreturn](https://discourse.processing.org/u/tabreturn)\
**Post date:** [August 12, 2020, 12:08am UTC](https://discourse.processing.org/t/trouble-exporting-3d-animation-to-svg/23192/4 "2020-08-12T00:08:24Z")

</div>

This is awesome! I didn’t realize that Processing can do this! Ignore what I said before.

I ran through your script, which I managed to get working. I’ve changed a few things:

1. A `tiles` value of `100` is too demanding for the computer I’m on right now, so I reduced this to `10`.

2. I’ve shuffled the nesting of your statements a bit – the final `if` statement isn’t nested within a `for` loop anymore.

3. On my (Linux) computer, I have to add the `settings()` function (at the top of the sketch) to get 3D Processing working properly. I don’t think you need to do this, but _just maybe_ this is part of the solution.

```auto
void settings() { 
  System.setProperty("jogl.disable.openglcore", "false");
  size(900, 900, P3D);
}

PImage img;
import processing.svg.*;
boolean record;

void setup() {
  //size(900, 900, P3D);
  img = loadImage("art.png");
  img.resize(900, 900);
}

void draw() {
  
  if (record) {
    beginRaw(SVG, "output.svg");
  }
  
  background(#f1f1f1);
  fill(0);
  noStroke();
  sphereDetail(3);
  float tiles = 10;
  float tileSize = width/tiles;
  push();
  translate(width/2,height/2);
  rotateY(radians(frameCount));
  
  for (int x = 0; x < tiles; x++) {
    
    for (int y = 0; y < tiles; y++) {
      color c = img.get(int(x*tileSize),int(y*tileSize));
      float b = map(brightness(c),0,255,1,0);
      float z = map(b,0,1,-150,150);
      push();
      translate(x*tileSize - width/2, y*tileSize - height/2, z);
      sphere(tileSize*b*0.4);
      pop();
    }
  }

  pop();
      
  if (record) {
    endRaw();
    record = false;
  }
}

void keyPressed() {
  
  if (key == 'r') {
    record = true;
  }
}

```

---

<div class="post-metadata">

**Author:** ![Lucianoinfanti](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/lucianoinfanti/32/10519_2.png) [@Lucianoinfanti](https://discourse.processing.org/u/Lucianoinfanti)\
**Post date:** [August 12, 2020, 3:52am UTC](https://discourse.processing.org/t/trouble-exporting-3d-animation-to-svg/23192/5 "2020-08-12T03:52:19Z")

</div>

That worked just fine! I was intrigued by your last statement so I decided to remove the `settings()` function and it worked as well.

That leads me to believe the problem was the `if` statement incorrectly placed inside the `draw()` function.

Thanks again for your help.