p5.pathRecorder

record, save, and recall animation paths for your p5.js sketches!

p5.pathRecorder offers various methods to interact, recall, store, and save paths of animation. This library's goal is to make gesture based and irregular animations easier and quicker to develop, use, and replicate. The library is designed to work in both 2d and 3d (WEBGL) modes of p5.js

This library is very happy when used with gestural inputs such as mouse position, camera tracking, drawing tablets, touch controls, p5.bots sensor data, etc.

How to add a library to p5.js

Interactive examples

p5.pathRecorder capability as an animation: drawings by Sara Fowler
Drawings by Sara Fowler

Reference

p5pathRecorder class

p5pathRecorder()

instantiate a new path recorder

let recorder;

function setup() {
  recorder = new p5pathRecorder(); //instantiate a new path recorder
}

.recordFrame()

.recordFrame(x,y,[z])

records a frame of location data to the internal buffer

let recorder;

function setup() {
  recorder = new p5pathRecorder(); //instantiate a new path recorder
}

function draw(){
  if(mouseIsPressed){ //only record then the mouse is being pressed
    recorder.recordFrame(mouseX, mouseY); // capture this frames mouse position
  }
}

.play([mode])

plays back the buffer and return the value of the current frame. Returns an p5vector object with recorded x,y,[z] coordinates from the current location in the internal buffer. Returns an object containing x,y,z keys with values of 0 if the buffer is not filled. It's important to only call play() once in the draw function otherwise each additional call will double the speed. Because of this, it's best assigned to a variable and used from that variable throughout the sketch. play() takes an optional string to define the playback mode. The default is forward if no string is passed into play().

playback modes

forward : plays back through the buffer forwards, as it was recorded (default).\ reverse : plays back through the buffer in reverse, backwards from how it was recorded.\ alternate : alternates the playback in a palindrome fashion. Bounces back and forth between forward and reverse in a back-to-back infinite loop.

let recorder;

function setup() {
  recorder = new p5pathRecorder(); //instantiate a new path recorder
}

function draw(){

  let pos = recorder.play() //play back the recording
  // let pos = recorder.play('alternate') //play recording in alternating mode!

  if(mouseIsPressed){
    recorder.recordFrame(mouseX,mouseY) //record a frame to the buffer
  }else{
    //dont draw the ellipse while recording.
    ellipse(pos.x, pos.y, 100, 100)
  }
}

.onEnded()

.onEnded(function(){ //callback })

fires a callback function when the animation loop has ended

let recorder; //make a variable for the path recorder class to exist in

function setup() {
  recorder = new p5pathRecorder(); //instantiate a new path recorder
  recorder.load('myPaths.json') //load some existing paths from a file
  // console.log(recorder.buffer) //see the paths buffer
}
function draw(){
  let pos = recorder.play()

  //listen for the end of the animation loop
  recorder.onEnded(function(){
    console.log('the animation loop has ended!')
  })
}

.buffer

an internal variable containing the animation buffer (an array)

let recorder;

function setup() {
  recorder = new p5pathRecorder(); //instantiate a new path recorder
  console.log(recorder.buffer); //see the contents of the buffer
}

.speed

an internal variable which sets the playback speed (default: 1)

let recorder;

function setup() {
  recorder = new p5pathRecorder(); //instantiate a new path recorder
  recorder.speed = 0.5 ; //set playback to half speed
}

.clear()

clears the internal buffer

let recorder;

function setup() {
  recorder = new p5pathRecorder(); //instantiate a new path recorder
}

function keyPressed(){
  recorder.clear() // clear the buffer
}

.startLocation()

.startLocation(position)

starts the buffer playback at a specific location (cannot exceed the size of the buffer)

let recorder;

function setup() {
  recorder = new p5pathRecorder(); //instantiate a new path recorder
}

function keyPressed(){
  recorder.startLocation(30) //re-start the buffer at the 30th frame
}

.showPaths()

Visual display of the path of the animation, useful for debugging and feedback

let recorder;
function setup() {
  recorder = new p5pathRecorder(); //instantiate a new path recorder
}
function draw(){
  recorder.showPaths(); //show the path of the recording using points
}

.save()

.save('filename')

Save the paths out to an external JSON file for later recall and archiving.

function keyPressed(){
  if(key == 's'){
    recorder.save('myPaths') //save out the paths to an external json file
  }
}

.load()

.load('path/to/data.json')

Load paths which were previously saved into the internal buffer

let recorder; //make a variable for the path recorder class to exist in

function setup() {
  recorder = new p5pathRecorder(); //instantiate a new path recorder
  recorder.load('myPaths.json') //load some existing paths from a file
  // console.log(recorder.buffer) //see the paths buffer
}

bmoren / p5.pathRecorder

readme