# P5.js - How to save a single picture in the draw()

**URL:** <https://discourse.processing.org/t/p5-js-how-to-save-a-single-picture-in-the-draw/32906>\
**Category:** Libraries\
**Created:** [October 18, 2021, 12:22pm UTC](https://discourse.processing.org/t/p5-js-how-to-save-a-single-picture-in-the-draw/32906 "2021-10-18T12:22:45Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![niuuin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/niuuin/32/7517_2.png) [@niuuin](https://discourse.processing.org/u/niuuin)\
**Post date:** [October 18, 2021, 12:22pm UTC](https://discourse.processing.org/t/p5-js-how-to-save-a-single-picture-in-the-draw/32906/1 "2021-10-18T12:22:45Z")

</div>

I want to save the picture when the volume is greater than a certain level, but the current code will save many pictures continuously. How can I save only one picture?

Thank you for your help:)

[https://editor.p5js.org/niu/sketches/OAEYNNHgC](https://editor.p5js.org/niu/sketches/OAEYNNHgC)

```auto
let mic;

function setup() {
  createCanvas(400, 400);
  mic = new p5.AudioIn();
  mic.start();
}

function draw() {
  background(220);

  let micLevel = mic.getLevel();
  let y = height - map(micLevel, 0, 1, 0, height);
  circle(width / 2, y, 30);
  
  if(micLevel > 0.5) save(frameCount + '.png');
    
}

```

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 18, 2021, 7:37pm UTC](https://discourse.processing.org/t/p5-js-how-to-save-a-single-picture-in-the-draw/32906/2 "2021-10-18T19:37:02Z")

</div>

Just add a variable to track if you’ve saved yet. Only save if that variable is false and set it to true once you save:

```auto
let mic;

function setup() {
  createCanvas(400, 400);
  mic = new p5.AudioIn();
  mic.start();
}

let saveTriggered = false;
function draw() {
  background(220);

  let micLevel = mic.getLevel();
  let y = height - map(micLevel, 0, 1, 0, height);
  circle(width / 2, y, 30);
  
  if(micLevel > 0.5 && !saveTriggered) {
    saveTriggered = true;
    save(frameCount + '.png');    
  }

  // TODO: add some condition to reset saveTriggered to false? maybe if the mic has been less than some threshold for a certain period of time?
}

```

---

<div class="post-metadata">

**Author:** ![niuuin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/niuuin/32/7517_2.png) [@niuuin](https://discourse.processing.org/u/niuuin)\
**Post date:** [October 19, 2021, 1:42pm UTC](https://discourse.processing.org/t/p5-js-how-to-save-a-single-picture-in-the-draw/32906/3 "2021-10-19T13:42:18Z")

</div>

> [@KumuPaul](#):
>
> `/ TODO: add some condition to reset saveTriggered to false? maybe if the mic has been less than some threshold for a certain period of time?`

Thank you for your help,The idea of ​​setting `saveTriggered` to `false` is also great!

---

<div class="post-metadata">

**Author:** ![niuuin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/niuuin/32/7517_2.png) [@niuuin](https://discourse.processing.org/u/niuuin)\
**Post date:** [October 19, 2021, 1:54pm UTC](https://discourse.processing.org/t/p5-js-how-to-save-a-single-picture-in-the-draw/32906/4 "2021-10-19T13:54:16Z")

</div>

> [@KumuPaul](#):
>
> variable

I completed the code to change safe Triggered to false 🙂

```JavaScript
let mic;
let saveTriggered = false;
let saveThreshold = 0;

function setup() {
  createCanvas(400, 400);
  mic = new p5.AudioIn();
  mic.start();
}

function draw() {
  background(220);

  let micLevel = mic.getLevel();
  let y = height - map(micLevel, 0, 1, 0, height);
  circle(width / 2, y, 30);
  
  if(micLevel > 0.5 && !saveTriggered) {
    saveTriggered = true;
    save(frameCount + '.png');
    saveThreshold = 0;
  }
  
  saveThreshold ++;
  
  // Time
  if(saveThreshold > 60*3) {
    saveTriggered = false;
  }
  // console.log(micThreshold);
}

```

> **[404 Page Not Found - p5.js Web Editor](https://editor.p5js.org/niu/sketches/OAEYNNHgC)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [October 19, 2021, 8:01pm UTC](https://discourse.processing.org/t/p5-js-how-to-save-a-single-picture-in-the-draw/32906/5 "2021-10-19T20:01:47Z")

</div>

Nice. One small change you might consider: always reset saveThreshold to 0 when micLevel \> 0.5, that way if you have sustained loud noise it won’t trigger a re-save after 60 \* 3 frames (~three seconds):

```auto
let mic;
let saveTriggered = false;
let saveThreshold = 0;

function setup() {
  createCanvas(400, 400);
  mic = new p5.AudioIn();
  mic.start();
}

function draw() {
  background(220);

  let micLevel = mic.getLevel();
  let y = height - map(micLevel, 0, 1, 0, height);
  circle(width / 2, y, 30);
  
  if(micLevel > 0.5 && ) {
    if (!saveTriggered) {
      saveTriggered = true;
      save(frameCount + '.png');
    }
    saveThreshold = 0;
  }
  
  saveThreshold++;
  
  // Wait for 3 seconds of quiet before re-enabling the save function
  if(saveThreshold > 60*3) {
    saveTriggered = false;
  }
  // console.log(micThreshold);
}

```