# Need help in exporting SVG from animation

**URL:** https://discourse.processing.org/t/need-help-in-exporting-svg-from-animation/45144
**Category:** Libraries
**Created:** [October 7, 2024, 11:05am UTC](https://discourse.processing.org/t/need-help-in-exporting-svg-from-animation/45144 "2024-10-07T11:05:57Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Heliasz](https://avatars.discourse-cdn.com/v4/letter/h/f05b48/32.png) [@Heliasz](https://discourse.processing.org/u/Heliasz)
#### Post date: [October 7, 2024, 11:05am UTC](https://discourse.processing.org/t/need-help-in-exporting-svg-from-animation/45144/1 "2024-10-07T11:05:57Z")

</div>

Dear All,  
I have the code pasted below and I am trying to export SVG file from animation.  
Here’s Simplex Noise code I am using: [opensimplexnoise.pde · GitHub](https://gist.github.com/Bleuje/fce86ef35b66c4a2b6a469b27163591e)  
I am trying to paste code dedicated by Processing: [SVG Export / Libraries / Processing.org](https://processing.org/reference/libraries/svg/index.html)  
but it don’t work.

I would highly appreciated your help!

OpenSimplexNoise noise;

int result;  
float t, c;

float ease(float p) {  
return 3_p_p - 2_p_p\*p;  
}

float ease(float p, float g) {  
if (p \< 0.5)  
return 0.5 \* pow(2_p, g);  
else  
return 1 - 0.5 \* pow(2_(1 - p), g);  
}

float mn = .5\*sqrt(3), ia = atan(sqrt(.5));

void push() {  
pushMatrix();  
pushStyle();  
}

void pop() {  
popStyle();  
popMatrix();  
}

void draw() {

if (!recording) {  
t = mouseX_1.0/width;  
c = mouseY_1.0/height;  
if (mousePressed)  
println(c);  
draw\_();  
} else {  
for (int i=0; i\<width\*height; i++)  
for (int a=0; a\<3; a++)  
result[i][a] = 0;

```
c = 0;
for (int sa=0; sa<samplesPerFrame; sa++) {
  t = map(frameCount-1 + sa*shutterAngle/samplesPerFrame, 0, numFrames, 0, 1);
  draw_();
  loadPixels();
  for (int i=0; i<pixels.length; i++) {
    result[i][0] += pixels[i] >> 16 & 0xff;
    result[i][1] += pixels[i] >> 8 & 0xff;
    result[i][2] += pixels[i] & 0xff;
  }
}

loadPixels();
for (int i=0; i<pixels.length; i++)
  pixels[i] = 0xff << 24 | 
    int(result[i][0]*1.0/samplesPerFrame) << 16 | 
    int(result[i][1]*1.0/samplesPerFrame) << 8 | 
    int(result[i][2]*1.0/samplesPerFrame);
updatePixels();

saveFrame("fr###.png");
println(frameCount,"/",numFrames);
if (frameCount==numFrames)
  exit();

```

}  
}

//////////////////////////////////////////////////////////////////////////////

int samplesPerFrame = 1;  
int numFrames = 40;  
float shutterAngle = .8;

boolean recording = true;

void setup(){  
size(800,800);  
result = new int[width\*height][3];

noise = new OpenSimplexNoise();  
}

int N = 70;  
float b = 50;  
float l = 15;  
float scl = 0.01;  
float r = 0.2;

void draw\_(){  
background(208, 209, 199);

stroke(0);  
strokeWeight(1);  
for(int i=0;i\<N;i++){  
for(int j=0;j\<N;j++){  
float x = map(i,0,N-1,b,width-b);  
float y = map(j,0,N-1,b,height-b);  
float theta = 15\*(float)noise.eval(scl_x,scl_y,r_cos(TWO\_PI_t),r_sin(TWO\_PI_t));  
float vx = l_cos(theta);  
float vy = l_sin(theta);  
float intensity = 0.1+1.5_ease(map((float)noise.eval(200+scl_x,scl_y,r_cos(TWO\_PI_t),r_sin(TWO\_PI_t)),-1,1,0,1),3.5);  
vx_=intensity;  
vy\*=intensity;  
line(x,y,x+vx,y+vy);  
}  
}  
saveFrame(“output/image####.gif”);

}

---

<div class="post-metadata">

### Author: ![Heliasz](https://avatars.discourse-cdn.com/v4/letter/h/f05b48/32.png) [@Heliasz](https://discourse.processing.org/u/Heliasz)
#### Post date: [October 7, 2024, 11:28am UTC](https://discourse.processing.org/t/need-help-in-exporting-svg-from-animation/45144/2 "2024-10-07T11:28:30Z")

</div>

I came up with an idea to ask chat got, and it works. The code’s below if anyone need it:  
import processing.svg.\*;

OpenSimplexNoise noise;

int result;  
float t, c;

float ease(float p) {  
return 3_p_p - 2_p_p\*p;  
}

float ease(float p, float g) {  
if (p \< 0.5)  
return 0.5 \* pow(2_p, g);  
else  
return 1 - 0.5 \* pow(2_(1 - p), g);  
}

float mn = .5\*sqrt(3), ia = atan(sqrt(.5));

void push() {  
pushMatrix();  
pushStyle();  
}

void pop() {  
popStyle();  
popMatrix();  
}

// Flaga do kontrolowania eksportu SVG  
boolean exportSVG = true;

void draw() {

if (!recording) {  
t = mouseX_1.0/width;  
c = mouseY_1.0/height;  
if (mousePressed)  
println(c);  
draw\_();  
} else {  
for (int i=0; i\<width\*height; i++)  
for (int a=0; a\<3; a++)  
result[i][a] = 0;

```
c = 0;
for (int sa=0; sa<samplesPerFrame; sa++) {
  t = map(frameCount-1 + sa*shutterAngle/samplesPerFrame, 0, numFrames, 0, 1);
  draw_();
  loadPixels();
  for (int i=0; i<pixels.length; i++) {
    result[i][0] += pixels[i] >> 16 & 0xff;
    result[i][1] += pixels[i] >> 8 & 0xff;
    result[i][2] += pixels[i] & 0xff;
  }
}

loadPixels();
for (int i=0; i<pixels.length; i++)
  pixels[i] = 0xff << 24 | 
    int(result[i][0]*1.0/samplesPerFrame) << 16 | 
    int(result[i][1]*1.0/samplesPerFrame) << 8 | 
    int(result[i][2]*1.0/samplesPerFrame);
updatePixels();

saveFrame("fr###.png");
println(frameCount,"/",numFrames);
if (frameCount==numFrames)
  exit();

```

}  
}

//////////////////////////////////////////////////////////////////////////////

int samplesPerFrame = 1;  
int numFrames = 40;  
float shutterAngle = .8;

boolean recording = true;

void setup(){  
size(800,800);  
result = new int[width\*height][3];

noise = new OpenSimplexNoise();

// Rozpoczynamy zapis SVG, jeśli flaga jest ustawiona  
if (exportSVG) {  
beginRecord(SVG, “output-####.svg”);  
}  
}

int N = 70;  
float b = 50;  
float l = 15;  
float scl = 0.01;  
float r = 0.2;

void draw\_(){  
background(208, 209, 199);

stroke(0);  
strokeWeight(1);  
for(int i=0;i\<N;i++){  
for(int j=0;j\<N;j++){  
float x = map(i,0,N-1,b,width-b);  
float y = map(j,0,N-1,b,height-b);  
float theta = 15\*(float)noise.eval(scl_x,scl_y,r_cos(TWO\_PI_t),r_sin(TWO\_PI_t));  
float vx = l_cos(theta);  
float vy = l_sin(theta);  
float intensity = 0.1+1.5_ease(map((float)noise.eval(200+scl_x,scl_y,r_cos(TWO\_PI_t),r_sin(TWO\_PI_t)),-1,1,0,1),3.5);  
vx_=intensity;  
vy\*=intensity;  
line(x,y,x+vx,y+vy);  
}  
}

if (exportSVG) {  
// Zakończenie zapisu do SVG po zakończeniu rysowania  
endRecord();  
exportSVG = false; // Wyłączamy eksport SVG po pierwszej klatce  
noLoop(); // Zatrzymujemy animację po zapisaniu pierwszej klatki SVG  
}

saveFrame(“output/image####.gif”);  
}

---

<div class="post-metadata">

### Author: ![ProcessingOrg](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/processingorg/32/18341_2.png) [@ProcessingOrg](https://discourse.processing.org/u/ProcessingOrg)
#### Post date: [October 11, 2024, 5:49pm UTC](https://discourse.processing.org/t/need-help-in-exporting-svg-from-animation/45144/3 "2024-10-11T17:49:10Z")

</div>

Hello @Heliasz and welcome to the forum! To improve readability, kindly format your code by editing your post, selecting the code, and pressing the \</\> button. This will make it easier for us to assist you.

![ezgif.com-gif-maker (1)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/4/34521338de6902479873291389bf53a11d12237d.gif)