Tween?

cleanboy

Simple question...I have a triangle made with triangle() and I would like to morph / tween it into 2 rectangles when you click on it...think play / pause button...any suggestions on how I should proceed with this?

I am using p5.js and not processing btw.

Thanks!

kfrajer

You redraw the whole scene using a square instead of a triangle.

Kf

var pg;
var isPlaying=false;

function setup() {
  createCanvas(400, 400);
}

function draw() { 
  background(0);
  generatePG(isPlaying);
  text("Below "+isPlaying, width/2, height*0.85);
}

function mousePressed() {
  isPlaying=!isPlaying;
}

function generatePG(show) {
  pg = createGraphics(200, 200);
  pg.background(0);
  pg.noStroke();
  pg.fill(255);
  if (show==true) {
    pg.triangle(pg.width/2, pg.height/2+25, pg.width/2-25, pg.height/2-25, pg.width/2+25, pg.height/2-25);
  } else {
    pg.rect(pg.width/2, pg.height/2, 50, 50);
  }
  image(pg, 50, 50);
}