These are instructions for creating an autmated video from an HTML5 Canvas ![](https://cdn.steemitimages.com/DQmSYb7eVBvh7Q2Hro3dgvCmLVDdWrG83oZitJBthJh4bu5/image.png) You will need an HTTP server running PHP, on your local machine to do this. I've tried a few and recommend WAMP. If you attempt this with a public website, you will need a queue of sorts and the ability to wait for large amounts of data to upload. ### Start with a simple animation. ``` //Javascript (function () { var canvas = document.getElementById('c'), c = canvas.getContext('2d'), w = canvas.width, h = canvas.height, p = [], clr, n = 200; clr = [ 'red', 'green', 'blue', 'yellow', 'purple' ]; for (var i = 0; i < n; i++) { // generate particle with random initial velocity, radius, and color p.push({ x: w/2, y: h/2, vx: Math.random()*12-6, vy: Math.random()*12-6, r: Math.random()*4+3, clr: Math.floor(Math.random()*clr.length) }); } function frame() { // cover the canvas with 50% opacity (creates fading trails) c.fillStyle = 'rgba(0,0,0,0.5)'; c.fillRect(0, 0, w, h); for (var i = 0; i < n; i++) { // reduce velocity to 99% p[i].vx *= 0.99; p[i].vy *= 0.99; // adjust position by the current velocity p[i].x += p[i].vx; p[i].y += p[i].vy; // detect collisions with the edges if (p[i].x < p[i].r || p[i].x > w-p[i].r) { // reverse velocity (direction) p[i].vx = -p[i].vx; // adjust position again (in case it already passed the edge) p[i].x += p[i].vx; } // see above if (p[i].y < p[i].r || p[i].y > h-p[i].r) { p[i].vy = -p[i].vy; p[i].y += p[i].vy; } // draw the circle at the new postion c.fillStyle = clr[p[i].clr]; // set color c.beginPath(); c.arc(p[i].x, p[i].y, p[i].r, 0, Math.PI*2, false); c.fill(); } } // execute frame() every 30 ms setInterval(frame, 30); }()); ``` [Working Example](https://codepen.io/sdavignon/pen/oaJEmq) Notice there is a function, called frame, that is executed every 30 milliseconds via javascript setInterval. This frame function represents a single frame of the animation in which each particle is adjusted and rendered into the image. The velocity is also reduced to 99% each frame, to cause the particles to gradually slow down. ### Recording Frames Creating a video will require the capture of each frame as an image. In HTML5 the canvas element allows access to this image data with the canvas toDataURL method. This method returns a base64 encoded stream of data as a URL which can be understood by the browser. Using PHP we will extract the base64 string, decode it to binary, then write it to a PNG file named with the sequence number. Every time a new frame is rendered, the javascript code will send the frame data URL along with a serial number asynchronously to the web server. Each frame will be executed repeating the process until the sequence is complete. The final step of processing will require FFMPEG to combine the sequenced images into a video. ### Webserver setup Using a very simple PHP script we can extract the base64 data, decode it with the base64_decode function and save the binary data to a file with file_put_contents. ``` //PHP File to receive the recorded frame w-p[i].r) { // reverse velocity (direction) p[i].vx = -p[i].vx; // adjust position again (in case it already passed the edge) p[i].x += p[i].vx; } // see above if (p[i].y < p[i].r || p[i].y > h-p[i].r) { p[i].vy = -p[i].vy; p[i].y += p[i].vy; } // draw the circle at the new postion c.fillStyle = clr[p[i].clr]; // set color c.beginPath(); c.arc(p[i].x, p[i].y, p[i].r, 0, Math.PI*2, false); c.fill(); } var req = new XMLHttpRequest(); // open a POST request to our backend req.open('post', 'saveframe.php'); // capture the data URL of the image var data = canvas.toDataURL(); // encode the data along with the frame identifier (and increment it) data = 'data=' + encodeURIComponent(data) + '&i=' + counter++; // set the appropriate request headers req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); req.setRequestHeader("Content-length", data.length); req.setRequestHeader("Connection", "close"); // handle request responses req.onreadystatechange = function () { // continue if request is done if (req.readyState === 4 && req.status === 200) { // if we have not finished recording, execute another frame if (counter < 150) { frame(); } else { alert('done'); } } }; // send the data req.send(data); } // start the whole process frame(); }()); ```