Template Tool / waves and circles

let content = "You can use  this tool to create different waves consisting of circles. Just move the mouse  to the left or to the right side   to get different kind of waves and swings. Place the mouse    in the middle and you'll get a    chaotic mix of circles overlapping.\n\nPress 's' to make a screenshot";

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

​

let sora;

​

// Font laden

function preload() {

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

}

​

function setup() {

  createCanvas(1920, 1080);

  textFont(sora); // Font setzen

}

​

function draw() {

  background(255);

​

  let num = map(mouseX, 0, width, 0, 200);

  //let num = map(sin(millis()/1000), -1, 1, 10, 200);

​

  for (let y = 0; y < num; y += 1) {

    let rot = map(y, 100, num, 10, PI);

    let posx = map(y, 0, num, 0, width);

    //let col = map(y, 0, num, 0, 255);

    //stroke(col);

    push();

    translate(posx, 500);

    rotate(rot);

    noFill();

    stroke(0, 0, 0);

    ellipse(50, 50, 150, 150, 10);

    //arc(0, 0, 150, 150, 0, PI);

    //line(0, 0, 100, 0);

    pop();

  }

    // Wort

  textSize(250);

  textAlign(CENTER, CENTER);

  fill(120);

  //noStroke();

  text("call", width/2, height/2);

  // Hilfe Text

  fill(0);

  textSize(32);

  text("?", 15, 20);

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

    cursor(HAND);

    text(content, 20, 40, 500, height);

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

  }

  else {

    cursor(ARROW);

  }

}

​

// Bild speichern

function keyPressed() {

  if (key == "s") {

    save('tool_grafik.png');

  }

}