Video export from p5.js sketch 1
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Document</title> | |
<script src="https://unpkg.com/h264-mp4-encoder/embuild/dist/h264-mp4-encoder.web.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/p5@1.1.9/lib/p5.js"></script> | |
<style> | |
html { font-family: sans-serif; font-size: 12px; } | |
</style> | |
</head> | |
<body> | |
<script> | |
/* | |
library used: https://github.com/TrevorSundberg/h264-mp4-encoder | |
a simple example exporting mp4 with p5js. | |
custom animation loop, not using draw(), fixed-length animation. | |
*/ | |
let cwidth = 640 | |
let cheight = 360 | |
let button | |
let checkbox | |
const frate = 30 // frame rate | |
const numFrames = 100 // num of frames to record | |
let recording = true | |
function setup() { | |
createCanvas(cwidth, cheight) | |
frameRate(frate) | |
button = createButton('record') | |
button.mousePressed(record) | |
checkbox = createCheckbox(' preview only') | |
checkbox.style('display', 'inline') | |
checkbox.changed(()=> { | |
recording = !recording | |
}) | |
anim(0) // display first frame | |
} | |
function anim(count) { | |
background(220) | |
textSize(128) | |
textAlign(CENTER, CENTER) | |
text(count, width / 2, height / 2) | |
} | |
function record() { | |
HME.createH264MP4Encoder().then(async encoder => { | |
encoder.outputFilename = 'test' | |
encoder.width = cwidth | |
encoder.height = cheight | |
encoder.frameRate = frate | |
encoder.kbps = 50000 // video quality | |
encoder.groupOfPictures = 10 // lower if you have fast actions. | |
encoder.initialize() | |
for (let i = 0; i < numFrames; i++) { | |
anim(i) | |
encoder.addFrameRgba(drawingContext.getImageData(0, 0, canvas.width, canvas.height).data) | |
await new Promise(resolve => window.requestAnimationFrame(resolve)) | |
} | |
encoder.finalize() | |
if (recording) { | |
const uint8Array = encoder.FS.readFile(encoder.outputFilename); | |
const anchor = document.createElement('a') | |
anchor.href = URL.createObjectURL(new Blob([uint8Array], { type: 'video/mp4' })) | |
anchor.download = encoder.outputFilename | |
anchor.click() | |
} | |
encoder.delete() | |
}) | |
} | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment