constructor(){

    this.book=loadImage("book_cover.jpg");

    this.font1=loadFont("fonts/cover.otf");

    this.font3=loadFont("fonts/font3.ttf");

    this.coverImage1=loadImage("cover_img1.png");

    //Button to go to next page

    this.nextButton = createButton('Next');

    this.nextButton.position(770, 445);

    this.nextButton.mousePressed(() => nextPage());

    //Button to go to previous page

    this.prevButton = createButton('Back');

    this.prevButton.position(650, 445);

    this.prevButton.mousePressed(() => prevPage());

    //Button to return to cover page

    this.mainButton = createButton('Main');

    this.mainButton.position(710, 445);

    this.mainButton.mousePressed(() => goToCoverPage());

  }

​

  display() {

    background(220);

    imageMode(CORNER);

    //Background image

    image(this.book,0,0,850,500);

    //Border image

    image(this.coverImage1,30,0,250,500);

    textAlign(CENTER,CENTER);

    textFont(this.font3);

    textSize(60);

    fill(255);

    text("The Art of Storytelling through Dance",width-350,300);

    textFont(this.font1);

    textSize(width/6);

    fill("rgb(37,66,37)");

    text("Kathak",width-350,height-350);

  }

​

}

​

​

class Page1{

  constructor(){

    this.page=loadImage("page.jpg");

    this.right=loadImage("images/right.jpg");

    this.font1=loadFont("fonts/papyrus.ttf");

    this.font2=loadFont("fonts/font2.ttf");

    this.nextButton = createButton('Next');

    this.nextButton.position(770, 445);

    this.nextButton.mousePressed(() => nextPage());

    this.prevButton = createButton('Back');

    this.prevButton.position(650, 445);

    this.prevButton.mousePressed(() => prevPage());

    this.mainButton = createButton('Main');

    this.mainButton.position(710, 445);

    this.mainButton.mousePressed(() => goToCoverPage());

  }

  display(){ 

    imageMode(CORNER);

    //Background image of the page

    image(this.page, 0, 0, 850, 500);

    noStroke();

    fill("rgb(185,185,185)");

    //Displays an ellipse giving the impression of the ground

    ellipse(675,410,200,30);

    //Displays the frame corresponding to the step from sprites1 array 

    image(sprites1[step1], 475, 70, 400, 350);

    textAlign(CENTER);

    textFont(this.font2);

    textSize(50);

    fill("rgb(37,66,37)");

    text("Namaskar",425,60);

    textSize(20);

    textFont("Ariel");

    fill(150);

    text("Obeisance",425,100);

    fill(0);

    textAlign(LEFT);

    textFont(this.font1);

    textSize(20);

    text("Namaskar is a Sanskrit word which means to greet\n or to salute with respect and humility.  In Kathak, \nthe dancer begins and ends with a Namaskar to \nshow respect to the musicians, stage and the audience.\nIt also symbolises a tribute to Mother Earth.",100,210);

    fill(150);

    textFont("Ariel");

    textSize(15);

    text("Use the right arrow key to see \nthe demonstration of the Namaskar",270,390);

    textAlign(LEFT);

    imageMode(CORNER);

    //Image of arrow key

    image(this.right, 220, 370, 40, 40);

  }

}

​

class Page2{

  constructor(){

    this.right=loadImage("images/right.jpg");

    this.page=loadImage("page.jpg");

    this.font1=loadFont("fonts/papyrus.ttf");

    this.font2=loadFont("fonts/font2.ttf");

    this.nextButton = createButton('Next');

    this.nextButton.position(770, 445);

    this.nextButton.mousePressed(() => nextPage());

    this.prevButton = createButton('Back');

    this.prevButton.position(650, 445);

    this.prevButton.mousePressed(() => prevPage());

    this.mainButton = createButton('Main');

    this.mainButton.position(710, 445);

    this.mainButton.mousePressed(() => goToCoverPage());

  }

  display(){

    imageMode(CORNER);

    image(this.page, 0, 0, 850, 500);

    noStroke();

    fill("rgb(185,185,185)");

    ellipse(610,400,250,35);

    image(sprites2[step2], 490, 230, 250, 220);

    textAlign(CENTER);

    textFont(this.font2);

    textSize(50);

    fill("rgb(37,66,37)");

    text("Tatkaar",425,60);

    textSize(20);

    textFont("Ariel");

    fill(150);

    text("Footwork",425,100);

    fill(0);

    textAlign(LEFT);

    textFont(this.font1);

    textSize(20);

    text("Tatkaar is the basic footwork of Kathak. It is executed by stamping the feet,\nright and left according to the syllables. The rigorous footwork is what produces\n the melodious sound of the ghungroo (footbells) worn by the dancer. ",100,170);

    textAlign(LEFT);

    textSize(30);

    noFill();

    stroke(0);

    rect(255,320,250,160);

    fill(0);

    textSize(20);

    text("Ta    Thai    Thai    Tat",150,270);

    text("Aa    Thai    Thai    Tat",150,340);

    textSize(15);

    fill(255,0,0);

    textFont("Ariel");

    text("Right      Left         Right       Left",150,300);

    text("Left        Right        Left        Right",150,370);

    fill(150);

    textFont("Ariel");

    textSize(15);

    noStroke();

    text("Use the right arrow key to see \nthe demonstration of the Tatkaar",390,450);

    textAlign(LEFT);

    imageMode(CORNER);

    image(this.right, 340, 430, 40, 40);

  }

}

​

class Page3{

  constructor(){

    this.right=loadImage("images/right.jpg");

    this.left=loadImage("images/left.jpg");

    this.page=loadImage("page.jpg");

    this.font1=loadFont("fonts/papyrus.ttf");

    this.font2=loadFont("fonts/font2.ttf");

    this.nextButton = createButton('Next');

    this.nextButton.position(770, 445);

    this.nextButton.mousePressed(() => nextPage());

    this.prevButton = createButton('Back');

    this.prevButton.position(650, 445);

    this.prevButton.mousePressed(() => prevPage());

    this.mainButton = createButton('Main');

    this.mainButton.position(710, 445);

    this.mainButton.mousePressed(() => goToCoverPage());

  }

  display(){

    imageMode(CORNER);

    image(this.page, 0, 0, 850, 500);

    noStroke();

    fill("rgb(185,185,185)");

    ellipse(570,390,150,20);

    ellipse(270,380,170,25);

    image(sprites3[step3], 160, 200, 230, 200);

    image(sprites4[step4], 450, 200, 230, 200);

    textAlign(CENTER);

    textFont(this.font2);

    textSize(50);

    fill("rgb(37,66,37)");

    text("Chakkar",425,60);

    textSize(20);

    textFont("Ariel");

    fill(150);

    text("Pirouettes",425,100);

    fill(0);

    textAlign(LEFT);

    textFont(this.font1);

    textSize(20);

    text("Chakkar or pirouette is one of the peculiarities of Kathak. In Kathak dance\nchakkar is to take a turn about oneself on a central vertical axis.",100,150);

    fill(150);

    textFont("Ariel");

    textSize(13);

    text("Use the right arrow key for animation 2",490,430);

    text("Use the left arrow key for animation 1",190,430);

    textAlign(LEFT);

    imageMode(CORNER);

    image(this.right, 460, 420, 20, 20);

    image(this.left, 160, 420, 20, 20);

  }

}

​

class Page4{

  constructor(){

    this.page=loadImage("page.jpg");

    this.font1=loadFont("fonts/papyrus.ttf");

    this.font2=loadFont("fonts/font2.ttf");

    this.nextButton = createButton('Next');

    this.nextButton.position(770, 445);

    this.nextButton.mousePressed(() => nextPage());

    this.prevButton = createButton('Back');

    this.prevButton.position(650, 445);

    this.prevButton.mousePressed(() => prevPage());

    this.mainButton = createButton('Main');

    this.mainButton.position(710, 445);

    this.mainButton.mousePressed(() => goToCoverPage());

    this.img=loadImage("images/img.JPG");

  }

  display(){ 

    imageMode(CORNER);

    image(this.page, 0, 0, 850, 500);

    image(this.img,510,90,250,280);

    fill(0);

    textAlign(LEFT);

    textFont(this.font1);

    textSize(18);

    text("As we conclude our exploration of Kathak's\nfundamental elements—Namaskar, Tatkaar,\nand Chakkar—remember that in the hands of\na skilled dancer, these movements seamlessly\nblend to tell a captivating story.  From the\nexpressive  opening  of  Namaskar  to the\nrhythmic intricacies of Tatkaar and the \ndynamic spins of Chakkar, Kathak is a \nharmonious fusion of technique and emotion. \nIt is in the thoughtful composition of these \nmovements that the true artistry of Kathak \ndance is revealed.",100,220);

  }

}

​

let pages = [];

let currentPage = 0;

let spritesheet1;

let sprites1 = [];

let step1 = 0;

let speed1 = 3;

let spritesheet2;

let sprites2 = [];

let step2 = 0;

let speed2 = 3;

let spritesheet3;

let sprites3 = [];

let step3 = 0;

let speed3 = 3;

let spritesheet4;

let sprites4 = [];

let step4 = 0;

let speed4 = 3;

​

function preload() {

  pages.push(new CoverPage());

  pages.push(new Page1());

  pages.push(new Page2());

  pages.push(new Page3());

  pages.push(new Page4());

  spritesheet1 = loadImage("images/spritesheet1.png");

  spritesheet2 = loadImage("images/spritesheet2.png");

  spritesheet3 = loadImage("images/spritesheet3.png");

  spritesheet4 = loadImage("images/spritesheet4.png");

  sound1 = loadSound("sound1.mp3"); //Loads the background sound

}

​

​

function setup() {

  createCanvas(850, 500);

  sound1.play();

  rectMode(CENTER);

  //The num variable stores the number of frames in each spritesheet

  let num1 = 16;

  let num2 = 16;

  let num3 = 4;

  let num4 = 4;

  let num5 = 44;

  //w is the width of each frame in a spritesheet

  let w1 = int(spritesheet1.width / num1);

  //h is the height of each frame in a spritesheet

  let h1 = spritesheet1.height;

  let w2 = int(spritesheet2.width / num2);

  let h2 = spritesheet2.height;

  let w3 = int(spritesheet3.width / num3);

  let h3 = spritesheet3.height;

  let w4 = int(spritesheet4.width / num4);

  let h4 = spritesheet4.height;

  //Stores the different frames in the spritesheet to an array

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

    sprites1[i] = spritesheet1.get(i * w1, 0, w1, h1);

  }

  imageMode(CENTER);

  image(sprites1[step1], 475, 70, 400, 350);

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

    sprites2[i] = spritesheet2.get(i * w2, 0, w2, h2);

  }

  imageMode(CENTER);

  image(sprites2[step2], 475, 70, 400, 350);

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

    sprites3[i] = spritesheet3.get(i * w3, 0, w3, h3);

  }

  imageMode(CENTER);

  image(sprites3[step3], 475, 70, 400, 350);

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

    sprites4[i] = spritesheet4.get(i * w4, 0, w4, h4);

  }

  imageMode(CENTER);

  image(sprites4[step4], 475, 70, 400, 350);

}

​

function draw() {

  pages[currentPage].display();//Displays the page from pages array depending on the value of currentPage

}

​

//Function to increment the page number

function nextPage() {

  currentPage++;

  if (currentPage >= pages.length) {

    currentPage = 0; // Loop back to the cover page

  }

}

​

function prevPage() {

  currentPage--;

  if (currentPage < 0) {

    currentPage = pages.length - 1; // Loop to the last page

  }

}

​

​

function keyPressed() {

  if (currentPage === 1) {

    if (keyCode === RIGHT_ARROW) {

      step1 = (step1 + 1) % sprites1.length; //Determines the frame number

      pages[currentPage].display(); // Redraws the page to update sprite animation

    } 

  }

  if (currentPage === 2) {

    if (keyCode === RIGHT_ARROW) {

      step2 = (step2 + 1) % sprites2.length;

      pages[currentPage].display(); 

    } 

  }

  if (currentPage === 3) {

    if (keyCode === LEFT_ARROW) {

      step3 = (step3 + 1) % sprites3.length;

      pages[currentPage].display();

    } 

  }

  if (currentPage === 3) {

    if (keyCode === RIGHT_ARROW) {

      step4 = (step4 + 1) % sprites4.length;

      pages[currentPage].display(); 

    } 

  }

}

​

function goToCoverPage() {

  currentPage = 0; 

}