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

Processing Coding Questions
1

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);

}

}

2

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

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

2 Likes
3

Hello,

Welcome.

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

There are lots of resources (tutorials, references, examples, etc.) here:
processing.org

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

image

Also check out:

:)

2 Likes
4

Hello @Hisoka

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

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

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

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,
:nerd_face:

2 Likes
5

Thank you! I rearrange the code like this

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.

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 :frowning:
Could you give me a hint please :slight_smile:
@debxyz

7

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

3 Likes