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

Processing Coding Questions
1

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:

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);
}
1 Like
2

There’s many ways you can do this :smiley:

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/map_.html

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

2 Likes
3

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):

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:

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

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