# MouseX with cursor

**URL:** <https://discourse.processing.org/t/mousex-with-cursor/33630>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [November 20, 2021, 12:48pm UTC](https://discourse.processing.org/t/mousex-with-cursor/33630 "2021-11-20T12:48:10Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Caseyo](https://avatars.discourse-cdn.com/v4/letter/c/bcef8e/32.png) [@Caseyo](https://discourse.processing.org/u/Caseyo)\
**Post date:** [November 20, 2021, 12:48pm UTC](https://discourse.processing.org/t/mousex-with-cursor/33630/1 "2021-11-20T12:48:10Z")

</div>

\<void setup(){  
size(600,800);  
background(0,0,80);

}  
void draw() {  
float x = mouseX;

background(0,0,80);  
fill(150,100,0);  
rect(width/2,height/2,150,150);  
if(x\<300){  
fill(0,0,80);  
rect(x,400,150,150);  
} else if (x\>300) {  
fill(0,0,80);  
ellipse(x,400,150,150);  
}  
else {  
fill(150,100,0);  
}  
ellipse(300,400,150,150);  
}

> 

button \* [homework policy](https://discourse.processing.org/faq/#homework) \*  
[I want to create two rect,one will be like another’s shadow One is orange and one is black Black will cover orange so I put mouseX but what I’m struggling is that I want the black will be on left if my cusor is right Can someone help me?]  
(/t/2147)

---

<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:** [November 20, 2021, 1:09pm UTC](https://discourse.processing.org/t/mousex-with-cursor/33630/2 "2021-11-20T13:09:22Z")

</div>

not fully clear, but here is an example

```auto

void setup() {
  size(600, 800);
  background(0, 0, 80);
}

void draw() {
  background(0, 0, 80);

  //Left rec
  if (mouseX<300) {
    fill(150, 100, 0);
  } else {
    fill(0, 0, 0);
  }
  rect(33, 400, 150, 150);

  //Right rec
  if (mouseX>300) {
    fill(255);
  } else {
    fill(0, 0, 0);
  }
  rect(width/2, height/2, 150, 150);
  //
}
//

```

---

<div class="post-metadata">

**Author:** ![Caseyo](https://avatars.discourse-cdn.com/v4/letter/c/bcef8e/32.png) [@Caseyo](https://discourse.processing.org/u/Caseyo)\
**Post date:** [November 20, 2021, 1:45pm UTC](https://discourse.processing.org/t/mousex-with-cursor/33630/4 "2021-11-20T13:45:24Z")

</div>

Thanks for the answer and sorry for not being not so clear in question.  
According to the homework, the rectangle must be in center. Implement a  
“shadow” for the black rectangle that moves based on the mouse cursor position.  
Note that the side of the rectangle closer to the cursor should  
remain orange, while the side in shadow should be the same color as the background.

---

<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:** [November 20, 2021, 3:44pm UTC](https://discourse.processing.org/t/mousex-with-cursor/33630/5 "2021-11-20T15:44:21Z")

</div>

I see

You need to draw shadow first then rectangle I guess

---

<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:** [November 20, 2021, 4:30pm UTC](https://discourse.processing.org/t/mousex-with-cursor/33630/7 "2021-11-20T16:30:37Z")

</div>

Hello,

Lots of resources here:

> **[Welcome to Processing!](https://processing.org)**
>
> Processing is a flexible software sketchbook and a language for learning how to code within the context of the visual arts. Since 2001, Processing has promoted software literacy within the visual arts…

Take a look here:

> **[Reference](https://processing.org/reference/logicalAND.html)**
>
> Compares two expressions and returns true only if both evaluate to true. Returns false if one or both evaluate to false. The following list shows all possible combinations:…

`:)`

---

<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:** [November 20, 2021, 5:27pm UTC](https://discourse.processing.org/t/mousex-with-cursor/33630/8 "2021-11-20T17:27:06Z")

</div>

the orange one doesn’t appear when cursor is on middle:

> [@Caseyo](#):
>
> if (x\<300) {

could you please make this \<=

---

<div class="post-metadata">

**Author:** ![Caseyo](https://avatars.discourse-cdn.com/v4/letter/c/bcef8e/32.png) [@Caseyo](https://discourse.processing.org/u/Caseyo)\
**Post date:** [November 21, 2021, 6:17am UTC](https://discourse.processing.org/t/mousex-with-cursor/33630/9 "2021-11-21T06:17:21Z")

</div>

Thanks  
Finally I got it

---

<div class="post-metadata">

**Author:** ![Caseyo](https://avatars.discourse-cdn.com/v4/letter/c/bcef8e/32.png) [@Caseyo](https://discourse.processing.org/u/Caseyo)\
**Post date:** [November 21, 2021, 6:18am UTC](https://discourse.processing.org/t/mousex-with-cursor/33630/10 "2021-11-21T06:18:01Z")

</div>

Thanks TwT  
I made the distance +and - and  
Finally got it ^=^

---

<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:** [November 21, 2021, 8:06am UTC](https://discourse.processing.org/t/mousex-with-cursor/33630/11 "2021-11-21T08:06:22Z")

</div>

Would look nicer when shadow moves continually

Try

x = map(mouseX, 0, width, -60,60);

---

<div class="post-metadata">

**Author:** ![Caseyo](https://avatars.discourse-cdn.com/v4/letter/c/bcef8e/32.png) [@Caseyo](https://discourse.processing.org/u/Caseyo)\
**Post date:** [November 29, 2021, 6:29am UTC](https://discourse.processing.org/t/mousex-with-cursor/33630/12 "2021-11-29T06:29:03Z")

</div>

that’s really works thank