playground

This is a little javascript playground meant for quickly iterating on P5.js sketches. See it live here! To run locally, you just need to serve index.html using a tool such as VSCode's Live Server.

todo

• sketch eval
  • p5 sketch eval in iframe
  • editor full height
  • eval p5 sketch on type
  • intercept p5 friendly errors
  • put eval in other script
  • how to attach other p5 listeners?
• interface
  • refactor view into templates
  • resize panels
  • copy sketch code button
  • sketch upload
  • sketch download
  • example dropdown
  • resize observer
  • show/hide sketch pane
  • open in official p5 sketch editor? gist?
  • share - put sketch code in url?
  • stop/pause sketch loop button
  • sketch info - framerate, pixel size of window
• editor
  • changes eval sketch
  • save to local storage
  • eval after change timeout
  • linting with jshint
  • jsbeautify
  • autocomplete with p5 terms
  • shortcuts e.g. commenting
  • ctrl-s should save sketch code
• mobile
  • jank version without output pane
  • prevent overscroll behavior
  • sketch should re-eval when keyboard is opened
  • better mobile styling
  • add back output pane
  • investigate other browsers
• output
  • different output formatting: p5 friendly, error, log
  • same message just increments counter
  • should respect buffer
  • scroll with output
  • should output persist?
• bugs
  • iframe resize
  • fix flash on execute? is this possible, as it needs to remove the canvas?
  • sometimes remove is not defined - I believe this is when new P5() doesn't run due to an error
  • audio library loading
• settings
  • toggle localstorage
  • toggle formatting
  • set sketch timeout interval
  • select library addons
• misc
  • sketch templates
    • minimal - setup and draw
  • click on p5 function to go to documentation page