# Draw a line from center to mouse with vector

**URL:** <https://discourse.processing.org/t/draw-a-line-from-center-to-mouse-with-vector/12729>\
**Category:** Coding Questions\
**Created:** [July 15, 2019, 8:51pm UTC](https://discourse.processing.org/t/draw-a-line-from-center-to-mouse-with-vector/12729 "2019-07-15T20:51:13Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Erjaeger](https://avatars.discourse-cdn.com/v4/letter/e/57b2e6/32.png) [@Erjaeger](https://discourse.processing.org/u/Erjaeger)\
**Post date:** [July 15, 2019, 8:51pm UTC](https://discourse.processing.org/t/draw-a-line-from-center-to-mouse-with-vector/12729/1 "2019-07-15T20:51:13Z")

</div>

Hi everyone,

I’m reading The Nature of Code but I stuck with a stupid question on vector.  
I tried to make a line drawn from the center of the screen to my mouse with the help of vectors.  
Here : [https://editor.p5js.org/Erjaeger42/sketches/TfeqmxjEw](https://editor.p5js.org/Erjaeger42/sketches/TfeqmxjEw)

```auto
  const center = createVector(width/2, height/2);
  const mouse = createVector(mouseX, mouseY);
  const test = p5.Vector.sub(mouse,center);
  
  stroke("blue")
  line(0, 0, center.x, center.y);
  
  stroke("green")
  line(0, 0, mouse.x, mouse.y);
  
  stroke("red")
  line(center.x, center.y, test.x, test.y);

```

I have a working version when I use a translate(width/2, height/2) and line(0,0…) but I don’t understand why I have to use a translate and not just use line(width/2, height/2, …).  
When I do that I have some strange result. I made some research but I haven’t find something useful. I would like to really understand that before moving along. So I wish you can help me !

When I use the line(center.x, center.y, test.x, test.y); it’s look like the origin is on the bottom right… I really don’t understand.

Thx for your help,  
Bye.

---

<div class="post-metadata">

**Author:** ![madscientist](https://avatars.discourse-cdn.com/v4/letter/m/f19dbf/32.png) [@madscientist](https://discourse.processing.org/u/madscientist)\
**Post date:** [July 15, 2019, 10:11pm UTC](https://discourse.processing.org/t/draw-a-line-from-center-to-mouse-with-vector/12729/2 "2019-07-15T22:11:40Z")

</div>

Why bother with Vectors?  
Just use this:

```auto
function setup() {
  createCanvas(640, 480);
}
function draw() {
  background(220);
  
  line(width/2,height/2,mouseX,mouseY);
}                                                                                                                                                                                                         

```

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [July 15, 2019, 10:30pm UTC](https://discourse.processing.org/t/draw-a-line-from-center-to-mouse-with-vector/12729/3 "2019-07-15T22:30:36Z")

</div>

Hey there Erjaeger,

In your code it won’t make much of a difference, but in some scenarios it can be handy to use translate instead of calculating the x/y positioning elsewhere. I’m certain you’re going to stumble upon more translate examples throughout the Nature of Code tutorials, so for now I wouldn’t worry too much about it.

I’m not familiar yet with _p5.Vector.sub_, but if you use the code below you can make an estimated guess through observing the red line’s behaviour when you move the mouse around.

```auto
function setup() {
  createCanvas(640, 480);  
}

function draw() {
  background(220);  
  translate(width/2, height/2);
  
  const center = createVector(width/2, height/2);
  const mouse = createVector(mouseX, mouseY);
  const test = p5.Vector.sub(mouse,center);  
  
  stroke("blue")
  line(0, 0, -width/2, -height/2);  
  
  stroke("green")
  line(0, 0, mouse.x, mouse.y);
  
  stroke("red")
  line(0, 0, test.x, test.y);
}

```

Perhaps this post [How to use p5.Vector?](https://forum.processing.org/two/discussion/15934/how-to-use-p5-vector) is interesting for you as well, where _add_ is used instead of _sub_ 🙂

Best of luck.

---

<div class="post-metadata">

**Author:** ![Erjaeger](https://avatars.discourse-cdn.com/v4/letter/e/57b2e6/32.png) [@Erjaeger](https://discourse.processing.org/u/Erjaeger)\
**Post date:** [July 16, 2019, 7:57am UTC](https://discourse.processing.org/t/draw-a-line-from-center-to-mouse-with-vector/12729/4 "2019-07-16T07:57:30Z")

</div>

Thank you both for your answers.

@madscientist I could do it with just a line, but the point is to use the vector, to have access to normalize, magnitude, etc…

@Tiemen  
Thank you for your constructive answer. Yes I certainly find translate many more time in the book, but I would like to understand the basic stuff before dive in more complicated exemple. I still have some difficulties to see the difference between the translate and the line(width/2, height/2…)

I’l make more research

---

<div class="post-metadata">

**Author:** ![hellonearthis](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hellonearthis/32/3482_2.png) [@hellonearthis](https://discourse.processing.org/u/hellonearthis)\
**Post date:** [July 16, 2019, 9:06am UTC](https://discourse.processing.org/t/draw-a-line-from-center-to-mouse-with-vector/12729/5 "2019-07-16T09:06:38Z")

</div>

Do console.log or print() to display the variables.  
MouseX / Y is not confined to the canvas area.

---

<div class="post-metadata">

**Author:** ![Erjaeger](https://avatars.discourse-cdn.com/v4/letter/e/57b2e6/32.png) [@Erjaeger](https://discourse.processing.org/u/Erjaeger)\
**Post date:** [July 16, 2019, 9:53am UTC](https://discourse.processing.org/t/draw-a-line-from-center-to-mouse-with-vector/12729/6 "2019-07-16T09:53:25Z")

</div>

Found it !

The sub values is calculated from 0,0. So the substraction gives negative values.  
If I want to change the origin of my vector with line(width/2, height/2,…) I have to add width/2, height/2 to my vector values.

If I do,

```auto
function setup() {
  createCanvas(640, 480);
}

function draw() {
  background(220);
  
  const center = createVector(width/2, height/2);
  const mouse = createVector(mouseX, mouseY);
  const test = p5.Vector.sub(mouse,center);
  
  stroke("blue")
  line(0, 0, center.x, center.y);
  
  stroke("green")
  line(0, 0, mouse.x, mouse.y);
  
  stroke("red")
  line(center.x, center.y, test.x+width/2, test.y+height/2);
}

```

it will works.