# Storing drawing data in array for P5 drawing application?

**URL:** https://discourse.processing.org/t/storing-drawing-data-in-array-for-p5-drawing-application/14951
**Category:** Coding Questions
**Created:** [October 25, 2019, 9:31pm UTC](https://discourse.processing.org/t/storing-drawing-data-in-array-for-p5-drawing-application/14951 "2019-10-25T21:31:40Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![jaymesdec](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@jaymesdec](https://discourse.processing.org/u/jaymesdec)
#### Post date: [October 25, 2019, 9:31pm UTC](https://discourse.processing.org/t/storing-drawing-data-in-array-for-p5-drawing-application/14951/1 "2019-10-25T21:31:40Z")

</div>

Hi I am trying to help out a few of my students with a question that they have about drawing programs that they are building in P5.

Start by drawing to the canvas using:

```auto
line(mouseX, mouseY, pmouseX, pmouseY

```

Then if they have something like an expandable menu that pops up over their drawing, what is the simplest way to store the drawing so that they can display it again when the expandable menu closes.

I’m having a hard time explaining this. So this is an example: [https://editor.p5js.org/jdec/sketches/1rmwaGVoL](https://editor.p5js.org/jdec/sketches/1rmwaGVoL)

This student wants to display more drawing menu options when the user clicks the More box. But then when you close the box, have the drawing come back. I think they have to store their drawing data in an array, but is there a simpler way to do it? We are all beginners with P5, so thanks for any advice you might have!

---

<div class="post-metadata">

### Author: ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [October 26, 2019, 3:22am UTC](https://discourse.processing.org/t/storing-drawing-data-in-array-for-p5-drawing-application/14951/2 "2019-10-26T03:22:14Z")

</div>

[p5js.org/reference/#/p5/createGraphics](http://p5js.org/reference/#/p5/createGraphics)

---

<div class="post-metadata">

### Author: ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)
#### Post date: [October 26, 2019, 11:41am UTC](https://discourse.processing.org/t/storing-drawing-data-in-array-for-p5-drawing-application/14951/3 "2019-10-26T11:41:23Z")

</div>

- -a- start example with a layer ( acc. @GoToLoop )  
[https://editor.p5js.org/kll/sketches/SmXp0Neo9](https://editor.p5js.org/kll/sketches/SmXp0Neo9)

* * *

aside from your question please also see 2 different ways

- -b- operation from HTML area  
[https://editor.p5js.org/kll/sketches/cNgH-C1dq](https://editor.p5js.org/kll/sketches/cNgH-C1dq)

- -c- operation with invisible sliders MouseWheel Plus Plus  
[https://editor.p5js.org/kll/sketches/Vj-GWWxKV](https://editor.p5js.org/kll/sketches/Vj-GWWxKV)

---

<div class="post-metadata">

### Author: ![jaymesdec](https://avatars.discourse-cdn.com/v4/letter/j/3d9bf3/32.png) [@jaymesdec](https://discourse.processing.org/u/jaymesdec)
#### Post date: [October 28, 2019, 3:01pm UTC](https://discourse.processing.org/t/storing-drawing-data-in-array-for-p5-drawing-application/14951/4 "2019-10-28T15:01:24Z")

</div>

Thank you! This is exactly what we needed.
