Poster

var font;

var poster; //Quelle: https://www.swissted.com/ /Mike Joyce Designer at Stereotype Design NYC

var yPos = -300;

var rad = 493;

var random;

var angle = 0;

var change = 0;

var changeRad = 0;

var changeRad1 = 0;

var changeRad2 = 0;

var changeRad3 = 0;

var changeRad4 = 0;

var changeRad5 = 0;

var changeRad6 = 0;

var changeRad7 = 0;

var changeRad8 = 0;

​

function preload(){

  font = loadFont('Roboto-Medium.ttf');

  font2 = loadFont('Muli-SemiBold.ttf ');

  font3 = loadFont('Yantramanav-Bold.ttf');

  poster = loadImage('poster.png');

}

​

​

function setup() {

  createCanvas(568, 800);

  background(100);

  frameRate(30);

}

​

function draw() {

  background(100);

  rectMode(CENTER);

  translate(width/2, height/2);

  //Posterhintergrund

  fill(225,227,218);

  rect(0,0,570, 800);

  fill(0);

  imageMode(CENTER);

  //image(poster, 0, 0);

​

  //Überschrift

  textFont(font3);

  textSize(65);

  textAlign(CENTER,CENTER);

  text("lydia lunch",-130,-212);

  //Text

  textSize(14);

  textAlign(LEFT);

  text("two shows",-264, -363);

  text("with the wanabeast", -264, -349);

  text("only six bucks", -130,-363);

  text("at 9:30 club, a space in time", 93, -363);

  text("thursday, october 30 1986", -130, -349);

  text("930 f street nw / washington, dc", 93, -349);

  //Linien

  stroke(1);

  strokeWeight(3);  

  line(-285,-240, 285,-240);

  line(-285,-376, 285,-376);

  //strokeWeight(1);

  //fill(0);

  noStroke(); //um nachher keine Konturen bei den Kreisen zu haben ist es nötig die Kontur wieder auszuschalten

  //Punkte, die Punkte werden in einer for-Schleife generiert, 10 Stück horizontal, 9 Stück vertikal, außerdem wird noch eine Variable für die Radiusänderung 

  //angelegt.

  //für jede Zeile musste einzeln die Mausposition abgefragt werden und dementsprechend der Radius der Punkt der Reihe geändert werden. 

  //So entsteht der Effekt,dass beim Hovern jede Reihe einzeln pulsiert.

  for(var i = 0; i < 10; i++){

    for(var j = 0; j < 9; j++){

      if(yPos < 140 || mouseIsPressed || rad > 493){ //solange sich die gelbe Ellipse senkt, sollen alle Reihen pulsieren.

        var r = (sin(angle + PI/2) * 5);

        angle += random(0.002);

      }

      else{

        r = 0;    

      }

      // Beginn der Abfrage der Mausposition für jede Reihe

      if(mouseY >= 250 && mouseY <= 275 && j == 0){

         change += random(0.03);

        var changeRad = (sin(PI/2+change)*5);

      }

      else{

        changeRad = 0;

      };

        if(mouseY >= 314 && mouseY <= 338 && j == 1){

         change += random(0.03);

        var changeRad1 = (sin(PI/2+change)*5);

      }

      else{

        changeRad1 = 0;

      };

        if(mouseY >= 375 && mouseY <= 405 && j == 2){

         change += random(0.03);

        var changeRad2 = (sin(PI/2+change)*5);

      }

      else{

        changeRad2 = 0;

      };

        if(mouseY >= 435 && mouseY <= 475 && j == 3){

         change += random(0.03);

        var changeRad3 = (sin(PI/2+change)*5);

      }

      else{

        changeRad3 = 0;

      };

        if(mouseY >= 490 && mouseY <= 550 && j == 4){

         change += random(0.03);

        var changeRad4 = (sin(PI/2+change)*5);

      }

      else{

        changeRad4 = 0;

      };

        if(mouseY >= 555 && mouseY <= 605 && j == 5){

         change += random(0.03);

        var changeRad5 = (sin(PI/2+change)*5);

      }

      else{

        changeRad5 = 0;

      };

        if(mouseY >= 615 && mouseY <= 670 && j == 6){

         change += random(0.03);

        var changeRad6 = (sin(PI/2+change)*5);

      }

      else{

        changeRad6 = 0;

      };

        if(mouseY >=675 && mouseY <= 720 && j == 7){

         change += random(0.03);

        var changeRad7 = (sin(PI/2+change)*5);

      }

      else{

        changeRad7 = 0;

      };

        if(mouseY >= 735 && mouseY <= 800 && j == 8){

         change += random(0.03);

        var changeRad8 = (sin(PI/2+change)*5);

      }

      else{

        changeRad8 = 0;

      };

      ellipse(-274+i*61, -137+j*70*0.9, 20+j*7+r+changeRad+changeRad1+changeRad2+changeRad3+changeRad4+changeRad5+changeRad6+changeRad7+changeRad8, 20+j*7+r+changeRad+changeRad1+changeRad2+changeRad3+changeRad4+changeRad5+changeRad6+changeRad7+changeRad8);

    } 

  }

  //print(mouseY);

  //Sonne

  blendMode(ADD); //Blendmode muss geändert werden, um die gelbe Ellipse mit den Punkten in der Reihe zu mischen.

  fill(253,176,42);

  yPos = yPos+5; //Scheinwerfer senkt sich, Anfangsanimation. 

​

  if(yPos<140){

    ellipse(61,yPos, rad,rad);

  }

    else{

      ellipse(61,140,rad,rad);

  }

  if(mouseIsPressed){

    rad = rad+10;

  }

  else{

    if(rad > 493){

      rad = rad-10;

    }

  }

  blendMode(BLEND);

}

​

//reset 

​

function keyPressed(){

  if(keyCode === 32){

    yPos = -300; //Um die Animation neu zu starten wird die Position der gelben Ellipse wieder auf den Ursprungsort zurückgesetzt.

    draw();

  }

  return false;

}