| license: mit |
Simulation of the Rolling Shutter effect using canvas and d3 lineRadial.
The effect was recently demonstrated on Detsin's SmarterEveryDay Youtube Channel and Matt Parker's standupmaths Youtube Channel.
Rotation speed is randomized after the first shot.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Rolling Shutter Simulation</title> | |
| </head> | |
| <style> | |
| canvas { | |
| background-color: lightblue; | |
| } | |
| </style> | |
| <body> | |
| <script src="https://d3js.org/d3.v4.min.js" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| var width = 960, | |
| height = 500; | |
| var canvas = d3.select("body").append("canvas") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .node().getContext("2d"); | |
| var shutter = 0; | |
| var circle = d3.symbol() | |
| .type(d3.symbolCircle) | |
| .size(1000) | |
| .context(canvas); | |
| /* | |
| Fan Shape definition. | |
| Modify the parameters to change the shape. | |
| */ | |
| var numOfPoints = 100; | |
| var numOfBlades = 5; | |
| var rotationSpeed = 2.5; // relative to shutter speed | |
| var angleDeg = 0; | |
| var theta = angleDeg / 180 * Math.PI; | |
| var points = d3.range(numOfPoints); | |
| var scale = d3.scaleLinear() | |
| .domain(d3.extent(points)) | |
| .range([0, 2 * Math.PI]); | |
| var shape = d3.lineRadial() | |
| .radius(function (d) { return 200 * Math.sin(numOfBlades * scale(d)); }) | |
| .angle(function (d) { return scale(d); }) | |
| .curve(d3.curveCardinalClosed) | |
| .context(canvas); | |
| canvas.strokeStyle = 'green'; | |
| canvas.fillStyle = "black"; | |
| canvas.save(); | |
| setInterval(function () { | |
| canvas.beginPath(); | |
| canvas.setTransform(1, 0, 0, 1, 0, 0); | |
| canvas.clearRect(0, shutter, width, height - shutter); | |
| canvas.rect(0, shutter, width, height - shutter); | |
| canvas.clip(); | |
| canvas.beginPath(); | |
| canvas.moveTo(0, shutter + 3); | |
| canvas.lineTo(width, shutter + 3); | |
| canvas.stroke(); | |
| canvas.setTransform(Math.cos(theta), Math.sin(theta), 0, 1, width / 2, height / 2); | |
| canvas.rotate(shutter * rotationSpeed / 180 * Math.PI); | |
| shape(points); | |
| canvas.fill(); | |
| canvas.beginPath(); | |
| circle(); | |
| canvas.fill(); | |
| shutter = (shutter + 1) % height; | |
| if (shutter == 0) { | |
| canvas.restore(); | |
| canvas.save(); | |
| rotationSpeed = d3.randomUniform(0.1, 5)(); | |
| } | |
| }, 1); | |
| </script> | |
| </body> |
