Berlin

var cover;

var berlin;

var y1, y2, y3, y4, yB, yE, yR, yL, yI, yN

y0 = 0;

y1 = 166;

y2 = 207;

y3 = 186;

y4 = 266;

yB = 207; 

yE = 249;

yR = 228;

yL = 308;

yI = 360;

yN = 426;

​

yy1 = y1;

yy2 = y2;

yy3 = y3;

yy4 = y4;

yyB = yB;

yyE = yE;

yyR = yR;

yyL = yL;

yyI = yI;

yyN = yN;

​

​

function preload() {

  cover = loadImage("cover.jpg");

  berlin = loadFont("Poppins-SemiBold.ttf");

  frameRate(5);

}

​

function setup() {

  createCanvas(619,800);

  background(100);

    yy1 = y1;

    yy2 = y2;

    yy3 = y3;

    yy4 = y4; 

    yyB = yB;

    yyE = yE;

    yyR = yR;

    yyL = yL;

    yyI = yI;

    yyN = yN;

​

}

​

function draw() {

  // Hintergrund

  background(100);

  fill(225,27,68);

  noStroke();

  rectMode(CORNER);

  rect(0,0, 619, 800);

// Alternative Animation  

if(mouseIsPressed){

​

y1 = 166;

y2 = 207;

y3 = 186;

y4 = 266;

yB = 207; 

yE = 249;

yR = 228;

yL = 308;

yI = 360;

yN = 426;

​

  var ran1;

  var ran2;

  var ran3;

  var ran4;

  var ranB;

  var ranE;

  var ranR;

  var ranL;

  var ranI;

  var ranN;

  ran1 = random (-70,630);

  ran2 = random (-110,590);

  ran3 = random (-90,610);

  ran4 = random (-170,530);

  ranB = random (-110,590);

  ranE = random (-150,550);

  ranR = random (-130,570);

  ranL = random (-210,490);

  ranI = random (-265,435);

  ranN = random (-330,370);

  // Rechtecke

    fill(255);

      rect (0, y1+ran1, 50, 800);

      rect (63, y2+ran2, 50, 800);

      rect (127, y3+ran3, 50, 800);

      rect (190, y4+ran4, 50, 800);

      rect (253, yB+ranB, 50, 800); 

      rect (317, yE+ranE, 50, 800);

      rect (380, yR+ranR, 50, 800);

      rect (443, yL+ranL, 50, 800);

      rect (506, yI+ranI, 50, 800);

      rect (569, yN+ranN, 50, 800);

  // Buchstaben

    textAlign(LEFT);

    fill(0);

    textFont (berlin);

    textSize (82);

      text("B", 253-2, yB-7+ranB);

      text("E", 317+2, yE-7+ranE);

      text("R", 380-2, yR-7+ranR);

      text("L", 443+4, yL-7+ranL);

      text("I", 506+14, yI-7+ranI);

      text("N", 569-4, yN-7+ranN);

}

else{

  // Rechtecke

    fill(255);

      rect (0, y1, 50, 800);

      rect (63, y2, 50, 800);

      rect (127, y3, 50, 800);

      rect (190, y4, 50, 800);

      rect (253, yB, 50, 800);  

      rect (317, yE, 50, 800);

      rect (380, yR, 50, 800);

      rect (443, yL, 50, 800);

      rect (506, yI, 50, 800);

      rect (569, yN, 50, 800);

  // Buchstaben

    textAlign(LEFT);

    fill(0);

    textFont (berlin);

    textSize (82);

      text("B", 253-2, yB-7);

      text("E", 317+2, yE-7);

      text("R", 380-2, yR-7);

      text("L", 443+4, yL-7);

      text("I", 506+14, yI-7);

      text("N", 569-4, yN-7);

​

  //   Grundanimation 

    if (y1 >97)

      y1 -= 2

    if (y2 >97)

      y2 -= 2;

    if (y3 >97)

      y3 -= 2;

    if (y4 > 97)

      y4 -= 2;

    if (yB > 97)

      yB -= 2;

    if (yE >97)

      yE -= 2;

    if (yR >97)

      yR -= 2;  

    if (yL >97)

      yL -= 2;  

    if (yI >97)

      yI -= 2;  

    if (yN >97)

      yN -= 2;    

  // zurückspringen auf 

    if (y1 <100 && yN <100)

      y1 = yy1; 

    if (y2 <100 && yN <100)

      y2 = yy2;

    if (y3 <100 && yN <100)

      y3 = yy3;

    if (y4 <100 && yL <100 && yI <100 && yN <100)

      y4 =yy4;

    if (yB <100 && yN <100)

      yB = yyB;

    if (yE <100 && yN <100)

      yE = yyE;

    if (yR <100 && yN <100)

      yR = yyR;

    if (yL <100 && yN <100)

      yL = yyL;

    if (yI <100 && yN <100)

      yI = yyI;

    if (yN <100)

      yN = yyN;

    fill(255)

      rect (0, yy1, 50, 800);

      rect (63, yy2, 50, 800);

      rect (127, yy3, 50, 800);

      rect (190, yy4, 50, 800);

      rect (253, yyB, 50, 800); 

      rect (317, yyE, 50, 800);

      rect (380, yyR, 50, 800);

      rect (443, yyL, 50, 800);

      rect (506, yyI, 50, 800);

      rect (569, yyN, 50, 800);

}

  /*

  // Originalbild

    if(mouseIsPressed){

    translate(width/2, height/2);

    imageMode(CENTER);  

    image(cover, 0, 0, 618.557, 800);

  }

  else{

    imageMode(CENTER);

    image(cover, -675, 0);

  } 

  */

}