-
-
Save motyar/5da7762ae99d0478f0e5af1a182134cf to your computer and use it in GitHub Desktop.
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/[email protected]/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