Skip to content
A presentation platform written in p5.js
JavaScript Other
Branch: gh-pages
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


Interactive Presentations for the Web

Garrett Flynn (
IML 288: Critical Thinking and Procedural Media
University of Southern California

p5.slides is a p5.js application for the design of custom slide decks with dynamic content. You may find this useful for everything from class presentations to professional keynotes. Press here to try it out!

Getting Started

Youtube Video
Video Introduction: 10 Most Common Actions, Skills Learned, Lessons Learned, and How to Contribute.

Try out the Alpha Release.

Known Bugs


  1. Does not maintain shapes or transitions
  2. Does not allow for presenting


  1. Content (i.e. text boxes, sketches, shapes, etc) cannot be removed once added
  2. Content (i.e. text boxes, sketches, shapes, etc) cannot be translated once added
  3. No way to change color palette


  1. Severe performance issues when adding many sketches to a slide deck


P5.slides contains three objects:

  1. p5.slidesUI(): The GUI and deck holder
  2. p5.slideDeck(): Individual decks
  3. p5.PresentationAssets(): Holder for P5 parameters (text/shapes)



Global Variables
  • allGlobalVariables: Initialize global variables
Main Looping Functions
  • display: Display current slide on the GUI
  • checkInteraction: Check whether any interactions have occurred during the past loop
Populate the UI with Buttons
  • createSidebars: Create and populate GUI sidebars
  • showDeckTabs: Update existing deck tabs
Display Modes
  • editMode: Switch GUI to edit mode
  • presentMode: Switch GUI to present mode
Change the Elements on the Screen
  • textResizer: Resize text to (sub)header or body text specifications
  • toggleCanvases: Remove and add canvases to the GUI
  • toggleEditText: Remove p5 text text and add HTML input boxes to the GUI
  • togglePresentationAssets: Convert HTML to P5 (for use in animations/transitions)
  • togglePresentText: Remove HTML input boxes and add p5 text to the GUI
  • drawFromTouch: Place text OR sketches based on mouse input
Remap Current Elements after Window Size Changes
  • iframeRemapper: Resize iframe objects in relation to current window
  • textRemapper: Resize current text objects in relation to current window
Save Slides
  • saveSlides: Save all slide decks
  • JSONify: Convert deck array into a JSON-able format
  • unpackJSON: Convert a saved JSON into the deck array for a new GUI session



  • addSlides: Add new slide to deck
  • slideTemplates: Determine which template to apply to current slide



  • display: Display presentation assets in the specified format
    • Current formats include shapes and text (which can further be converted into particles)
  • particleDraw: Calculate particle animations
You can’t perform that action at this time.