# Save & Redraw Pixels (quickly)

**URL:** <https://discourse.processing.org/t/save-redraw-pixels-quickly/34968>\
**Category:** Coding Questions\
**Created:** [February 3, 2022, 9:52pm UTC](https://discourse.processing.org/t/save-redraw-pixels-quickly/34968 "2022-02-03T21:52:27Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mosacrafts](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@mosacrafts](https://discourse.processing.org/u/mosacrafts)\
**Post date:** [February 3, 2022, 9:52pm UTC](https://discourse.processing.org/t/save-redraw-pixels-quickly/34968/1 "2022-02-03T21:52:27Z")

</div>

Is there a way to redraw or save pixels in near constant time?

Currently Im creating a grain overlay by drawing thousands of randomly placed rectangles. I have to draw this grain for every single frame. My issue is that looping through and drawing thousands of rects is time consuming. I was wondering if there is a way to draw my grain overlay once, save the pixel data, and then add the grain in every frame (in a way thats quicker than just re drawing the grain)

Im trying to keep my project small and just code based, so I’de like to find a way to do this without saving the grain as a png.

This may be a stupid question as I have very little knowledge of the backend to p5. I just figured that if I can pre load and re draw images quickly, I should be able to do the same with the canvas without actually making it an image.

Any reply is greatly appreciated!

---

<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:** [February 4, 2022, 8:38pm UTC](https://discourse.processing.org/t/save-redraw-pixels-quickly/34968/2 "2022-02-04T20:38:20Z")

</div>

Create a separate graphics buffer with `createGraphics(width, height)`, draw your grains to that in `setup()`, draw that graphics object onto your main canvas each frame with `image()`. This won’t be constant time per se, it will be `Ο(n)` where `n` is the number of pixels, so it will have a greater impact on your frameRate given a larger canvas size, but it should be much faster than numerous `rect()` calls.

---

<div class="post-metadata">

**Author:** ![mosacrafts](https://avatars.discourse-cdn.com/v4/letter/m/f14d63/32.png) [@mosacrafts](https://discourse.processing.org/u/mosacrafts)\
**Post date:** [February 11, 2022, 9:08pm UTC](https://discourse.processing.org/t/save-redraw-pixels-quickly/34968/3 "2022-02-11T21:08:52Z")

</div>

Ahh! I have yet to use graphics to my advantage. Thats the answer I needed. Thank you!

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [February 12, 2022, 12:02am UTC](https://discourse.processing.org/t/save-redraw-pixels-quickly/34968/4 "2022-02-12T00:02:28Z")

</div>

Hello, @mosacrafts, and welcome to the Processing Forum!

The [p5.js: `createGraphics()`](https://p5js.org/reference/#/p5/createGraphics) reference page may be of help to you.