let girlBookColor; // storing the colour of the girl's book

​

function setup() {

  createCanvas(600, 600);

  drawLibrary(); // initializing the books in the library

  girlBookColor = color(random(100, 255), random(100, 255), random(100, 255)); // initial random color for the girl's book

}

​

function draw() {

  background(252, 247, 222);

​

  // Drawing the library shelves and books

  drawLibrary();

​

  // Drawing the self portrait

  drawSelfPortrait();

}

​

function drawLibrary() {

​

  fill(150, 100, 50); 

  // Bookshelves

  for (let i = 0; i < 4; i++) {

    rect(50, 100 + i * 80, 500, 10); // horizontal shelves

  }

​

  // Adding books on top of shelves if not already added

  if (books.length === 0) {

    for (let i = 0; i < 4; i++) {

      let y = 100 + i * 80; // positioning books above each shelf

      let x = 60;

      while (x < 530) {

        let bookWidth = random(20, 30);

        let bookHeight = random(40, 65);

​

        // Randomly deciding if the next book should be spaced out or touching

        let spacing = random() < 0.5 ? 0 : random(5, 15); // there is a 50% chance of no gap, otherwise there is a gap between 5-15 pixels

​

        if (x + bookWidth < 530) {

          // adding a book object to the list of books

          books.push({

            x: x,

            y: y - bookHeight, // placing books on top of the shelf

            width: bookWidth,

            height: bookHeight,

            color: color(random(100, 255), random(100, 255), random(100, 255)),

            isJumping: false, // tracking jumping state

            velocity: 0, // velocity for jumping

            originalY: y - bookHeight // storing original Y position

          });

          x += bookWidth + spacing; // adjusting the x position 

        } else {

          break;

        }

      }

    }

  }

​

  // Drawing books with jumping effect

  for (let i = 0; i < books.length; i++) {

    let book = books[i];

​

    // Checking if the mouse is hovering over book

    if (

      mouseX > book.x &&

      mouseX < book.x + book.width &&

      mouseY > book.y &&

      mouseY < book.y + book.height &&

      !book.isJumping

    ) {

      book.isJumping = true; // book starts jumping when hovered

      book.velocity = -5; // initial jump velocity

    }

​

    // Handling jumping animation

    if (book.isJumping) {

      book.y += book.velocity; // updating y position based on velocity

      book.velocity += 0.4; // applying gravity effect

​

      // checking if the book has fallen back to its original position on the shelf

      if (book.y >= book.originalY) {

        book.y = book.originalY; // resetting position to the shelf

        book.isJumping = false; // stop jumping

        book.velocity = 0; // resetting velocity

      }

    }

​

    // Drawing the book

    fill(book.color);

    strokeWeight(2);

    rect(book.x, book.y, book.width, book.height, 5);

​

    // Drawing a thick stripe at the top of each book's spine

    let topStripeHeight = 3; 

    fill(0);

    rect(book.x, book.y, book.width, topStripeHeight, 6);

​

    // Drawing two stripes at the bottom of each book's spine

    fill(book.color);

    let stripeHeight = 5; // height of each stripe

    rect(book.x, book.y + book.height - stripeHeight * 2, book.width, stripeHeight, 5); // first bottom stripe

    rect(book.x, book.y + book.height - stripeHeight, book.width, stripeHeight, 5); // second bottom stripe

  }

  // Drawing vertical bars on the sides of the shelves

  fill(150, 100, 50); 

  rect(45, 30, 15, 410); 

  rect(540, 30, 15, 410); 

​

}

​

function drawSelfPortrait() {

  // Hair

  fill(56, 20, 1);

  arc(300, 480, 160, 315, -PI, 0, CHORD);

​

  // Clothes

  fill("#C35831");

  arc(300, 610, 130, 320, -PI, 0, CHORD);

​

  // Face

  noStroke();

  fill("#f1c27d"); // Skin color

  ellipse(300, 410, 90, 113); // Head

​

  // Specs

  stroke(0);

  noFill();

  ellipse(280, 410, 30, 25);

  ellipse(323, 410, 30, 25);

  line(295, 410, 308, 410);

  line(265, 410, 256, 405);

  line(338, 410, 345, 405);

​

  // Eyes behind specs

  fill(0);

  ellipse(280, 410, 15, 15); // Left eye

  ellipse(323, 410, 15, 15); // Right eye

​

  // Highlights in the eyes

  fill(255);

  circle(283, 408, 7); // Left eye bigger highlight

  circle(326, 408, 7); // Right eye bigger highlight

  circle(277, 413, 4); // Left eye smaller highlight

  circle(320, 413, 4); // Right eye smaller highlight

​

  // Nose

  fill("#c68642");

  noStroke();

  triangle(302, 420, 307, 430, 297, 430);

​

  // Hair

  fill(56, 20, 1); 

  noStroke();

  beginShape();

  vertex(300, 330);

  bezierVertex(300, 365, 290, 390, 250, 390);

  endShape();

​

  beginShape();

  vertex(300, 330);

  bezierVertex(290, 370, 320, 390, 355, 390);

  endShape();

  stroke(1);

​

  // Smile

  noFill();

  arc(302, 442, 20, 14, 0, -PI, OPEN);

  // Drawing hands and book

  drawHandsAndBook();

}

​

function drawHandsAndBook() {

  // Drawing the book

  fill(girlBookColor); 

  strokeWeight(3);

  rect(266, 510, 70, 80, 3); // book

  rect(266, 510, 13, 80); // book spine

  // Stripes on book spine

  fill(0);

  rect(266, 510, 13, 7);

  line(266,583, 279, 583);

  line(266,578, 279, 578);

  // Stripes to indicate book title

  line(290 , 530, 323, 530);

  line(290 , 550, 323, 550);

  line(290 , 570, 323, 570);

  strokeWeight(2);

  // Draw hands holding a book

  fill("#f1c27d"); 

  ellipse(252, 565, 40, 40); 

  ellipse(350, 565, 40, 40); 

  print(mouseX, mouseY);

}

​

function mousePressed() {

  // Checking if a book is clicked

  for (let i = 0; i < books.length; i++) {

    let book = books[i];

    if (

      mouseX > book.x &&

      mouseX < book.x + book.width &&

      mouseY > book.y &&

      mouseY < book.y + book.height

    ) {

      // Changing the girl's book color to the clicked book's color

      girlBookColor = book.color;

    }

  }

}

​