# Circle edge on mouse coordinates and increased size the father it gets from canvas center

**URL:** https://discourse.processing.org/t/circle-edge-on-mouse-coordinates-and-increased-size-the-father-it-gets-from-canvas-center/1847
**Category:** Coding Questions
**Created:** [July 17, 2018, 9:53am UTC](https://discourse.processing.org/t/circle-edge-on-mouse-coordinates-and-increased-size-the-father-it-gets-from-canvas-center/1847 "2018-07-17T09:53:31Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![mattwonderwall](https://avatars.discourse-cdn.com/v4/letter/m/ee7513/32.png) [@mattwonderwall](https://discourse.processing.org/u/mattwonderwall)
#### Post date: [July 17, 2018, 9:53am UTC](https://discourse.processing.org/t/circle-edge-on-mouse-coordinates-and-increased-size-the-father-it-gets-from-canvas-center/1847/1 "2018-07-17T09:53:31Z")

</div>

I’ve just started programming and wanted to get a perfect circle edge to jump to the mouse edge. So the center of the circle would be the center of the canvas, and the closer you get to it, the smaller the circle gets and vice versa, when your mouse enters a given point at the edge of the canvas, the circle size is increased.

I’ve gotten a somewhat reversed effect of this (but not quite):

```auto
void setup(){
  size(450,320);
}

void draw(){
  background(255);
  strokeWeight(3);
  arc(225,160,0+(pmouseY+pmouseX),0+(pmouseX+pmouseY),0,TWO_PI);
}

```

---

<div class="post-metadata">

### Author: ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)
#### Post date: [July 17, 2018, 11:09am UTC](https://discourse.processing.org/t/circle-edge-on-mouse-coordinates-and-increased-size-the-father-it-gets-from-canvas-center/1847/2 "2018-07-17T11:09:41Z")

</div>

The trick here is to realise that the distance from the mouse position to the sketch centre is the _radius of the circle_ you want to draw. The second thing is that Processing uses the ellipse method to draw a circle.

Replace the arc statement with these 2 lines

```auto
  float radius = dist(mouseX, mouseY, width / 2, height / 2);
  ellipse(width/2, height/2, 2 * radius, 2 * radius);

```
