Add a tutorial category for using p5 beyond the web editor

[davepagurek]

Increasing Access

Our tutorials currently are geared for the p5 web editor as a quick and easy way to get started. However, p5 is often used in other spots, embedded in other webpages, and we currently have no first-party documentation to help with that. Adding it could help people more smoothly integrate p5 in the wild, and help show people more possibilities of what you can do with p5 outside of "just" a web editor sketch.

Most appropriate sub-area of p5.js?

Tutorials

Feature request details

I'm imagining we could have a tutorial category called something like "Beyond the Web Editor" or "p5.js in the Wild" to cover ways of deploying p5 in different places and the nuances of each one. Potentially this could involve an overview tutorial showing lots of options, and then we could have separate tutorials for more details for each platform as necessary.

Here are some initial ideas about what this could include:

• Probably an overview of the difference between global/instance mode to start with
• Embedding an iframe to a global mode sketch
  • This is probably the best choice by default, as it allows you to use global mode, and you can have many sketches on a page
  • For performance, one can dynamically load and unload the iframe by changing its src when it scrolls into view. We do this same technique on the p5 site already.
• Loading the sketch canvas into a container
  • You can call createCanvas(width, height).parent('someID') to create the p5 canvas in an existing container on a page
  • You can do one of these if using global mode, or many if using instance mode
  • You have less flexibility to dynamically load/unload though compared to iframes
• Loading an ESM script (using one of the two above techniques)
  • This is when you do <script type="module" src="mysketch.js">
  • The benefit of this is you can do import statements in your code to load other files!
  • If using global mode, you have to write window.setup = function () { ... } instead of just function setup() { ... } for all lifecycle events
  • Instance mode works the same as usual
• Using TypeScript
  • Currently blocked on Refactor typescript type generation p5.js#8114
  • Mention importing the global types (import P5 from 'p5/types/global') and instance mode types (`import P5 from 'p5')
• Loading in React/Angular

  • You pretty much have to use instance mode, unless you're just using an <iframe> to a non-React sketch

  • Remember to unload your sketch too!

  • Code looks like this:

    import P5 from 'p5'
    export function MySketchComponent() {
      const containerRef = useRef()
    
      useEffect(() => {
        const p5 = new P5(() => {
          p5.setup = function() {
            // ...
          }
          p5.draw = function() {
            // ...
          }
        })
    
        // Important: clean up afterwards!
        return () => p5.remove()
      }, [])
    
      return <div ref={containerRef}></div>
    }

  • Probably also need to talk about using React props in your sketch e.g. make a ref with the props object that you update every rerender, and then reference that in your sketch:

    export function MySketchComponent(props) {
      const containerRef = useRef()
      const propsRef = useRef(props)
      propsRef.current = props
    
      useEffect(() => {
        const p5 = new P5(() => {
          p5.setup = function() {
            // ...
          }
          p5.draw = function() {
            // Do something with propsRef.current here,
            // it will be up-to-date each frame!
          }
        })
    
        // Important: clean up afterwards!
        return () => p5.remove()
      }, [])
    
      return <div ref={containerRef}></div>
    }

  • Do something similar with Angular (I don't know angular myself but it should be conceptually similar to what the React code is doing)

We don't need to do all of this at once, but potentially we can start with a few and then start to chip away at it!

[hxrshxz]

Hi @davepagurek,I 'd love to work on it. I can start with the first few topics you suggested, like I can begin by writing the tutorial for embedding a p5.js sketch using an <iframe>. could you please assign this issue to me? Thanks!

[davepagurek]

Hi @hxrshxz! Thanks, let me know if you need any help with making a new tutorial category or anything. Also I think I didn't mention in the original issue but let's start by adding these to the 2.0 branch (and we can always copy relevant ones over to the 1.x site after.)