p5score - a choreographic library for p5js

More Resources

Workshop

two dancers in front of a projection of a p5 canvas

💃 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();

Click image above to play in p5 web editor

Example: Multiple Dancers with Custom Timing and Paths

This sketch demonstrates how to choreograph three dancers using custom position arrays and durations. Each dancer follows a unique path and timing, creating layered movement across the canvas.

🔗 View this sketch on the p5.js Web Editor

🧠 What This Demonstrates

  • Three dancers with different starting positions and movement paths.

  • Custom timing for each dancer using millisecond durations.

  • Position arrays that define where each dancer moves over time.

  • A grid background for spatial reference .

📌 Notes

  • The dancer() class is where the magic happens

  • The moves() method likely schedules the dancer's movement based on the provided durations and positions.

  • The show() method renders the dancer at its current position.

p5score Workshop

On September 27 & 28, 2025, movement artists gathered in Richmond, VA for the p5score workshop, a two-day event led by Kate Sicchio that merged dance and code through the creative use of p5.js—a JavaScript library for visual and interactive programming. The workshop explored how code can generate visual iconography and dynamic environments for performance, offering new ways to think about choreography, improvisation, and the role of technology in dance-making.

What Participants Experienced:

  • Hands-on sessions introducing p5.js as a choreographic tool

  • Experiments in algorithmic choreography and visual score generation

  • Collaborative exploration of the relationship between movement, code, and visual form

  • A supportive environment for artists of all technical backgrounds—no prior coding experience was required

Who Attended:

Choreographers and movement-based artists interested in interdisciplinary practice came together to explore new tools and rethink the role of the computer in creative processes. The workshop fostered experimentation, collaboration, and play.

Workshop Details:

  • Workshop Lead: Kate Sicchio

  • Dates: September 27 & 28, 2025

  • Location: Richmond, VA

  • Participation: Free for selected participants, with accommodation and travel stipends provided

Although this workshop has concluded, p5score is an open source project, and materials from the event will be shared soon. Stay tuned for future opportunities to engage with this exciting intersection of dance and code!

Two dancers moving with a floor projected score

New to Coding Resources