💃 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 stageul()— Upstage leftuc()— Upstage centerur()— Upstage rightcl()— Center leftcr()— Center rightdl()— Downstage leftdc()— Downstage centerdr()— 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!
New to Coding Resources
Processing Foundation https://processingfoundation.org/projects
p5js https://p5js.org/
Coding Train https://www.youtube.com/@TheCodingTrain
