Tween?

edited February 2017 in p5.js

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!

Tagged:

Answers

  • 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);
    }
    
Sign In or Register to comment.