p5score - a choreographic library for p5js

Documentation

💃 Usage

Add a script tag to your sketch in the index.html file:

<script src="https://cdn.jsdelivr.net/npm/p5score@0.1.0"></script>

📘 API Documentation

🕺Dancer Class —

The Dancer class represents a performer in a choreographic score. Each dancer follows a sequence of timed movements defined by position arrays and durations.

🧱 Constructor

new Dancer(x, y, durations, positions, color, shape)

Creates a new dancer object.

Parameters:

• x (Number): Initial x-coordinate.

• y (Number): Initial y-coordinate.

• durations (Array of Number): Duration of each movement in milliseconds.

• positions (Array of Number): Sequence of x/y positions. Must be in [x1, y1, x2, y2, ...] format.

• color (String): Color used to render the dancer.

• shape (Number): size of radius of dancer.

Example:

dancer = new Dancer(200, 200, [1000, 2000], [300, 300, 400, 400], "magenta", 50);

🕒 Methods

moves()

Initializes the dancer’s movement sequence. This method schedules the dancer’s transitions based on the durations and positions provided.

Usage:

dancer.moves();

show()

Renders the dancer on the canvas at its current position. Typically called inside the draw() loop.

Usage:

function draw() {

dancer.show();

}

🎭 Stage Direction

The p5.score library includes built-in functions that return key stage positions as coordinate objects. These functions help choreographers place dancers using familiar stage terminology.

Each function returns an object with .x and .y properties corresponding to canvas coordinates.

Available Functions:

• center() — Center stage

• ul() — Upstage left

• uc() — Upstage center

• ur() — Upstage right

• cl() — Center left

• cr() — Center right

• dl() — Downstage left

• dc() — Downstage center

• dr() — Downstage right

Usage:

let centerStage = center();

let upRight = ur();

let upCenter = uc();

let upLeft = ul();

let centerLeft = cl();

let centerRight = cr();

let downRight = dr();

let downCenter = dc();

let downLeft = dl();