How can I scale an triangle with an animation?

jkr137

It works with a rect or a ellipse but it doesn't with a triangle. Why?

float shapeScale=1;
float speedScale=1.1;
void setup() {
  size(500, 500);
  frameRate(60);
}
void draw() {
  shapeScale = shapeScale + speedScale;
  background(0);
  pushMatrix();
  //translate(width/2, height/2);
  scale(shapeScale);
  triangle(700, 700, 850, 430, 1000, 700);
  popMatrix();

  if (shapeScale>=50.0 || shapeScale<=0) {
    speedScale= speedScale*-1;
  }
}

TfGuy44

It's not clear what you are trying to do. Can you show us the rectangle and ellipse that work?

jeremydouglass

@jkr137 --

Your triangle is drawn using a coordinate system that is far off the screen -- even before you begin scaling. You want 0,0 to be in the center of your triangle. That means that an equal number of your coordinates should be negative and positive.

Think carefully about how centering around 0,0 works with rectangle, ellipse, and triangle -- each is drawn differently.

/**
 * Scaling Shapes
 * 2017-11-22 Jeremy Douglass - Processing 3.3.6
 * This demonstrates scaling and aligning of simple shapes
 * -- without using rectMode(CENTER) or ellipseMode(CENTER).
 * Original coordinates are centered on 0,0 in a 20x20 square.
 * forum.processing.org/two/discussion/25140/how-can-i-scale-an-triangle-with-an-animation
 */

float scaleVal=1;
float scaleIncrement=0.1;
float scaleMax = 5.0;

void setup() {
  size(300, 100);
}
void draw() {
  scaleVal = scaleVal + scaleIncrement;
  background(0);

  // rectangle
  pushMatrix();
  translate(50, 50);
  scale(scaleVal);
  rect(-10, -10, 20, 20);
  popMatrix();

  // circle
  pushMatrix();
  translate(150, 50);
  scale(scaleVal);
  ellipse(0, 0, 20, 20);
  popMatrix();

  // triangle
  pushMatrix();
  translate(250, 50);
  scale(scaleVal);
  triangle(0, -10, 10, 10, -10, 10);
  popMatrix();

  // diamond (on mouse)
  pushMatrix();
  translate(mouseX,mouseY);
  rotate(QUARTER_PI);
  scale(scaleVal/2 * sqrt(2));
  rect(-10, -10, 20, 20);
  popMatrix();

  if (scaleVal >= scaleMax || scaleVal <= 0) {
    scaleIncrement = scaleIncrement * -1;
  }
}