Video export from p5.js sketch 1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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
This doesn't seem to work when I run it in the P5.js editor and hit record. The other non-looped example worked fine for me.