Meme Animation

by Qingyun Zhu

​

*/

var Meme;

click=0;

var Text1='Hello, My Name is Popo, A Cute Coding dog!';

var Text2='This is What I Look Like in my Working Sate.';

var Text3='Listening to Music is my Greatest Hobby！';

var a;

var b;

var imageScale = 1;

var scaleSpeed = 0.02

​

function mousePressed () {

  click = click + 1;

  if (click > 3) {

    click = 0

  }

}

​

function preload() {

   Meme = loadImage('Dog-Popo.jpg');

   Meme1 = loadImage('Dog-Popo-1.jpg');

   Meme2 = loadImage('Dog-Popo-2.jpg');

}

​

function setup() {

  createCanvas(500, 600);

  a = 300 / 2;

  b = 120;

  frameRate(30);

}

function draw() {

    background('#8AF58E')

    //01

    var x1=0

    x1+=PI/180;

    var recS = 40;

    var t=(millis()/10)*sin(x1);

    if(x1==PI) {

      x1=0;

    }

    stroke('#FFEB3B');

    translate(120, 120);

    rotate(-t);

    strokeWeight(6);

    rect(0,0,125,150);

    image(Meme, 0, 0, 125,150);

    resetMatrix();

    //02

    var x2=0

    x2+=PI/180;

    var recS = 50;

    var t=(millis()/10)*sin(x2);

    if(x2==PI) {

      x2=0;

    }

    stroke('#E91E63');

    translate(250, 280);

    rotate(t);

    strokeWeight(6);

    rect(0,0,140,125);

    image(Meme1, 0, 0, 140,125); 

    resetMatrix();

    //03

    var x3=0

    x3+=PI/180;

    var recS = 60;

    var t=(millis()/10)*sin(x3);

    if(x3==PI) {

      x3=0;

    }

    stroke('#3F51B5');

    translate(350, 450);

    rotate(-t);

    strokeWeight(6);

    rect(0,0,140,125);

    image(Meme2, 0, 0, 140,125);

    resetMatrix();

    //

    fill('#E91E63');

    stroke('#2196F3');

    strokeWeight (3);

    textFont ("Impact");

    textSize (25);

    text(Text1 ,30, 440);

  //01

  if (click === 1) {

    push();

  scale(imageScale);

  imageScale += scaleSpeed;

  if (imageScale > 2 || imageScale < 0) {

    scaleSpeed *= -1;

  }

    background('#CDDC39')

    stroke('#FFEB3B');

    strokeWeight(5);

    noFill();

    image(Meme, 50, 50, width-100, height-100);

    rect(50, 50, width-100, height-100);

    //text1

    fill('#E91E63');

    stroke('#2196F3');

    strokeWeight (3);

    textFont ("Impact");

    textSize (25);

    text(Text1, b, b);

  }

  //02

  else if (click ===2) {

    background('#4CAF50');

    let x = map(50,a+20, a+100,100,200)

    stroke('#E91E63');

    strokeWeight(5);

    noFill();

    rect(x, x, width-100, height-300);

    image(Meme1, x, x, width-100, height-300);

    //text2

    fill('#E91E63');

    stroke('#2196F3');

    strokeWeight (3);

    textFont ("Impact");

    textSize (25);

    text (Text2, x, 440);

}

  //03

  else if (click === 3) {

    background('#EC7AFF')

    stroke('#3F51B5');

    strokeWeight(5);

    noFill();

    rect(a+20, a+10, a+210, a+70)

    image (Meme2,a+20, a+10, a+210, a+70);

    //text3

    fill('#E91E63');

    stroke('#2196F3');

    strokeWeight (3);

    textFont ("Impact");

    textSize (25);

    text (Text3, a+20, a+10);

    }

    a = a - 1;

    if (a < 0) {

      a = 300;

    }

     b = b - 0.5;

     if (b < 0) {

       b = 260;

     }

}