# Increasing a triangle's size based on cursor's position

**URL:** <https://discourse.processing.org/t/increasing-a-triangles-size-based-on-cursors-position/7889>\
**Category:** Coding Questions\
**Created:** [January 27, 2019, 9:20pm UTC](https://discourse.processing.org/t/increasing-a-triangles-size-based-on-cursors-position/7889 "2019-01-27T21:20:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![sim](https://avatars.discourse-cdn.com/v4/letter/s/bbe5ce/32.png) [@sim](https://discourse.processing.org/u/sim)\
**Post date:** [January 27, 2019, 9:20pm UTC](https://discourse.processing.org/t/increasing-a-triangles-size-based-on-cursors-position/7889/1 "2019-01-27T21:20:09Z")

</div>

I’m trying to create a triangle which will be its smallest size at the top of the canvas and largest at the bottom.

so far I have the code to just simply create a triangle that follows my mouse cursor but I don’t know how to change it’s size:

```auto
void setup()
{ 
   size (500,500);
}
void draw()
{
   drawTriangle();
   //moveObject();
} 

void drawTriangle()
{
  background(0);
  fill(255,0,0);
  triangle(mouseX, (mouseY-150), (mouseX-125), mouseY+150, mouseX+125, mouseY+150);
}

```

---

<div class="post-metadata">

**Author:** ![BennyHacker](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/bennyhacker/32/2969_2.png) [@BennyHacker](https://discourse.processing.org/u/BennyHacker)\
**Post date:** [January 27, 2019, 9:31pm UTC](https://discourse.processing.org/t/increasing-a-triangles-size-based-on-cursors-position/7889/2 "2019-01-27T21:31:18Z")

</div>

There’s many ways you can do this 😃

One method (that will probably use the least amount of code) is using the _scale_ and _map_ function.

you could just use mouseY as the input for scale and it will do exactly what you want. If you’re not pleased with the size of it, you can map the mouseY values to something smaller.

[https://processing.org/reference/scale\_.html](https://processing.org/reference/scale_.html)

[https://processing.org/reference/map\_.html](https://processing.org/reference/map_.html)

And also when posting on the forum you can format your code by selecting it and pressing \</\> 😉

---

<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:** [January 29, 2019, 6:31pm UTC](https://discourse.processing.org/t/increasing-a-triangles-size-based-on-cursors-position/7889/3 "2019-01-29T18:31:21Z")

</div>

> [@sim](#):
>
> ```auto
> void drawTriangle()
> {
> background(0);
> fill(255,0,0);
> triangle(mouseX, (mouseY-150), (mouseX-125), mouseY+150, mouseX+125, mouseY+150);
> }
> 
> ```

There are some ways that you could make this cleaner. One is to pass an argument to drawTriangle, giving its size only (and not worrying about its position):

```auto
void drawTriangle(float size)
{
  triangle(0, -size, -size, size, size, size);
}

```

The size changes when you pass it a variable. That could be mouseX, or anything you want:

```
drawTriangle(mouseY);

```

However, it always draws at 0,0. Next, in `draw()`, position the triangle on the mouse using `translate()`:

```
background(0);
fill(255,0,0);
translate(mouseX, mouseY);
drawTriangle(mouseY);

```

So, putting it all together:

```auto
void draw() {
  background(0);
  fill(255, 0, 0);
  translate(mouseX, mouseY);
  drawTriangle(mouseY);
}

void drawTriangle(float size) {
  triangle(0, -size, -size, size, size, size);
}

```