book cover

var primaryColor, accentColor, bgColor, circleLineColor;

​

function preload() {

  titleF = loadFont('HostGrotesk-VariableFont_wght.ttf');

}

function setup() {

  createCanvas(500, 700);

  noLoop(); // Stops continuous redrawing, so we manually trigger redraw

  angleMode(DEGREES); // Set the angle mode to degrees

​

  // Define an elegant color palette

  bgColor = color(20, 20, 30); // 

  primaryColor = color(220, 220, 220); 

  accentColor = color(150, 100, 250); 

  circleLineColor = color(255); 

​

  // Init refresh button

  refreshbtn = createButton('Refresh Design');

  // Set the position of the button (adjusted to ensure visibility)

  refreshbtn.position(20, height - 5);  // Placed inside the canvas, close to bottom

  refreshbtn.size(100, 40); // Smaller button size

  // Set mouse press listener function

  refreshbtn.mousePressed(refreshBtnPressed);

  // Draw the initial design

  drawDesign();

}

​

function refreshBtnPressed() {

  // Redraw the design manually since noLoop() is used

  redraw();

}

​

function draw() {

  // Clear the canvas and redraw the design

  background(bgColor);

  drawDesign(); // Redraw the design each time redraw() is called

}

​

function drawDesign() {

  // Central Circle Element with the new line color

  noFill();

  stroke(circleLineColor); // Using the new line color

  strokeWeight(4);

  ellipse(width / 2, height / 2, 300, 300);

​

  // Inner Circle with the original line color

  stroke(accentColor);

  strokeWeight(2);

  ellipse(width / 2, height / 2, 200, 200);

​

  // Rectangular Grid Overlay with Randomness 

  noFill();

  for (let x = 25; x < width; x += 50) {

    for (let y = 25; y < height; y += 50) {

      if (dist(x, y, width / 2, height / 2) > 150) { // Avoid grid near the circle

        stroke(primaryColor);

        strokeWeight(1);

        if (random() < 0.4) { // 40% chance to draw a square

          fill(accentColor, 100); // Add subtle transparency

          rect(x, y, 40, 40);

          noFill();

        }

      }

    }

  }

​

  // Radial Lines with Randomness

  for (let angle = 0; angle < 360; angle += 15) {

    let x1 = width / 2 + cos(angle) * 100; // Using degrees now

    let y1 = height / 2 + sin(angle) * 100; // Using degrees now

    let x2 = width / 2 + cos(angle) * (150 + random(-5, 5)); // Slight random length

    let y2 = height / 2 + sin(angle) * (150 + random(-5, 5)); // Slight random length

    stroke(lerpColor(primaryColor, accentColor, random(0.5, 1))); // Gradient color

    strokeWeight(1.5);

    line(x1, y1, x2, y2);

  }

​

  // Title Text with Central Alignment

  textAlign(CENTER);

  textSize(50);

  fill(primaryColor);

  textFont(titleF);

  noStroke();

  text("Beyond the Horizon", width / 2, height - 540);

​

  // Subtitle

  textSize(20);

  fill(primaryColor);

  textFont(titleF);

  text("A journey through the unseen", width / 2, height - 150);

​

  // Author

  fill(primaryColor);

  textSize(15);

  textFont(titleF);

  text("I.D.K", width / 2, height - 80);

}

​

function keyPressed() {

  if (key === 's') { // Save the canvas as a JPG image

    saveCanvas("book_cover", "jpg");

  }

}

​