Fertiges Buchcover

var cover;

var fira;

​

function preload() {

  cover = loadImage ("Bild.jpg");  //Originalbild hochladen  

  fira = loadFont ("FiraSans-Regular.ttf"); // Schriftart aussuchen und hochladen 

}

​

​

function setup() {

  createCanvas(800, 800);  //Größe des Bildes

  background(230); //Hintergrundfarbe

​

}

​

function draw() {

  //image (cover,0,0, 800,800); //Größe des Bildes

  background(255);

  //noFill(); //KEINE FÜLLUNG

  noStroke();// Keine Umrandung der Balken

  strokeWeight(1);

  textFont(fira); //WELCHE SCHRIFTART (FIRA)

  if(mouseIsPressed) {

  fill(82, 82, 82); //Textfarbe 

  textSize(25); //Textgröße

  text("Signale und Zeichen",350,650); //Text auf dem Cover

  text("funktionale Grafik",350,680);

  text("1926-1976", 350, 710);

  text("Anton Stanowski", 350,740);

    }

  //textSize( random(50, 200)); //GRÖßE der Schrift

  //print(mouseX); // UM DIE KOORDINATEN FÜR QUAD HERAUSZUFINDEN

  //print(mouseY);// UM DIE KOORDINATEN FÜR QUAD HERAUSZUFINDEN

  if(mouseIsPressed) {

  fill(155,155,155); //grauer Balken

  //quad(273, 3, 795, 649, 790, 771, 205, 21); Erste Möglichkeit die Koordinaten der Balken zu programmieren

  push();

  translate(400, 400);

  rotate( radians(45)); //Winkelanzahl

  //rect(60, -150, 2000, 80);

  rect(60 +sin (millis()/1000)*1000, 2000, 80); //Drehung der Balken

  pop();

  fill(155,155,155); //2ter grauer Balken

  //quad(273, 3, 795, 649, 790, 771, 205, 21);

  push();

  translate(400, 400);

  rotate( radians(45));

  //rect(-550, -150, 2000, 80);

  rect(-550 +sin (millis()/1000)*2000, -150, 2000, 80);

  pop();

    fill(255,0,0); //2te roter Balken

  rect(200+sin (millis()/1000)*30, 0, 70, 800);

  fill(255,255,0); //gelber Balken

  //quad(10, 186, 790, 184, 792, 264, 10, 268);

    rect(270+sin (millis()/1000)*30, 186, 550, 80);

  fill(255,0,0); //roter Balken

  rect(200+sin (millis()/1000)*30, 200, 70, 800);

  fill(255,255,0); // 2ter gelber Balken

  rect(sin (millis()/1000)*30, 186, 500, 80);

    fill(0,154,205); //blauer Balken

  //quad(4, 798, 105, 797, 785, 0, 680, 0);

  push();

  translate(400, 400); //Verschieben des Balkens

  rotate( radians(-45) ); //Winkelanzahl

  //rect(-600, 0, 2000, 80); //-600 und 0 sind die Positionen, 2000 und 80 sind Maße des Rechtecks

  rect(-600 +sin (millis()/1000)*2000, 0, 2000, 80);

  pop();

​

  }

  else {

    fill(82, 82, 82); //Textfarbe in grau

  textSize(20); //Textgröße

  text("Signale und Zeichen",350,649); //Schrift

  text("funktionale Grafik",350,670);

  text("1926-1976", 350,690);

  text("Anton Stanowski", 350,710);

  fill(0,154,205); //blauer Balken

  push();

  translate(400, 400); //Verschieben des Balkens

  rotate( radians(-45) ); //Winkelanzahl

  rect(-600, 0, 1000, 80); //-600 und 0 sind die Positionen, 1000 (Länge) und 80 (Breite) sind Maße des Rechtecks

  pop();    

    fill(155,155,155); //grauer Balken

  push();

  translate(400, 400);

  rotate( radians(45));

  rect(60, -150, 2000, 80);

  pop();

      fill(155,155,155); //2ter grauer Balken

  push();

  translate(400, 400);

  rotate( radians(45));

  rect(-550, -150, 2000, 80);

  pop();

fill(255,0,0); //2te roter Balken

  rect(200+sin (millis()/1000)*60, 0, 70, 300); 

      fill(255,255,0); //gelber Balken

  rect(270, 186, 550, 80);  

    fill(255,255,0); // 2ter gelber Balken

  rect(0, 186, 600, 80);

    fill(0,154,205); //blauer Balken

  push();

  translate(400, 400); //Verschieben des Balkens

  rotate( radians(-45) ); //Winkelanzahl

  rect(-600, 0, 2000, 80); //-600 und 0 sind die Positionen, 2000 und 80 sind Maße des Rechtecks

  pop();

    fill(255,0,0); //roter Balken

  rect(200+sin (millis()/1000)*60, 300, 70, 700); //Wie schnell sich der rote Balken bewegen soll

​

​

    //Balkensortierung: Der rote Balken (bestehend aus 2 einzelnen Balken) muss einmal unter dem gelben Balken sein und über den blauen Balken

    //Balkensortierung: Der graue Balken (bestehend aus 2 einzelnen Baken) liegt hinter allen Balken (rot, gelb, blau)

    //Balkensortierung: Der blaue Balken liegt über dem grauen Balken aber dafür hinter dem roten Balken

    //Balkensortierung: Der gelbe Balken (bestehend aus 2 einzelnen Balken) liegt über dem roten Balken aber unter dem blauen Balken

​

  }   

}