let pg;

let aa;

​

let matypo;

function preload() {

  matypo = loadFont('pressuru.otf');

}

​

​

function setup() {

  createCanvas (window.innerWidth, window.innerHeight);

  pg = createGraphics(400,800);

  pg.background('black');

  pg.fill('#fa877f');

  pg.textFont(matypo);

  pg.textSize(170);

  pg.textAlign(CENTER,CENTER);

  pg.text('ATION',pg.width/2,pg.height/2);

  aa = createGraphics(400,800);

  aa.background('white');

  aa.fill('#000000');

  aa.textFont(matypo);

  aa.textSize(220);

  aa.textAlign(CENTER,CENTER);

  aa.text('WEB',pg.width/2,pg.height/2);

  ig = createGraphics(400,800);

  ig.background('#ffffff');

  ig.fill('#000000');

  ig.textFont(matypo);

  ig.textSize(160);

  ig.textAlign(CENTER,CENTER);

  ig.text('ANIM',pg.width/2,pg.height/2);

}

​

function draw() {

  background(220);

​

  //just making sure the animation reach the frame with a little offset

  let off = 20

  let mover = map(constrain(mouseX,off,width-off),off,width-off,0,width);

  let movery =map(constrain(mouseY,off,height-off),off,height-off,0,height);

  image(ig,0,0,mover,movery);

  image(pg,0,movery,mover,height-movery);

  image(aa, mover,0, width-mover, height);

}

​

​

/*

function mouseClicked(){

  save('image.png');

}

*/

​

​

​

​

​

​

​

​

​

​