Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/hetari/creative-coding/llms.txt

Use this file to discover all available pages before exploring further.

useP5 manages a p5.js sketch in instance mode, which isolates the p5 namespace inside a callback rather than polluting the global scope. You provide a sketch function that defines setup(), draw(), and any other p5 lifecycle methods; the composable handles the dynamic import of p5, constructs the instance bound to a container element, and calls p5.remove() on unmount — mirroring the exact teardown contract of usePixiApp.

​
Signature

export function useP5(
  containerRef: TemplateRef<HTMLElement | null> | ShallowRef<HTMLElement | null>,
): {
  p5: ShallowRef<p5Type | null>
  mountSketch: (sketch: (p: p5Type) => void) => Promise<void>
}

​
Parameters

​
containerRef
TemplateRef<HTMLElement | null> | ShallowRef<HTMLElement | null>
required
A Vue TemplateRef or ShallowRef pointing to the container HTMLElement. The p5 canvas is created inside this element. If the ref is null when mountSketch is called, the function returns early without throwing.

​
Return Value

​
p5
ShallowRef<p5Type | null>
A shallow reactive reference to the active p5 instance. The value is null before mountSketch runs and after the component unmounts. Access p5 methods directly on p5.value when you need to interact with the instance imperatively outside the sketch function.
​
mountSketch
(sketch: (p: p5Type) => void) => Promise<void>
Dynamically imports the p5 library, then constructs a new p5 instance in instance mode — new P5(sketch, containerRef.value). If a previous instance already exists (e.g. on HMR), it is removed first via p5.remove() before the new one is created.

​
Responsibilities

Owned by useP5Owned by the caller (your sketch)
Dynamic import of p5Defining setup(), draw(), and lifecycle methods
Creating the p5 instance in instance modeLoading assets and creating graphics
Binding the instance to the container elementSetting up user interactions
Calling p5.remove() on unmountHandling custom cleanup inside the sketch

​
Usage Example

The following is taken from the shader/learn sketch, which uses useP5 to create a full-screen WEBGL canvas driven by GLSL shaders: 
<script setup lang="ts">
import type p5Type from 'p5'
import { tryOnMounted } from '@vueuse/core'
import { useTemplateRef } from 'vue'
import { useP5 } from '@/composables/useP5'
import fragmentShader from './shader.frag?raw'
import vertexShader from './shader.vert?raw'

const containerRef = useTemplateRef<HTMLElement>('container')
const { mountSketch } = useP5(containerRef)
let myShader: p5Type.Shader

tryOnMounted(() => {
  mountSketch((p) => {
    p.setup = () => {
      p.createCanvas(p.windowWidth, p.windowHeight, p.WEBGL)
      myShader = p.createShader(vertexShader, fragmentShader)
    }
    p.draw = () => {
      p.shader(myShader)
      myShader.setUniform('uTime', p.millis() / 1000.0)
      p.rect(-p.width / 2, -p.height / 2, p.width, p.height)
    }
    p.windowResized = () => {
      p.resizeCanvas(p.windowWidth, p.windowHeight)
    }
  })
})
</script>

<template>
  <Default>
    <div ref="container" class="fixed inset-0 size-full overflow-hidden [&>canvas]:block" />
  </Default>
</template>

​
GLSL Shaders

Use Vite’s ?raw suffix to import .vert and .frag files as plain strings:
import fragmentShader from './shader.frag?raw'
import vertexShader from './shader.vert?raw'
Pass them directly to p.createShader(vertexShader, fragmentShader) inside p.setup. This works with p5’s WEBGL renderer and keeps shader source out of your JavaScript bundle as separate assets.

​
Teardown

On component unmount, useP5 calls tryOnUnmounted (VueUse) to invoke p5.remove(), which stops the draw loop, removes the canvas from the DOM, and frees all p5-managed resources. The tryOnUnmounted variant keeps the teardown SSR-safe.

Build docs developers (and LLMs) love

Get started for freeTalk to us