itmejoby / p5

p5.js creations

p5

https://p5js.org/

Running

Start a Python SimpleHTTPServer at the top level directory

py -m http.server

Visit localhost:8000/index.html

Rendering

• run the script with CCapture code enabled
• hit save after at least 3 seconds are recorded to download all the frames
• run create_canvas.sh

create_canvas.sh

Usage: ./create_canvas.sh [canvas_name] [frames_dir] [output_dir]

The script does a few things:

1. turn frames into an mp4
2. cut the clip to the first 3s
3. concat a reversed version of that clip to the end (6s total)
4. prepares one mp4 for canvas upload and one for twitter upload

Spotify Canvas Requirements

• 3-8s
• 9:16 aspect ratio
• MP4 format

TODO

• dynamic way to turn on the capture, so it's not running in the background
  • like a button next to save to start / stop easier. maybe it changes some boolean "record" flag
• way to pass a script to a general capture script
• use node.js http server
• create_canvas.sh but create_short.sh (constant loop instead of reverse)
• dynamic sketch based on some input (audio, chords, key, hash, etc.)

p5's Issues

Gallery view of sketches

Create a gallery view of previously created sketches.

Dynamic way to capture sketches

Create a cleaner way for ccapture to be enabled with out adding the ccapture_example.js code manually.