# Persistent Shape with Mouse?

**URL:** <https://discourse.processing.org/t/persistent-shape-with-mouse/14739>\
**Category:** Coding Questions\
**Created:** [October 16, 2019, 1:07pm UTC](https://discourse.processing.org/t/persistent-shape-with-mouse/14739 "2019-10-16T13:07:08Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![yangs](https://avatars.discourse-cdn.com/v4/letter/y/8c91f0/32.png) [@yangs](https://discourse.processing.org/u/yangs)\
**Post date:** [October 16, 2019, 1:07pm UTC](https://discourse.processing.org/t/persistent-shape-with-mouse/14739/1 "2019-10-16T13:07:08Z")

</div>

Hi all!

I suppose I’m not quite understanding the relationship between `setup` and `draw` and how to keep things persistent based on how the background is rendered. I was wondering how to keep something persistent with the mouse.

On every refresh/reload of this project, a new background image comes up, generated from the array in `preload` and the user can click randomly colored dots wherever they choose. This works but I was wondering how to keep the dot _with_ the mouse cursor, instead of it just appearing with the mouse click. I’ve been able to get that functionality technically but it drags the dots all over the image, as if it was a brush and I was drawing with it.

Does anyone have some tips on how to remember how rendering works and/or tips on how to get this working? Thank you!

````auto
let retro;

function preload() {
  let img = ['./photo_1.jpg', './photo_2.jpg', './photo_3.jpg', './photo_4.jpg'];
  let pos = floor(random(img.length));
  retro = loadImage(img[pos]);
}

function setup() {
  createCanvas(720, 700);
  background(retro);
}

function mousePressed() {
  let colors = [color('blue'), color('yellow'), color('green'), color('red')];
  let pickedColor = random(colors);
  fill(pickedColor);
  noStroke();
  ellipse(mouseX, mouseY, 50, 50);
}```
````

---

<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:** [October 16, 2019, 7:17pm UTC](https://discourse.processing.org/t/persistent-shape-with-mouse/14739/2 "2019-10-16T19:17:27Z")

</div>

- setup () runs only once

- draw() runs on and on - everything that is permanent needs to be drawn here

- mousePressed is only called once when you click the mouse

Therefore you need to draw in draw()

---

<div class="post-metadata">

**Author:** ![yangs](https://avatars.discourse-cdn.com/v4/letter/y/8c91f0/32.png) [@yangs](https://discourse.processing.org/u/yangs)\
**Post date:** [October 16, 2019, 8:54pm UTC](https://discourse.processing.org/t/persistent-shape-with-mouse/14739/3 "2019-10-16T20:54:38Z")

</div>

Thanks! I haven’t played around with your suggestion yet but the issue with `draw` that I encountered was that the circle attached to the mouse cursor would constantly draw, instead of just being a circle attached to the cursor. Does that make sense?

---

<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:** [October 16, 2019, 8:58pm UTC](https://discourse.processing.org/t/persistent-shape-with-mouse/14739/4 "2019-10-16T20:58:27Z")

</div>

> [@yangs](#):
>
> the mouse cursor would constantly draw

you need to delete the canvas in draw:

(example in processing java)

```auto
void setup() {
  // init
  size(1200, 600, P3D);
  background(255);
} // func 

void draw() {
  // runs on and on 
  background(255);

  fill(255, 0, 0);
  ellipse(mouseX, mouseY, 
    5, 5);
} // func

```

---

<div class="post-metadata">

**Author:** ![yangs](https://avatars.discourse-cdn.com/v4/letter/y/8c91f0/32.png) [@yangs](https://discourse.processing.org/u/yangs)\
**Post date:** [October 17, 2019, 8:52am UTC](https://discourse.processing.org/t/persistent-shape-with-mouse/14739/5 "2019-10-17T08:52:55Z")

</div>

Ah, didn’t explain my issue clearly enough – I would like the circles to actually be drawn once, like stickers! So the behavior would be `ellipse` attached to mouse cursor but when the user clicks, it will be placed down. When I took your advice to put the background in `draw`, it did have the persistent mouse cursor behavior i was looking for but no longer placed down the circle.

Thanks for your help so far! I’m sure I’m just missing something obvious.

---

<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:** [October 17, 2019, 9:04am UTC](https://discourse.processing.org/t/persistent-shape-with-mouse/14739/6 "2019-10-17T09:04:00Z")

</div>

No, it’s not obvious.

It has to do with the usage of `background(255);` at beginning of draw().

Here is a solution that has background(255); and stores the points and draws them throughout.

```auto

ArrayList<PVector> points = new ArrayList ();

void setup() { 
  size(800, 800);
}// function 

void draw() { 
  background(255); 

  fill(255, 0, 0);
  text("Hello ", 19, 19);

  ellipse(mouseX, mouseY, 
    4, 4);

  fill(2, 0, 230);
  for (int i = 0; i<points.size(); i++) {
    PVector pv1 = points.get(i);
    ellipse(pv1.x, pv1.y, 4, 4);
  }//for
}// function draw()

void mousePressed() {
  points.add(new PVector(mouseX, mouseY));
}// function

```

---

<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 17, 2019, 9:19am UTC](https://discourse.processing.org/t/persistent-shape-with-mouse/14739/7 "2019-10-17T09:19:22Z")

</div>

difficult to understand,  
could you possibly talk about this?  
[https://editor.p5js.org/kll/sketches/LEIpcL5uO](https://editor.p5js.org/kll/sketches/LEIpcL5uO)

---

<div class="post-metadata">

**Author:** ![yangs](https://avatars.discourse-cdn.com/v4/letter/y/8c91f0/32.png) [@yangs](https://discourse.processing.org/u/yangs)\
**Post date:** [October 21, 2019, 2:49am UTC](https://discourse.processing.org/t/persistent-shape-with-mouse/14739/8 "2019-10-21T02:49:03Z")

</div>

Yes, this is closet! I was envisioning the circle attached to the cursor to be randomly filled, however. Regardless, this is a good start!

@Chrisir thanks! Is it necessary to store the points, as a general rule of thumb?

---

<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 21, 2019, 3:04am UTC](https://discourse.processing.org/t/persistent-shape-with-mouse/14739/9 "2019-10-21T03:04:36Z")

</div>

hi, please you need to understand that we are talking here about two very different  
approaches, i call it

- paint job  
i used a image “layer” by `layer = createGraphics(720,400); `  
where at mouse click the random colored circles are stored ( painted in )

- draw job  
while @Chrisir stores the mouseclicks ( position ) in a list ( and uses a JAVA program here you need to translate )  
and at `draw()`  
the `background()` cleans all  
and a FOR loop draws all circles from the positions array.

i hope you see the very different ways to do it.

how to discuss the differences / advantages?  
in a paint job you can clear all as show in my code,  
but you would not be able “forget” single events ( like the delete the oldest when make a new circle )  
what i very well possible with a array approach.

* * *

> [@yangs](#):
>
> I was envisioning the circle attached to the cursor to be randomly filled

i not like that filled as i not see where i am painting over,  
but that you see the random color already ( now i use it in stroke )  
is a very good idea.  
please check my ( revised ) link again