Circles with give

let content = "You can rotate, crop, sign and draw on PDFs and images directly on your Mac desktop — and even on your iPhone or iPad. To get started with Markup, select a file on your Mac, press the Space bar, then click the Markup icon.\n\nWith Stacks, the files on your desktop are automatically organised into related groups — so you can find that important spreadsheet whenever you need it. Just click the desktop, then choose View > Use Stacks.";

// Umbrüche sind als \n (break) im Text zu deklarieren

​

let sora;

​

// Font laden

function preload() {

  sora = loadFont('Sora-SemiBold.ttf');

}

​

​

function setup() {

  createCanvas(windowWidth, windowHeight); //erzeugt ein Fenster in der Größe des geöffneten Browserbildschirms

  textFont(sora); // Font setzen

  background(50); //Hintergrundfarbe  

}

function draw() { 

  var ringanzahl = 8; // ändert die halbe Ringanzahl des gesamten Ringstapels 

  var breite, raster;

  breite = windowWidth/3.5; //sorgt dafür, dass die übereinanderliegenden Kreise näher zusammen sind oder weiter auseinanader liegen

  raster = breite / ringanzahl; //sorgt für Überlagerung der Kreise in Mitte  

  background(50,5); //lässt Motiv verblassen

  strokeWeight(1.7); //Strichstärke

  stroke("#f2f2f2"); //Strichfarbe

  noFill(); //schaltet Füllung des Kreises aus

  translate(width/2, height/2); //erzeugt Objekte von Mitte aus

  push();

  rotate(sin(millis()/4000) * 3.14); //Kreisbewegung

  for(var i = 0; i <= breite; i+=raster) { //erzeugt Kreisstapel die je nach x-Position der Mouse sich in ihrer Breite ändern

    ellipse(0, -i, map(mouseX, 0, width, 100, 200), 100) // erzeugen zusammen 

    ellipse(0, i, map(mouseX, 0, width, 100, 200), 100) //  langen Kreisstapel

    }

  background(10,5); //lässt Motiv verblassen

  strokeWeight(1.7); //Strichstärke

  stroke("#f2f2f2"); //Strichfarbe

  noFill(); //schaltet Füllung des Kreises aus

  for(var i = 0; i <= breite; i+=width) { //wenn "i" bis zur weite laufen soll wird einzelner Kreis erzeugt der seine Form ändert

    ellipse(450, -i, map(mouseX, 0, width, 100, 200), 100) //Kreis 1  (um Kreisstapel)

    ellipse(-450, -i, map(mouseX, 0, width, 100, 200), 100) //Kreis 2 (um Kreisstapel)  

  }

  pop();

​

  //Text

  textSize(270);

  textAlign(CENTER, CENTER);

  fill("#f2f2f2");

  stroke(0);

  text("G i v e", 9, 0);

  // Hilfe Text

  fill("#f2f2f2");

  textSize(20);

  text("?", -width/2.1, -width/2.3);

  if (mouseX > 0 && mouseX < 30 && mouseY > 0 && mouseY < 30) {

    cursor(HAND);

    text(content,-width/2.1 , -width/2.34, 500, height);

    //text(content, 20, 40, width-20, height-20);

  }

  else {

    cursor(ARROW);

  }

}

​

// Bild speichern

function keyPressed() {

  if (key == "s") {

    save('tool_grafik.png');

  }

​

}

​

​