Skip to content

Instantly share code, notes, and snippets.

@mohdali
Last active July 16, 2017 15:54
Show Gist options
  • Save mohdali/36f427bc905f11f0271977c53eb8bbf6 to your computer and use it in GitHub Desktop.
Save mohdali/36f427bc905f11f0271977c53eb8bbf6 to your computer and use it in GitHub Desktop.
Rolling Shutter Simulation
license: mit
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment