# How to save a sketch with audio instead only images

**URL:** https://discourse.processing.org/t/how-to-save-a-sketch-with-audio-instead-only-images/39741
**Category:** Libraries
**Tags:** homework
**Created:** [November 16, 2022, 5:33am UTC](https://discourse.processing.org/t/how-to-save-a-sketch-with-audio-instead-only-images/39741 "2022-11-16T05:33:22Z")
**Posts on this page:** 7
**Page:** 1

<div class="post-metadata">

### Author: ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)
#### Post date: [November 16, 2022, 5:33am UTC](https://discourse.processing.org/t/how-to-save-a-sketch-with-audio-instead-only-images/39741/1 "2022-11-16T05:33:22Z")

</div>

Hi, please. i need a help here…  
I made this code wich image and sound. As long i move the mouse the noise changes. How can i save it to render as a video instead only images?

\<  
import processing.sound.\*;

BrownNoise noise;  
/\*\*

- Blur Filter
- 
- Change the default shader to apply a simple, custom blur filter.
- 
- Press the mouse to switch between the custom and default shader.  
\*/

import ddf.minim.\*; //n

Minim minim; //n  
//AudioSample radar;//n  
//AudioSample pulse;  
//AudioSample hit;

//AudioSample lucid;  
int x = 900; //n  
int y = 700;//n  
int dx = 85; //n  
int dy = 85; //n

PShader blur;  
float r = 0;

void setup() {

background(0);

size(800, 800, P2D);  
stroke(98, 250, 8);  
rectMode(CENTER);  
smooth();  
blur = loadShader(“blur.glsl”);  
/\*  
minim = new Minim(this); //novo  
radar = minim.loadSample(“radar.wav”, 2048); // novo  
pulse = minim.loadSample(“pulse.wav”, 2034);  
hit = minim.loadSample(“hit.wav”, 2035);  
lucid = minim.loadSample(“lucid.wav”, 143);  
\*/  
// Create and start the noise generator

noise = new BrownNoise(this);  
noise.play();  
}

void draw() {

if (mousePressed){  
// Map mouseX from -1.0 to 1.0 for left to right  
noise.pan(map(mouseX, 0, width, -1.0, 1.0));

// Map mouseY from 0.0 to 0.3 for amplitude  
// (the higher the mouse position, the louder the sound)  
noise.amp(map(mouseY, 0, height/2, -0.3, 0.3));  
}

if (mousePressed){

x += dx/2;  
y += dy/2;

//superior esquerdo  
int m = millis();

//stroke(155);  
fill(m % 105);  
rect(50, 50, 50, 50, 5);  
textSize(15);  
fill(150);  
text(“Techno”, 27, 60);

// inferior direito  
int m3 = millis();  
//stroke(155);  
fill(m3 % 105);  
rect(750, 750, 50, 50, 5);  
textSize(15);  
fill(150);  
text(“Techno”,728, 760);

//superior direito  
int m4 = millis();  
//stroke(155);  
fill(m4 % 105);  
rect(750, 50, 50, 50, 5);  
textSize(15);  
fill(150);  
text(“Techno”, 727, 60);

```
int m5 = millis();

```

//stroke(155);  
fill(m5 % 105);

rect(50, 750, 50, 50, 5);  
textSize(15);  
fill(150);  
text(“Techno”, 27, 760);

```
int m2 = millis();

```

//stroke(155);  
fill(m2 % 205);

filter(blur);  
translate(mouseX, mouseY);  
rotate(r);  
rect(mouseX/8, mouseY/8, 150, 150);  
ellipse(mouseX/8, mouseY/8, 100, 100);

r = r + 0.05;

textSize(50);  
fill(255);  
text(“VrtX”, 5,35);

textSize(50);  
fill(255);  
text(“ArT”, 10, 75);

}  
}

void stop(){  
[//radar.close](https://radar.close)();  
[//minim.stop](https://minim.stop)();  
super.stop();

}

>

---

<div class="post-metadata">

### Author: ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)
#### Post date: [November 16, 2022, 7:46am UTC](https://discourse.processing.org/t/how-to-save-a-sketch-with-audio-instead-only-images/39741/2 "2022-11-16T07:46:08Z")

</div>

Hi @vrtx,

please format code …

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

Cheers  
— mnse

PS: You can check out the [Video Export Library](https://funprogramming.org/VideoExport-for-Processing/) there examples which you can use audio as well.

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [November 16, 2022, 12:15pm UTC](https://discourse.processing.org/t/how-to-save-a-sketch-with-audio-instead-only-images/39741/3 "2022-11-16T12:15:02Z")

</div>

Hello,

> [@vrtx](#):
>
> How can i save it to render as a video instead only images?

You can also save audio/video with one of the many tools out there:

[https://www.ispringsolutions.com/blog/10-best-screen-recording-software-for-windows-free-and-paid](https://www.ispringsolutions.com/blog/10-best-screen-recording-software-for-windows-free-and-paid)

This looks interesting but have not tried it:  
[https://discourse.processing.org/t/having-multiple-sketches-running-and-mixing-them-in-open-broadcaster-software-obs/39580/3](https://discourse.processing.org/t/having-multiple-sketches-running-and-mixing-them-in-open-broadcaster-software-obs/39580/3)

Please read this:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

`:)`

---

<div class="post-metadata">

### Author: ![jafal](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jafal/32/19112_2.png) [@jafal](https://discourse.processing.org/u/jafal)
#### Post date: [November 16, 2022, 7:05pm UTC](https://discourse.processing.org/t/how-to-save-a-sketch-with-audio-instead-only-images/39741/4 "2022-11-16T19:05:00Z")

</div>

Hi

> **[Video Export](https://funprogramming.org/VideoExport-for-Processing/)**
>
> A library for the Processing programming environment

---

<div class="post-metadata">

### Author: ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)
#### Post date: [November 17, 2022, 9:09pm UTC](https://discourse.processing.org/t/how-to-save-a-sketch-with-audio-instead-only-images/39741/5 "2022-11-17T21:09:30Z")

</div>

Hello guys, I did read all you guys sent to me. I’v learned a lot, Thank you!  
I stiil with the same problem, How to save my sketch wile i run it, iteracting with the mouse and the noise running out.  
I also downloaded some libraries and tools.  
At this point i am very glad for you guys and about my progress.  
Ah, my processing is 4.01  
O forguet one little thing. where to look for the “noise” start only when MousePressed as well…

I’v being adding “if ( mousePressed)” every where  
🤯

There is another thing but its for the next topic. (How to add my own samples to make my music, ande share the result to friends play with it).  
Tks once againg!!

```auto

/**
 *"BlurAudioVideoText"
 *
 * Blur Filter;
 * 
 *
 *MousePressed;
 *
 * BrownNoise added; Changes volume along X and Y;
 *
 *Image (square) leave a trace mark, drawimg in the back;
 *
 */
import processing.sound.*;

BrownNoise noise;

int x = 900; //n
int y = 700;//n
int dx = 85; //n
int dy = 85; //n

PShader blur;
float r = 0;

void setup() {
  background(0);

  size(800, 800, P2D);
  stroke(98, 250, 8);
  rectMode(CENTER);
  smooth();
  blur = loadShader("blur.glsl");

  // Create and start the noise generator
  noise = new BrownNoise(this);
  noise.play();
}

void draw() {

  if (mousePressed) {
    // Map mouseX from -1.0 to 1.0 for left to right
    noise.pan(map(mouseX, 0, width, -1.0, 1.0));

    // Map mouseY from 0.0 to 0.3 for amplitude
    // (the higher the mouse position, the louder the sound)
    noise.amp(map(mouseY, 0, height, -0.3, 0.3));

    x += dx/2;
    y += dy/2;

    //superior esquerdo
    int m = millis();

    //stroke(155);
    fill(m % 105);
    rect(50, 50, 50, 50, 5);
    textSize(15);
    fill(150);
    text("Techno", 27, 60);

    // inferior direito
    int m3 = millis();
    //stroke(155);
    fill(m3 % 105);
    rect(750, 750, 50, 50, 5);
    textSize(15);
    fill(150);
    text("Techno", 728, 760);

    //superior direito
    int m4 = millis();
    //stroke(155);
    fill(m4 % 105);
    rect(750, 50, 50, 50, 5);
    textSize(15);
    fill(150);
    text("Techno", 727, 60);

    int m5 = millis();
    //stroke(155);
    fill(m5 % 105);

    rect(50, 750, 50, 50, 5);
    textSize(15);
    fill(150);
    text("Techno", 27, 760);

    int m2 = millis();
    //stroke(155);
    fill(m2 % 205);

    filter(blur);
    translate(mouseX, mouseY);
    rotate(r);
    rect(mouseX/8, mouseY/8, 150, 150);
    ellipse(mouseX/8, mouseY/8, 100, 100);

    r = r + 0.05;

    textSize(50);
    fill(255);
    text("VrtX", 5, 35);

    textSize(50);
    fill(255);
    text("ArT", 10, 75);
  }
}

// saveFrame("frame-####.jpg");

```

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [November 17, 2022, 9:37pm UTC](https://discourse.processing.org/t/how-to-save-a-sketch-with-audio-instead-only-images/39741/6 "2022-11-17T21:37:06Z")

</div>

> [@vrtx](#):
>
> where to look for the “noise” start only when MousePressed

move the line noise.play();  
from setup() to draw:

```auto
if(mousePressed) {
    noise.play();
}

```

---

<div class="post-metadata">

### Author: ![vrtx](https://avatars.discourse-cdn.com/v4/letter/v/e99b99/32.png) [@vrtx](https://discourse.processing.org/u/vrtx)
#### Post date: [November 17, 2022, 10:06pm UTC](https://discourse.processing.org/t/how-to-save-a-sketch-with-audio-instead-only-images/39741/7 "2022-11-17T22:06:40Z")

</div>

thanks Mr. @Chrisir !  
I did and work!  
In this exactlly moment i am working on this project, add efx e so on… As adding my samples insteat the noise … (as i said, it will be in other topic of this forum. Sorry for anything, a am learning… TKS)  
I am Trying to keep those little square flashing a part of mousepressed… The flash frequency of the big rect is diferent than the little ones on the cornes. I DO have this original well saved rsrsrs…  
Ps.: i start with Processing 4.01 from 3 weeks ago… I had some experience whit PIC microcontroller codes far ago…(3000 years)
