p5-runner
TypeScript icon, indicating that this package has built-in type declarations

1.2.1 • Public • Published

p5 runner

A tool for running and exporting p5.js sketches in a modern ESNext environment.

As soon as you make changes to your sketch file, this package will automatically reload the sketch in the browser. The tool also provides a simple API for getting animation frames out of the browser and saving them as PNG files.

Usage

  1. npm init -y
  2. npm install --save p5-runner
  3. Create index.js
import { runSketch } from "p5-runner"
 
const size = 512
const fps = 50
 
const { sin, cos, PI } = Math
const r = size / 3
 
runSketch((p, api) => {
  p.setup = () => {
    p.createCanvas(size, size)
    p.frameRate(fps)
 
    p.noFill()
    p.stroke("pink")
    p.strokeWeight(15)
  }
 
  p.draw = () => {
    p.background("aquamarine")
 
    p.translate(size / 2, size / 2)
 
    p.beginShape()
    for (let i = 0; i < 48; i++) {
      const v = getPos(p.frameCount - i)
      p.vertex(v.x, v.y)
    }
    p.endShape()
 
    // if (p.frameCount <= 250) api.saveFrame("out/out.#####.png")
  }
 
  const getPos = frameCount => {
    const t = frameCount / fps / 2
    const x = sin(* 2 * PI) * r
    const y = cos(* 3 * PI) * r
    return p.createVector(x, y)
  }
})
  1. npx p5-runner or npx p5-runner index.js
  2. Go to http://localhost:3000

Exporting your sketch as PNG files

Calling the api.saveFrame() method in your sketch file will save the current animation frame in your project's directory. The default output location is "out/out.#####.png" but you can also provide your own destination path like this: api.saveFrame("renders/sketch01/#####.png") or api.saveFrame("still.png")

Readme

Keywords

none

Package Sidebar

Install

npm i p5-runner

Weekly Downloads

0

Version

1.2.1

License

ISC

Unpacked Size

21.5 kB

Total Files

32

Last publish

Collaborators

  • paulkre