# Please help with set() and get()

**URL:** <https://discourse.processing.org/t/please-help-with-set-and-get/21403>\
**Category:** Coding Questions\
**Created:** [May 29, 2020, 2:00pm UTC](https://discourse.processing.org/t/please-help-with-set-and-get/21403 "2020-05-29T14:00:56Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [May 29, 2020, 2:00pm UTC](https://discourse.processing.org/t/please-help-with-set-and-get/21403/1 "2020-05-29T14:00:56Z")

</div>

Hello good people,

I have been writing code to manipulate an image in p5.js. The effect that I want to achieve is simple. But I can’t get around to find a way to do it. Currently, the result from my code is that the image on the left is slowly replaced by an image on the right in a random position.

This is my code:

> **[p5.js Web Editor](https://editor.p5js.org/N00B/full/fyqI0DdwV)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

But actually, what I want to achieve is to make the image on the left cover-up by image on the right but then it would go back to the original image in a random position. So the effect would be like never-ending interchangeable between two images. (Did I make sense? 😅)

Any idea? Thank you so much for any suggestion 🙂

> please format code with \</\> button \* [homework policy](https://discourse.processing.org/faq/#homework) \* [asking questions](https://discourse.processing.org/t/2147)

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [May 29, 2020, 2:41pm UTC](https://discourse.processing.org/t/please-help-with-set-and-get/21403/2 "2020-05-29T14:41:44Z")

</div>

You could set the pixels of a `createGraphics()` so that you are able to easily transition the image back to default. As is, you are setting the pixels of the image so there is no way of getting that original pixel data back, unless you cache it off on run.

here is an example to get you going … i am using `setInterval()` to toggle a boolean that determines which pixels to get. Then in draw just check the state of that boolean and set pixels accordingly.

```auto
let img,
  g,
  toggleImageToDraw = false;

function preload() {
  img = loadImage('potrait.png');
}

function setup() {
  createCanvas(1000, 500);
  g = createGraphics(500, 500);
  setInterval(_ => {
    toggleImageToDraw = !toggleImageToDraw;
  }, 10000);
}

function draw() {
  let x1 = random(0, 300);
  let y1 = random(0, height);

  let x2 = x1 + 500;
  let w = 200;
  let h = height / 100;

  if (!toggleImageToDraw) {
    g.set(x1, y1, img.get(x2, y1, w, h));
  } else {
    g.set(x1, y1, img.get(x1, y1, w, h));
  }

  image(g, 0, 0);
}

```

---

<div class="post-metadata">

**Author:** ![noob](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noob/32/5541_2.png) [@noob](https://discourse.processing.org/u/noob)\
**Post date:** [May 29, 2020, 3:11pm UTC](https://discourse.processing.org/t/please-help-with-set-and-get/21403/3 "2020-05-29T15:11:08Z")

</div>

Ohhhh!! Thank you for your suggestion to use `createGraphic()`. I can see this would solve the problem.

Anyway, your solutions is really good too, but I am bit confuse with the `setInterval()` Would you mind to explain to me this line code:

```auto
 setInterval(_ => {
    toggleImageToDraw = !toggleImageToDraw;
  }, 10000);

```

---

<div class="post-metadata">

**Author:** ![slow\_izzm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/slow_izzm/32/5637_2.png) [@slow\_izzm](https://discourse.processing.org/u/slow_izzm)\
**Post date:** [May 29, 2020, 3:39pm UTC](https://discourse.processing.org/t/please-help-with-set-and-get/21403/4 "2020-05-29T15:39:52Z")

</div>

I am using `setInterval()` to toggle my boolean `toggleImageToDraw` every 10 seconds …

`setInterval()` calls a function every so many specified milliseconds …

[https://www.w3schools.com/jsref/met\_win\_setinterval.asp](https://www.w3schools.com/jsref/met_win_setinterval.asp)  
[https://www.w3schools.com/js/js\_arrow\_function.asp](https://www.w3schools.com/js/js_arrow_function.asp)