var end  =  false;

var end2 = false;

var audio = new Audio('https://s0.vocaroo.com/media/download_temp/Vocaroo_s0f0Gy2EiUYJ.mp3');

function setup() { 

  makeCanvas()

}

​

function testAnim(x) {

    $('#animationSandbox')

      .addClass(x + ' animated')

      .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend');

  };

function makeCanvas(){

  canvas = createCanvas(640, 480);

  canvas.position(100,100);

  createCanvas(640, 480);

  background(0);

}

function circleObject(x,y,elipseX,elipseY,q,w,e){ 

    //x,y coords and q.w.e= color, elipseX/Y=width

    stroke(0);

    let c = color(q,w,e);

    fill(c); // Use 'c' as fill color

    ellipse(x, y, elipseX, elipseY);

}

​

function createLaptop() {

  fill(240, 150, 20);

  rect(220, 150, 220, 130, 20);

  fill(0);

  rect(230, 160, 200, 110);

  fill(240, 150, 20);

  rect(200, 290, 260, 15, 0, 0, 10, 10);

  //rect(x, y, w, h, [tl], [tr], [br], [bl])

}

​

function createREC(color1,color2,color3) {

  fill(color1,color2,color3);

  //^text color

  textSize(100);

  text('REC', 240, 275);

  textStyle(BOLD);

//^text

}

​

function playButton() {

  fill(0);

  stroke(240, 150, 20);

    strokeWeight(6);

​

  ellipse(320, 220, 90, 90);

  fill(240, 150, 20);

  triangle(300, 250, 300, 190, 350, 220);

}

​

​

function GifHub() {

  fill(240, 150, 20);

  rect(315, 175, 290, 130, 20);

  fill(250);

  textSize(130);

  text('GIF', 70, 290);

  textStyle(BOLD);

  fill(0);

  textSize(130);

  text('HUB', 320, 290);

  textStyle(BOLD);

}

​

​

​

function draw(){

    if(end==false){

      createREC(240,150, 20);

    }

​

    if(frameCount % 30 == 0 )

    {

        //@EvenTick change the mod number to make the distance between blinks longer

      if(end==false)

        circleObject(180,240,80,80,240,150,20);

    }

    else if(frameCount % 15 == 0 )

    {

      if(end==false)

        circleObject(180,240,80,80,0,0,0);

    }

    else if(frameCount > 75){

      end = true;

      makeCanvas();

      createLaptop();

      playButton()

    }

    if(frameCount > 150){

      makeCanvas();

      GifHub();

​

    }

}

​

​

  $(document).ready(function(){ // when page loads

      audio.play();

      testAnim('fadeInLeft'); 

​

  });

​