p5.book: make a book with code

Here, we are using many different functions from p5.js to draw a red circle on a pink background. You can use any p5.js functions you like to create your pages — there are no limitations on the visuals you can create.

functionName(argument1, argument2, ...);
background("orange");
circle(x, y, diameter);

A function is a pre-defined block of code that performs a specific task. For example, background("orange") is a function that fills the canvas with orange color, and circle(x, y, diameter) is a function that draws a circle at position (x, y) with the specified diameter.

A function consists of a function name (like background or circle), followed by parentheses (). Inside the parentheses, you can pass arguments that tell the function how to do its job.

For example:

• background(255, 0, 0) tells the background function to fill the canvas with red color (255 for red, 0 for green and blue).
• The circle(100, 150, 50) function call tells it to draw a circle at x=100, y=150 with a diameter of 50 pixels.

You can use either RGB, hex codes, or color names to specify colors in p5.js. For example, background("blue"), background(0, 0, 255) and background("#0000ff") will fill the canvas with blue color.

• Try the color picker here:

• Or see a list of color names here

background(color);
background(255, 0, 0); // red background
background("blue"); // blue background
background(0, 255, 0, 128); // semi-transparent green background
background(random(255), random(255), random(255)); // random background color

Every time you call a function, it performs its task immediately.

• So when you call background("orange"), it fills the canvas with a giant box of orange right away. When you call circle(width / 2, height / 2, 50), it draws the circle on the canvas immediately.
• The order of your function calls matters, because they are executed in sequence. If you call background() after circle(), the background will cover the circle and you won’t see it.

Every function is designed to do one specific thing, and you can combine them to create complex visuals. For example, you can use fill() to set the color for shapes, stroke() to set the outline color, and text() to draw text on the canvas.

fill(255, 0, 0); // set fill color to red
stroke(0); // set stroke color to black
strokeWeight(2); // set stroke thickness
circle(100, 150, 50); // draw a circle with the current fill
text("Hello, world!", 200, 100); // draw text at position (200, 100)

You can also save these values in variables and reuse them across your sketch. For example:

let circleColor = [255, 0, 0]; // red color
fill(circleColor);

Every function is unique!

They’re unique in how it works and what arguments it takes.

For example:

• background() can take a color name like “orange”, or RGB values like background(255, 165, 0)
• While shape functions like circle(x, y, diameter) takes x and y coordinates and a diameter.

background("orange"); // background takes a color argument
circle(100, 150, 50); // circle takes x, y, and diameter
text("Hello", 200, 100); // text takes a string and x, y

The best way to learn is to experiment with different functions and see what they do. You can check out the p5.js reference for a complete list of functions and how to use them.

Or here is a cheatsheet with the most commonly used functions to get you started.

When you press ▶ Play. The sketch runs 8 times, once per page. After the last page a viewer opens, try the view dropdown at the top left (flipbook / grid / 3D view), and the download button.

You can change the size of the book by passing different arguments to createBook(). The first two are width and height in inches, the third is page count.

createBook(width, height, pageCount);

You can also pass a standard paper size as a string: “A3”, “A4”, “A5”, “A6”, “letter”, “legal”, or “tabloid”. For example, createBook("A5", 20) makes an A5 book with 20 pages.

createBook("A5", pageCount);
createBook("letter", pageCount);
createBook("tabloid", pageCount);

If you want to make a custom size, you can also pass dimensions like millimeters, centimeters, or inches. Just add a fourth argument with the unit:

createBook(100, 200, 20, "mm"); // 100x200 mm book with 20 pages
createBook(10, 15, 15, "cm"); // 10x15 cm book with 15 pages
createBook(4, 6, 10, "in"); // 4x6 inch book with 10 pages

If you just want to show the page number, you can do that:

function draw() {
  background("orange");

  fill(0);
  textSize(width / 2);
  textAlign(CENTER, CENTER);
  text(book.pageNumber, width / 2, height / 2);

  book.addPage();
}

Here we draw the page number huge and centred on each page. Press ▶ Play to see it in action.

You can use book.pageNumber to make things change per page:

function draw() {
  background("orange");

  // circle moves right each page: 40, 80, 120…
  let x = book.pageNumber * 40;
  circle(x, height / 2, 60);

  book.addPage();
}

We multiply the page number by 40 to get the x position of the circle.

We can use if and else (conditional statements) to check if we’re on the first or last page, and draw something different for those pages.

if (book.isFirstPage()) {
  // draw cover
} else if (book.isLastPage()) {
  // draw back cover
} else {
  // draw inside pages
}

Let’s make a simple cover and back cover:

function draw() {
  if (book.isFirstPage()) {
    background("orange"); // orange cover
    fill(255);
    textSize(60);
    textAlign(CENTER, CENTER);
    text("COVER", width / 2, height / 2);
  } else if (book.isLastPage()) {
    background("black"); // black back cover
    fill(255);
    textSize(60);
    textAlign(CENTER, CENTER);
    text("THE END", width / 2, height / 2);
  } else {
    background(255);
    fill(0);
    textSize(60);
    text(book.pageNumber, width / 2, height / 2);
  }

  book.addPage();
}

We can also use if(pageNumber === 1) instead of isFirstPage(), and if(pageNumber === totalPages) instead of isLastPage().

if (book.pageNumber === 1) {
  // draw cover
} else if (book.pageNumber === book.totalPages) {
  // draw back cover
} else {
  // draw inside pages
}

There’s no right or wrong way to do it — use whichever you find easier to read and understand.

Instead of just different front and back covers, you could also use the page number to specify different content for each page. Let’s say on page 1 we want to say “Welcome”, on page 2 we want to say “To My Book”, and on page 3 we want to say “Enjoy!”.

function draw() {
  if (book.pageNumber === 1) {
    background("orange");
    fill(255);
    textSize(60);
    textAlign(CENTER, CENTER);
    text("Welcome", width / 2, height / 2);
  } else if (book.pageNumber === 2) {
    background("yellow");
    fill(255);
    textSize(60);
    textAlign(CENTER, CENTER);
    text("To My Book", width / 2, height / 2);
  } else if (book.pageNumber === 3) {
    background("purple");
    fill(255);
    textSize(60);
    textAlign(CENTER, CENTER);
    text("Enjoy!", width / 2, height / 2);
  } else {
    background(255);
    fill(0);
    textSize(60);
    text(book.pageNumber, width / 2, height / 2);
  }

  book.addPage();
}

Remember that page numbers start at 1, so the first page is page 1, the second page is page 2, and so on. You can use as many else if statements as you want to customize each page of your book.

Try it out! Add book.setSpread(true) in setup(), and see how the canvas changes.

Other than the cover and back cover, all the pages are either left or right pages. You can check which one you’re on with book.isLeftPage() and book.isRightPage(). Use those to draw different content on left and right pages.

if (book.isLeftPage()) {
  // draw left page content
} else if (book.isRightPage()) {
  // draw right page content
}

For example, you could make all the left pages blue and all the right pages pink:

if (book.isLeftPage()) {
  background("blue");
} else if (book.isRightPage()) {
  background("pink");
}

You can also decide if this book should open from the left or the right. By default, it opens from the right, which is standard for English books. But if you want to make a book that opens from the left, like in Traditional Chinese, Japanese, Arabic or Hebrew, you can add this line in setup():

book.setDirection("rtl"); // right-to-left

Try adding book.setBleed(0.125) in setup(), and see how the bleed area is added around the canvas.

To draw on the bleed area, use book.bleed instead of the main canvas. For example, book.bleed.background(220, 60, 80) will fill the entire bleed area with that colour. The main canvas is still where you draw your content, but the bleed layer is where you draw any backgrounds or elements that should extend to the edge of the page.

You can also use the bleed layer to add design elements that intentionally go past the trim line, like an image.

let img;

async function setup() {
  book = createBook(4, 6, 8);
  book.setBleed(0.125);

  img = await loadImage("https://picsum.photos/200/300");
}

function draw() {
  // draw a big circle that extends into the bleed area
  book.bleed.image(img, 0, 0, book.bleed.width, book.bleed.height);

  // main canvas content
  clear();
  fill(255);
  textSize(width / 2);
  textAlign(LEFT, TOP);
  text(book.pageNumber, 20, 24);

  book.addPage();
}

Here we load an image and draw it on the bleed layer, making it extend past the trim line. The main canvas is still where we draw the page number, but the image fills the entire bleed area.

First, you need to load a font in setup(). You can use any font file (like .ttf or .otf) that you have, or you can use a web font from Google Fonts. For example, to load the “Georgia” font, you can do this:

let book;
let myFont;

async function setup() {
  book = createBook(4, 6, 8);
  myFont = await loadFont("inconsolata.otf");

  textFont(myFont); // set the font for drawing text
}

Or you can load a Google Font like this:

let book;
let myFont;

async function setup() {
  book = createBook(4, 6, 8);
  myFont = await loadFont(
    "https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&display=swap",
  );

  textFont(myFont);
}

You can create a beautiful pattern by using loops and mathematical functions. For example, you could create a spiral pattern that changes with each page:

function draw() {
  background(255);
  translate(width / 2, height / 2); // move origin to center

  let angle = book.pageNumber * 0.1; // change angle per page
  let radius = book.pageNumber * 5; // change radius per page

  for (let i = 0; i < 100; i++) {
    let x = radius * cos(angle + i * 0.1);
    let y = radius * sin(angle + i * 0.1);
    stroke(0, 50);
    line(0, 0, x, y);
  }

  book.addPage();
}

When you run this, you’ll see a spiral pattern that evolves across the pages. You can experiment with different mathematical functions, colors, and shapes to create your own unique generative patterns.

Here is another example of a generative pattern that uses Perlin noise to create a poetic landscape that changes across pages:

function draw() {
  background(255);
  let noiseScale = 0.01;
  let time = book.pageNumber * 0.1;

  for (let x = 0; x < width; x++) {
    let y = noise(x * noiseScale, time) * height;
    stroke(0);
    line(x, height, x, y);
  }

  book.addPage();
}

The Perlin noise function creates a smooth, natural-looking pattern that resembles hills or waves. As you flip through the pages, the landscape changes and evolves.