# Who can help me, how to place and object when mouse is clicked (SOLVED)

**URL:** https://discourse.processing.org/t/who-can-help-me-how-to-place-and-object-when-mouse-is-clicked-solved/30492
**Category:** Coding Questions
**Tags:** homework
**Created:** [June 4, 2021, 4:24pm UTC](https://discourse.processing.org/t/who-can-help-me-how-to-place-and-object-when-mouse-is-clicked-solved/30492 "2021-06-04T16:24:09Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![Hisoka](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hisoka/32/13534_2.png) [@Hisoka](https://discourse.processing.org/u/Hisoka)
#### Post date: [June 4, 2021, 4:24pm UTC](https://discourse.processing.org/t/who-can-help-me-how-to-place-and-object-when-mouse-is-clicked-solved/30492/1 "2021-06-04T16:24:09Z")

</div>

when I click on the mouse, the figure should be placed on the position  
that I clicked. After click, the logo should not be moved on the tips of the mouse  
point and should stay still on the position that the mouse was clicked.

void setup(){  
size(500,500);  
}

void draw(){

background(255);  
stroke(0);  
strokeWeight(20);  
ellipse(mouseX,mouseY+130,380,250);

stroke(0);  
strokeWeight(20);  
ellipse(mouseX,mouseY+130,100,250);

stroke(0);  
strokeWeight(20);  
noFill();  
ellipse(mouseX,mouseY+50,230,90);

if (mousePressed){  
background(255);  
stroke(0);  
strokeWeight(20);  
ellipse(mouseX,mouseY+130,380,250);

stroke(0);  
strokeWeight(20);  
ellipse(mouseX,mouseY+130,100,250);

stroke(0);  
strokeWeight(20);  
noFill();  
ellipse(mouseX,mouseY+50,230,90);

}

}

---

<div class="post-metadata">

### Author: ![JSGauthier](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jsgauthier/32/9910_2.png) [@JSGauthier](https://discourse.processing.org/u/JSGauthier)
#### Post date: [June 4, 2021, 4:59pm UTC](https://discourse.processing.org/t/who-can-help-me-how-to-place-and-object-when-mouse-is-clicked-solved/30492/2 "2021-06-04T16:59:38Z")

</div>

Hello there,

Your are almost there! Technically you are doing what you want. You are placing your drawing every click at the moment. However, you are then drawing background() over it immediatly.

You can solve this easily.

In the code you are using mouseX, mouseY values to draw each element in sequence during your draw() loop. However, because you are redrawing each element using mouseX, mouseY, they will always show up at those locations everytime draw() loops. If you create a new set of values that only change when you click your mouse, you will have a solution. Then you must not redraw over that image until you have clicked again.

This tutorial will help you learn how to retain mouseX, mouseY’s values and apply them only once you have clicked.

[Interactivity Casey Reas and Ben Fry](https://processing.org/tutorials/interactivity/)

_A sidenote: on your use of stroke(), strokeWeight(), and noFill():_

You only need to apply stroke(), strokeWeight(), and noFill() once. Once these settings are assigned they apply to all subsequent code.  
If you want, and without changing the result of your code, you can even comment out all of these lines:  
12,14,16,17,18, 22, 27, 28, 31, and 32 (by adding using // before each line or the _key shortcut cmd+/_ )

Keep at it.

-jsg

---

<div class="post-metadata">

### Author: ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)
#### Post date: [June 4, 2021, 5:06pm UTC](https://discourse.processing.org/t/who-can-help-me-how-to-place-and-object-when-mouse-is-clicked-solved/30492/3 "2021-06-04T17:06:25Z")

</div>

Hello,

Welcome.

Please format your code as a courtesy to the community:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

There are lots of resources (tutorials, references, examples, etc.) here:  
_[processing.org](http://processing.org/)_

Check out the examples that come with Processing.  
These are in the menu under _File \> Examples…\>_ :

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/35f05e0e0227932c25f0c7f86269d86609c2c294.png)

Also check out:

- YouTube for the [Coding Train](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw).
- [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)
- [https://funprogramming.org/](https://funprogramming.org/)

`:)`

---

<div class="post-metadata">

### Author: ![debxyz](https://avatars.discourse-cdn.com/v4/letter/d/58956e/32.png) [@debxyz](https://discourse.processing.org/u/debxyz)
#### Post date: [June 4, 2021, 9:28pm UTC](https://discourse.processing.org/t/who-can-help-me-how-to-place-and-object-when-mouse-is-clicked-solved/30492/4 "2021-06-04T21:28:48Z")

</div>

Hello @Hisoka

1/ **move background function** into setup, **and remove** from draw() and mousePressed(). Look up **background()** in the reference

> **[background() / Reference](https://processing.org/reference/background_.html)**
>
> The background() function sets the color used for the background of the Processing window. The default background is light gray. This function is typically used within draw() to clear th…

for an explanation on how the placement of background function works.

2/ you have duplicate blocks of code in draw() and in mousePressed()

> [@Hisoka](#):
>
> ```auto
> stroke(0);
> strokeWeight(20);
> ellipse(mouseX,mouseY+130,380,250);
> 
> stroke(0);
> strokeWeight(20);
> ellipse(mouseX,mouseY+130,100,250);
> 
> stroke(0);
> strokeWeight(20);
> noFill();
> ellipse(mouseX,mouseY+50,230,90);
> 
> ```

These only need to appear once in your code. Remove from draw().

3/ As @JSGauthier noted, you need only to write stroke(0); and strokeWeight(20); once. The code will continue to use those arguments until the end of your code run.

I hope this helps,  
🤓

---

<div class="post-metadata">

### Author: ![Hisoka](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hisoka/32/13534_2.png) [@Hisoka](https://discourse.processing.org/u/Hisoka)
#### Post date: [June 6, 2021, 4:41am UTC](https://discourse.processing.org/t/who-can-help-me-how-to-place-and-object-when-mouse-is-clicked-solved/30492/5 "2021-06-06T04:41:52Z")

</div>

Thank you! I rearrange the code like this

```auto
void setup(){
size(500,500);
}

void draw(){
  
background(255);
stroke(0);
strokeWeight(20);
ellipse(mouseX,mouseY+130,380,250);
ellipse(mouseX,mouseY+130,100,250);
noFill();
ellipse(mouseX,mouseY+50,230,90);

} 

```

It is the “TOYOTA” logo I made, but know I read the article you sent me about “mousePressed” and mic functions, but I still don’t know t how to do when I click on the mouse, the figure should be placed on the position  
that I clicked and after click, the logo should not be moved on the tips of the mouse  
point and should stay still on the position that the mouse was clicked.

```auto
int dragX, dragY, moveX, moveY;

void setup() {
  size(500, 500);
  noStroke();
}

void draw() {
  
  background(255);
  stroke(0);
  strokeWeight(20);
  ellipse(dragX,dragY+130,380,250);
  ellipse(dragX,dragY+130,100,250);
  noFill();
  ellipse(dragX,dragY+50,230,90);
}

void mousePressed() {
  dragX = mouseX;
  dragY = mouseY;
}

```

Know I know how to put in the position when mouse clicked but I still don’t get what I need ☹  
Could you give me a hint please 🙂  
@debxyz

---

<div class="post-metadata">

### Author: ![Hisoka](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hisoka/32/13534_2.png) [@Hisoka](https://discourse.processing.org/u/Hisoka)
#### Post date: [June 6, 2021, 4:07pm UTC](https://discourse.processing.org/t/who-can-help-me-how-to-place-and-object-when-mouse-is-clicked-solved/30492/7 "2021-06-06T16:07:28Z")

</div>

Don’t worry guys, Update: I solved it! 😀 😀
