createCanvas(512, 512);

  noiseSeed(0);

  blbs=loadImage("cedric.png");

​

}

​

function draw() {

  background(220);

  for (i=0;i<9;i++) {

      fill(255);

      noStroke(); 

      rect(-128+256*(i%3),-128+256*(floor(i/3)),256,256);

  }

  image(blbs,128,128,256,256);

  fill(0);

  stroke(255, 255, 0);

  strokeWeight(4);

  quad(128, 128, 128, 384, 384 - mouseX, 384 + mouseX / 2, 384 - mouseX, 128 - mouseX / 3);

  handle(128, 128);

  handle(128, 384);

  handle(384 - mouseX, 384 + mouseX / 2);

  handle(384 - mouseX, 128 - mouseX / 3);

​

}

​

function handle(x, y) {

  push();

  translate(x, y);

  rectMode(CENTER);

  stroke(0);

  strokeWeight(2);

  fill(255);

  rect(0, 0, 15, 15);

  pop();

}

​

function keyPressed() {

    createLoop({ duration: 240 / 60, gif: true });

}