// make sure you have duplicated this sketch

// and saved under your own sketches list

// before you make changes. 

​

let bookCover;

let x = 0;

let y = 0;

let z = 0;

let nx = 0.5;

let ny = -0.5;

let nz = 0;

​

function preload() {

  // @make-changes-here

  // try to load and displat your own image 

  // as the book cover. Upload an image and replace

  // cover-default.png with the name of your image.

  bookCover = loadImage("Book Cover.png");

}

​

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  noStroke();

}

​

function draw() {

  background(40);

  lights();

  drawBook();

​

  // here we are smoothen the 

  // movement of x,y and z which

  // we use to rotate the book and 

  // zoom in and out.

  x += (nx - x) * 0.04;

  y += (ny - y) * 0.04;

  z += (nz - z) * 0.04;

}

​

// our book cover function which 

// draws a box and a textured plane 

// on top, our book. 

function drawBook() {

  let bookHeight = height / 2;

  let bookWidth = bookHeight * 0.8;

  let bookThickness = 30;

  push();

  translate(0,0,z);

  rotateX(x);

  rotateY(y);

  box(bookWidth, bookHeight, bookThickness);

  push();

  translate(0, 0, bookThickness/2 + 0.1);

  texture(bookCover);

  plane(bookWidth, bookHeight);

  pop();

  pop();

}

​

// below we are detecting user input

// 1. when the mouse is dragged

// 2. when the mousewheel or the trackpad-zoom is used

// 3. when the space bar is pressed

// changes have an effect on the value(s) of

// variables nx, ny, nz which we then use

// in together with variables x,y,z to control

// the orientation of the book.

​

function mouseDragged() {

  nx += (pmouseY - mouseY) * 0.01;

  ny -= (pmouseX - mouseX) * 0.01;

}

​

function mouseWheel(theEvent) {

  nz += theEvent.delta;

  nz = constrain(nz,-400,400);

  return false;

}

​

function keyPressed() {

  if(key == ' ') {

    nx = 0;

    ny = 0;

  }

}

​