createCanvas(600, 500);

  setGradient(0, 0, width, height, color(255, 182, 193), color(255, 228, 225)); // Gradient background

  drawHelloKitty(); //function that I am using to draw the main character 

  drawBookshelf();

}

​

function drawHelloKitty() {

  noLoop();

  noStroke();

​

  // Draw face

  stroke(0);

  strokeWeight(0.2);

  fill("rgb(252,245,225)"); // White color  

  ellipse(200, 200, 180, 180); // Head

​

  // Draw ears

  fill('rgb(244,230,215)');

  ellipse(120, 130, 70, 70); // Left ear

  ellipse(280, 130, 70, 70); // Right ear

​

  //inner ear color

​

  fill(160, 82, 45); // Medium brown

  ellipse(120, 130, 50, 50); // Left inner ear

  ellipse(280, 130, 50, 50); // Right inner ear

​

  // eyes

  fill(0); 

  ellipse(170, 200, 22, 22); // Left eye

  ellipse(230, 200, 22, 22); // Right eye

​

  // Draw nose

  fill(160, 82, 45); // Medium brown

  ellipse(200, 230, 22, 18); // Nose

​

  // Draw mouth

  stroke(0);

  strokeWeight(2);

  noFill();

  arc(200, 245, 50, 25, 0, PI); // Mouth

​

  // Draw whiskers

  stroke(0);

  strokeWeight(2);

  line(100, 200, 50, 190); // Left whisker 1

  line(100, 210, 50, 210); //2

  line(100, 220, 50, 230);  //3

​

  line(300, 200, 350, 190); // Right whisker 1

  line(300, 210, 350, 210); //2

  line(300, 220, 350, 230); //3

​

  // Drawing body

  fill(255, 0, 0);

  stroke(0);

  strokeWeight(2);

  fill(160, 82, 45);

  ellipse(200, 480, 260, 400);

  stroke(0);

  strokeWeight(2);

  fill("rgb(250,204,109)")

  rect(155, 270, 90, 100);

​

​

  // hand details

  fill('rgb(252,245,225)'); 

  ellipse(140, 300, 70, 40); // Left hand

  ellipse(260, 300, 70, 40); // Right hand 

stroke(0); 

strokeWeight(2); 

​

  // lines for left hand

line(140, 295, 170, 290); // First finger

line(140, 305, 173, 305); 

line(140, 315, 165, 315); 

// lines for right hand

line(228, 295, 265, 297); // First finger

line(225, 305, 265, 305); 

line(240, 315, 266, 315); 

}

​

function drawBookshelf() {

  // Adjusted position of the bookshelf

  const shelfX = 400;

  const shelfY = 150; 

  const shelfWidth = 160;

  const shelfHeight = 360;

  const shelfThickness = 19;

  // Draw the bookshelf

  fill(150, 75, 0); // Wood color

  rect(shelfX, shelfY, shelfWidth, shelfHeight); // Main body of the bookshelf

  // Draw the shelves

  fill(120, 60, 0); // Slightly darker wood color

  for (let i = 1; i <= 5; i++) { // Adjusted to have more shelves

    rect(shelfX, shelfY + i * 60, shelfWidth, shelfThickness); // Horizontal shelves

  }

  // Draw the sides for depth

  fill(100, 50, 0); // Darker wood color for sides

  beginShape();

  vertex(shelfX, shelfY); // Top left corner

  vertex(shelfX + 10, shelfY - 10); // Slightly to the right and up

  vertex(shelfX + 10, shelfY + shelfHeight - 10); // Down to the bottom

  vertex(shelfX, shelfY + shelfHeight); // Back to the bottom left corner

  endShape(CLOSE);

  beginShape();

  vertex(shelfX + shelfWidth, shelfY); // Top right corner

  vertex(shelfX + shelfWidth + 10, shelfY - 10); // Slightly to the right and up

  vertex(shelfX + shelfWidth + 10, shelfY + shelfHeight - 10); // Down to the bottom

  vertex(shelfX + shelfWidth, shelfY + shelfHeight); // Back to the bottom right corner

  endShape(CLOSE);

​

  // Draw the books

  fill(200, 0, 0); // first row

  drawBook(shelfX + 10, shelfY + 60, 40, 80);

  drawBook(shelfX + 60, shelfY + 60, 40, 80);

  drawBook(shelfX + 110, shelfY + 60, 40, 80);

  fill(0, 200, 0); // second row

  drawBook(shelfX + 10, shelfY + 130, 40, 80);

  drawBook(shelfX + 60, shelfY + 130, 40, 80);

  drawBook(shelfX + 110, shelfY + 130, 40, 80);

​

  // a quote below the bookshelf

  fill(0); 

  textSize(18);

  stroke(0);

  strokeWeight(0);

  textFont('Arial');

  textStyle(NORMAL);

  textAlign(CENTER);

 // Text lines

let line1 = "Read,";

let line2 = "Masha!";

​

// position of the quote

text(line1, width / 3, 320); 

text(line2, width / 3, 340); 

}

​

function drawBook(x, y, w, h) {

  fill(255);

  rect(x, y, w, h); 

  fill(0); 

  rect(x + 10, y, 20, h); //the book spine

​

}

​

function setGradient(x, y, w, h, c1, c2) {

  noFill();

  for (let i = y; i <= y + h; i++) {

    let inter = map(i, y, y + h, 0, 1);

    let c = lerpColor(c1, c2, inter);

    stroke(c);

    line(x, i, x + w, i);

  }

}

​