# Changing shapes for mouseX movement

**URL:** https://discourse.processing.org/t/changing-shapes-for-mousex-movement/30889
**Category:** Coding Questions
**Created:** [June 24, 2021, 3:52pm UTC](https://discourse.processing.org/t/changing-shapes-for-mousex-movement/30889 "2021-06-24T15:52:48Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![afuria](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@afuria](https://discourse.processing.org/u/afuria)
#### Post date: [June 24, 2021, 3:52pm UTC](https://discourse.processing.org/t/changing-shapes-for-mousex-movement/30889/1 "2021-06-24T15:52:48Z")

</div>

Hello, I am new to P5.js and have made a simple sketch with an ellipse shape that follows the mouseX movement.

I would like to understand how to draw a different shape at mouseX based on three different mouseX movements on the canvas:

- if mouseX is moving left from its previous mouseX coordinate then draw an ellipse at mouseX
- if mouseX is moving right from its previous mouseX coordinate then draw a rect at mouseX
- if mouseX is not moving at all from its previous mouseX coordinate then draw a triangle at mouseX

Thank you!

---

<div class="post-metadata">

### Author: ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [June 24, 2021, 4:36pm UTC](https://discourse.processing.org/t/changing-shapes-for-mousex-movement/30889/2 "2021-06-24T16:36:18Z")

</div>

Hello, @afuria, and welcome to the Processing community!

Would you be able to post the code that you have thus far? This will help us help you. 😃

Is this homework?

---

<div class="post-metadata">

### Author: ![afuria](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@afuria](https://discourse.processing.org/u/afuria)
#### Post date: [June 24, 2021, 6:23pm UTC](https://discourse.processing.org/t/changing-shapes-for-mousex-movement/30889/3 "2021-06-24T18:23:29Z")

</div>

Thanks for the welcome and your response @javagar! No, not homework, just a designer looking to have fun with code 🙂

Here is where i’m at:

function setup() {  
createCanvas(600, 400);  
}

function draw() {  
background(220);  
fill(0);  
noStroke();

var x = mouseX;  
var size = 50;

ellipse(x, 300, size, size);  
}

Would like to: draw the ellipse as mouse moves left, draw a rect as mouse moves right, and draw a triangle if there is no mouse movement.

many thanks!

---

<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 24, 2021, 9:21pm UTC](https://discourse.processing.org/t/changing-shapes-for-mousex-movement/30889/4 "2021-06-24T21:21:53Z")

</div>

Hello @afuria

Sooo, **this is not a solution,** but it _may be_(?) a prompt in how to start to think about an approach to a solution…  
Includes 2 states but not a third transitional triangle state, plus the tracking across the screen is not proper.

Code is in processing…

//////////////////////////////////////////

```auto
void setup() {
  size(600, 400);
}

void draw() {
  background(255);
  noFill();
  strokeWeight(3);
  rectMode(CENTER);

  float m = map(mouseX, 300, 600, 0, 600);
  float n = map(mouseX, 0, 300, 600, 0);
  int sz = 75;

  if (mouseX >= width/2) {
    ellipse(m, height/2, sz, sz);
  } else if (mouseX <= width/2) {
    rect(n, height/2, sz, sz);
  }
}

```

🤓

---

<div class="post-metadata">

### Author: ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)
#### Post date: [June 25, 2021, 12:56am UTC](https://discourse.processing.org/t/changing-shapes-for-mousex-movement/30889/5 "2021-06-25T00:56:28Z")

</div>

Hi @afuria,

Here’s some p5.js code that you can copy and modify. Try to add what is necessary to draw the triangle, and refine the rest to suit your needs and taste.

```auto
let curr_x, prev_x, size;
function setup() {
  createCanvas(600, 400);
  curr_x = width / 2;
  prev_x = curr_x;
  size = 50;
  rectMode(CENTER);
}

function draw() {
  /*
    - ellipse as mouse moves left
    - rect as mouse moves right
    - triangle if there is no mouse movement
  */
  background(220);
  fill(0);
  noStroke();
  prev_x = curr_x;
  curr_x = mouseX;
  if (curr_x < prev_x) {
    ellipse(curr_x, mouseY, size, size);
  } else if (curr_x > prev_x) {
    rect(curr_x, mouseY, size, size);
  } else {
    // draw triangle (for you to complete :) )
  }
}

```

---

<div class="post-metadata">

### Author: ![afuria](https://avatars.discourse-cdn.com/v4/letter/a/ecd19e/32.png) [@afuria](https://discourse.processing.org/u/afuria)
#### Post date: [June 25, 2021, 2:11am UTC](https://discourse.processing.org/t/changing-shapes-for-mousex-movement/30889/6 "2021-06-25T02:11:01Z")

</div>

Thanks @javagar, perfect!