# Mirror-drawing and following mouse

**URL:** <https://discourse.processing.org/t/mirror-drawing-and-following-mouse/11661>\
**Category:** Coding Questions\
**Created:** [May 28, 2019, 2:10pm UTC](https://discourse.processing.org/t/mirror-drawing-and-following-mouse/11661 "2019-05-28T14:10:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![linebp](https://avatars.discourse-cdn.com/v4/letter/l/6f9a4e/32.png) [@linebp](https://discourse.processing.org/u/linebp)\
**Post date:** [May 28, 2019, 2:10pm UTC](https://discourse.processing.org/t/mirror-drawing-and-following-mouse/11661/1 "2019-05-28T14:10:15Z")

</div>

Hello Processing forum,  
I’m trying to create a programme where I can draw mirrored lines. My code looks like this:

```auto
void setup() {
  fullScreen();
  background(255);
  noStroke();
  translate (width/2, 0);
  
}

void draw() {
  //if (mousePressed) {
translate (width/2, 0);
rotate(0.75);
  stroke(0, 0, 255);
  strokeWeight(20);
  line(mouseX, mouseY, pmouseX, pmouseY);
  stroke(0, 0, 255);
  line(mouseY, mouseX, pmouseY, pmouseX);
 
}

```

It goes quite well, but i’m struggling with making the line follow the mouse cursor and not just random

I would also like for the line to be drawn somewhat from the center - right now it’s only able to draw in the triangle-shaped area showed on the image below.  
 ![44](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/aba063bc70875d7bc6b6785013fd30f440ca9b17.png)

I hope that you’re able to help, Kind regards.

---

<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:** [May 29, 2019, 1:04am UTC](https://discourse.processing.org/t/mirror-drawing-and-following-mouse/11661/2 "2019-05-29T01:04:55Z")

</div>

with using mouse position,  
translate and rotate makes it very difficult.

possibly better start without,  
and try only to draw ( let’s say left side of canvas )

when that is working, think how can do a “mirror” copy of that left half,  
see [https://processing.org/reference/loadPixels\_.html](https://processing.org/reference/loadPixels_.html)

---

<div class="post-metadata">

**Author:** ![InferNova](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/infernova/32/6009_2.png) [@InferNova](https://discourse.processing.org/u/InferNova)\
**Post date:** [May 30, 2019, 11:50am UTC](https://discourse.processing.org/t/mirror-drawing-and-following-mouse/11661/3 "2019-05-30T11:50:44Z")

</div>

Hey There!

What I would propose as your solution is to build a nodes linking system and whenever u you join nodes a mirror of those appears on the screen. It is not fully what you want as it doesn’t utilize the drawing you have it but you can make it work.

---

<div class="post-metadata">

**Author:** ![LittleBoxes](https://avatars.discourse-cdn.com/v4/letter/l/ee59a6/32.png) [@LittleBoxes](https://discourse.processing.org/u/LittleBoxes)\
**Post date:** [May 30, 2019, 4:31pm UTC](https://discourse.processing.org/t/mirror-drawing-and-following-mouse/11661/4 "2019-05-30T16:31:56Z")

</div>

If i understood correctly your problem, I can propose this :  
just draw your first line and then draw the mirror line by calculate the coordinates of the ends of the mirror line (a simple subtraction is enough for this calculation)

I just tried try it with p5js and it works

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 3, 2019, 12:23am UTC](https://discourse.processing.org/t/mirror-drawing-and-following-mouse/11661/5 "2019-06-03T00:23:55Z")

</div>

I think you are trying to do mirror-drawing like this:

```auto
line(mouseX, mouseY, pmouseX, pmouseY);
line(width-mouseX, mouseY, width-pmouseX, pmouseY);

```

You might want to think about this in the simpler case with shapes to see why / how it works.

```auto
void draw(){
  rectMode(CENTER);
  rect(mouseX, mouseY, 10, 10);
  rect(width-mouseX, mouseY, 10, 10);
}

```

Notice that you could do this for different kinds of mirroring. Here is another:

```auto
void draw(){
  rectMode(CENTER);
  rect(mouseX, mouseY, 10, 10);
  rect(mouseX, height-mouseY, 10, 10);
}

```

…and another. Notice the pattern?

```auto
void draw(){
  rectMode(CENTER);
  rect(mouseX, mouseY, 10, 10);
  rect(width-mouseX, height-mouseY, 10, 10);
}

```

If we know the mouse position measured from the left / top edges, then we know enough to describe a symmetrical position “from the opposite edge.” Subtracting from width, height, or both is how you find that opposite location from the right, bottom, or both – just as you would if you were plotting on paper.