Semesterarbeit.

var schrift;

var schrift2;

​

function preload() {

  schrift = loadFont("Roboto-Bold.ttf");

  schrift2 = loadFont("Muli-Light.ttf");

}

​

function setup() {

  createCanvas(560, 800);

  background(0);

}

​

function draw() {

  push();

  //Roter Buchhintergrund

  fill(230, 50, 60);

  rect(0, 0, 560, 800);

  //innerer, weißer Rand

  stroke(255);

  // links/rechts, oben/unten, Breite, Länge

  rect(45-20, 45-20, 450+60, 750);

  pop();

  //wenn ich den Buchhintergrund in Push und Pop setzte, wird der Rand des Vierecke (bei Anfangsposition) schwarz.

  // Um ihn verschwinden zu lassen: rot Färbung, denn noStroke funktioniert nur teilweise.

  stroke(230, 50, 60);

  //Animation: Vierecke

  // Zwischen Codes für Vierecke: Push und Pop notwendig, da sonst nur das erste gezeichnet wird.

  push();

    translate(210+70, 450-20);

  var q = map(sin(millis()/1000), -1, 1, 1, 71); //71 damit die Vierecke abschließen, sonst entsteht Lücke.

  for (i=0; i<q; i++)

  {

    rect(i, i, 70, 70);

    fill(255);

    stroke(0);

  }

  pop();

  push();

    translate(210+140, 450-20+140);

  var q = map(sin(millis()/1000), -1, 1, 1, 71);

  for (i=0; i<q; i++)

  {

    rect(-i, i, 70, 70);

    fill(255);

    stroke(30, 80, 50);

  }

  pop();

  push();

    translate(210, 450-20+70+140);

  var q = map(sin(millis()/1000), -1, 1, 1, 71);

  for (i=0; i<q; i++)

  {

    rect(-i, -i, 70, 70);

    fill(255);

    stroke(0);

  }

  pop();

  push();

    translate(210-70, 450+70-20);

  var q = map(sin(millis()/1000), -1, 1, 1, 71);

  for (i=0; i<q; i++)

  {

    rect(i, -i, 70, 70);

    fill(255);

    stroke(30, 80, 50);

  }

  pop();

  //Interaction

    if(mouseIsPressed == true)

  {

  //Auge

  noStroke();

  fill(150);

  beginShape();

  bezier(210, 570, 260, 520, 300, 520, 350, 570);

  bezier(210, 570, 260, 620, 300, 620, 350, 570);

  endShape();

  noStroke();

  fill(0);

  ellipse(280, 570, 60, 60);  

  }

   if(mouseIsPressed == false)

  {

  push();  //Viereck welches Auge verdeckt

  noStroke();

  fill(230, 50, 60);

  rotate(-PI/4,1);

  rect(-255, 552, 99, 99);

  pop();  

  }

​

  //Schattierung von der geometrischen Form

  push();

    translate(210-70, 570, 210, 570);

  var q = map(sin(millis()/1000), -1, 1, 1, 71);

  for (i=0; i<q; i++)

  {

    line(70+i, -i, i, -i);

    stroke(0);

  }

  pop();

  push();

    translate(280+70, 570, 210, 570);

  var q = map(sin(millis()/1000), -1, 1, 1, 71);

  for (i=0; i<q; i++)

  {

    line(70-i, i, -i, i);

    stroke(0);

  }

  pop();

  // Da ich bei diesen beiden unteren Schattierungen nicht wusste, wie man sie spiegeln, habe ich die Farben mit

  // der Schattierung und der grünen langezogenen Kontur getauscht, um den Schatten an die richtige Position zu 

  // bringen.

  push();

    translate(280, 430, 280, 430+70);

  var q = map(sin(millis()/1000), -1, 1, 1, 71);

  for (i=0; i<q; i++)

  {

    line(70+i, i, i, i);

    stroke(30, 80, 50);

  }

  pop();

  push();

    translate(280-70, 430+280, 280-70, 430+70+280);

  var q = map(sin(millis()/1000), -1, 1, 1, 71);

  for (i=0; i<q; i++)

  {

    line(70-i, -i, -i, -i);

    stroke(30, 80, 50);

  }

  pop();

  //Schriften

  fill(0);

  stroke(0);

  strokeWeight(2);

  textFont(schrift);

  textSize(120);

  text("KUNST", 100-18, 100+70);

  text("UND",160-5, 200+70-7);

  text("SEHEN", 100-8, 300+70-13);

  fill(0);

  stroke(0);

  strokeWeight(1);

  textFont(schrift2);

  textSize(38);

  text("Rudolf Arnheim", 160-14, 65+5);

  text("Neufassung", 160+12, 405);

  text("de Gruyter", 160+20,750);

}