{"id":6868,"date":"2017-09-29T10:49:31","date_gmt":"2017-09-29T08:49:31","guid":{"rendered":"http:\/\/www.randform.org\/blog\/?p=6868"},"modified":"2017-09-29T18:25:45","modified_gmt":"2017-09-29T16:25:45","slug":"shuttersploshscatterplots","status":"publish","type":"post","link":"https:\/\/www.randform.org\/blog\/?p=6868","title":{"rendered":"ShutterSploshScatterPlots"},"content":{"rendered":"

\"\"<\/a><\/p>\n

Mohammad Ali (mohdali)<\/a> had made a nice illustration of the socalled rolling shutter effect<\/a>. He wrote a programm in javascript which uses the library d3 called Rolling shutter.<\/a><\/p>\n

This program was used by artist Scriptique<\/em> to program a kind of “paint-by-number<\/a> recreational occupation for your browser” (as the artist called it). It should display something like “a paint drop dropping”.<\/p>\n

The program has a MIT licence<\/a> and you can see how well your browser paints by numbers by pasting the program into a file and then opening the file in your browser (tested with firefox).<\/p>\n

<\/p>\n

\n
\r\n<!DOCTYPE html><\/span>\r\n<html><\/span>\r\n\r\n<head><\/span>\r\n <\/span><meta charset=\"utf-8\"><\/span>\r\n <\/span><title>ShutterSploshScatterPlots<\/title><\/span>\r\n<\/head><\/span>\r\n<style><\/span>\r\n <\/span>canvas {<\/span>\r\n <\/span> <\/span>background-color:rgba(50,140,150,0.8)<\/span>\r\n <\/span>}<\/span>\r\n<\/style><\/span>\r\n\r\n<body><\/span>\r\n <\/span><script src=\"<\/span>https:\/\/d3js.org\/d3.v4.min.js<\/a>\" type=\"text\/javascript\"><\/script><\/span>\r\n <\/span><script type=\"text\/javascript\"><\/span>\r\n <\/span> <\/span>var width = 1000,<\/span>\r\n <\/span> <\/span> <\/span>height = 500;<\/span>\r\nvar offset =300;<\/span>\r\nof=400;<\/span>\r\n\r\n <\/span> <\/span>var canvas = d3.select(\"body\").append(\"canvas\")<\/span>\r\n <\/span> <\/span> <\/span>.attr(\"width\", width-60)<\/span>\r\n <\/span> <\/span> <\/span>.attr(\"height\", height+offset)<\/span>\r\n <\/span> <\/span> <\/span>.node().getContext(\"2d\");<\/span>\r\n\r\n <\/span> <\/span>var shutter = 0;<\/span>\r\n\r\n <\/span> <\/span>var circle = d3.symbol()<\/span>\r\n <\/span> <\/span> <\/span>.type(d3.symbolCircle)<\/span>\r\n <\/span> <\/span> <\/span>.size(1000)<\/span>\r\n .context(canvas);<\/span>\r\n\r\n <\/span> <\/span> <\/span>\r\n <\/span> <\/span>\/*<\/span>\r\n <\/span> <\/span> <\/span>Fan Shape definition.<\/span>\r\n <\/span> <\/span> <\/span>Modify the parameters to change the shape.<\/span>\r\n <\/span> <\/span>*\/<\/span>\r\n <\/span> <\/span>var numOfPoints = 100;<\/span>\r\n <\/span> <\/span>var numOfBlades = 5;<\/span>\r\n <\/span> <\/span>var rotationSpeed = 2; \/\/ relative to shutter speed<\/span>\r\n <\/span> <\/span>var angleDeg = 0;<\/span>\r\n <\/span> <\/span>var theta = angleDeg \/ 180 * Math.PI;<\/span>\r\nvar bulge = 20;<\/span>\r\nvar sc=0.7;<\/span>\r\n\r\n <\/span> <\/span>var points = d3.range(numOfPoints);<\/span>\r\n <\/span> <\/span>var scale = d3.scaleLinear()<\/span>\r\n <\/span> <\/span> <\/span>.domain(d3.extent(points))<\/span>\r\n <\/span> <\/span> <\/span>.range([0, 2 * Math.PI]);<\/span>\r\n\r\n <\/span> <\/span>var shape = d3.lineRadial()<\/span>\r\n <\/span> <\/span> <\/span>.radius(function (d) { return sc*Math.sin(scale(d))*(200+bulge*Math.sin(25*scale(d))); })<\/span>\r\n <\/span> <\/span> <\/span>.angle(function (d) { return scale(d); })<\/span>\r\n <\/span> <\/span> <\/span>.curve(d3.curveCardinalClosed)<\/span>\r\n <\/span> <\/span> <\/span>.context(canvas);<\/span>\r\n\r\nvar shape2 = d3.lineRadial()<\/span>\r\n <\/span> <\/span> <\/span>.radius(function (d) { return sc*Math.sin(scale(d))*(200+bulge*Math.sin(25*scale(d))); })<\/span>\r\n <\/span> <\/span> <\/span>.angle(function (d) { return scale(d)+2\/3*Math.PI; })<\/span>\r\n <\/span> <\/span> <\/span>.curve(d3.curveCardinalClosed)<\/span>\r\n <\/span> <\/span> <\/span>.context(canvas);<\/span>\r\n <\/span>\r\n <\/span> <\/span>canvas.save();<\/span>\r\n\r\nvar shape3 = d3.lineRadial()<\/span>\r\n <\/span> <\/span> <\/span>.radius(function (d) { return sc*Math.sin(scale(d))*(200+bulge*Math.sin(25*scale(d))); })<\/span>\r\n <\/span> <\/span> <\/span>.angle(function (d) { return scale(d)+4\/3*Math.PI; })<\/span>\r\n <\/span> <\/span> <\/span>.curve(d3.curveCardinalClosed)<\/span>\r\n <\/span> <\/span> <\/span>.context(canvas);<\/span>\r\n <\/span>\r\nvar shape4 = d3.lineRadial()<\/span>\r\n <\/span> <\/span> <\/span>.radius(function (d) { return sc*Math.sin(scale(d))*(200+bulge*Math.sin(25*scale(d))); })<\/span>\r\n <\/span> <\/span> <\/span>.angle(function (d) { return scale(d)+2\/3*Math.PI })<\/span>\r\n <\/span> <\/span> <\/span>.curve(d3.curveCardinalClosed)<\/span>\r\n <\/span> <\/span> <\/span>.context(canvas);<\/span>\r\n <\/span> <\/span>canvas.save();<\/span>\r\n\r\nvar shape5 = d3.lineRadial()<\/span>\r\n <\/span> <\/span> <\/span>.radius(function (d) { return sc*Math.sin(scale(d))*(200+bulge*Math.sin(25*scale(d))); })<\/span>\r\n <\/span> <\/span> <\/span>.angle(function (d) { return scale(d)+3.3\/3*Math.PI })<\/span>\r\n <\/span> <\/span> <\/span>.curve(d3.curveCardinalClosed)<\/span>\r\n <\/span> <\/span> <\/span>.context(canvas);<\/span>\r\n <\/span> <\/span>canvas.save();<\/span>\r\n\r\nvar shape6 = d3.lineRadial()<\/span>\r\n <\/span> <\/span> <\/span>.radius(function (d) { return sc*Math.sin(scale(d))*(200+bulge*Math.sin(25*scale(d))); })<\/span>\r\n <\/span> <\/span> <\/span>.angle(function (d) { return scale(d)+0*Math.PI })<\/span>\r\n <\/span> <\/span> <\/span>.curve(d3.curveCardinalClosed)<\/span>\r\n <\/span> <\/span> <\/span>.context(canvas);<\/span>\r\n <\/span> <\/span>canvas.save();<\/span>\r\n\r\nvar shape7 = d3.lineRadial()<\/span>\r\n <\/span> <\/span> <\/span>.radius(function (d) { return sc*Math.sin(scale(d))*(200+bulge*Math.sin(25*scale(d))); })<\/span>\r\n <\/span> <\/span> <\/span>.angle(function (d) { return scale(d)+0*Math.PI })<\/span>\r\n <\/span> <\/span> <\/span>.curve(d3.curveCardinalClosed)<\/span>\r\n <\/span> <\/span> <\/span>.context(canvas);<\/span>\r\n <\/span> <\/span>canvas.save();<\/span>\r\n\r\nvar shape8 = d3.lineRadial()<\/span>\r\n <\/span> <\/span> <\/span>.radius(function (d) { return sc*Math.sin(scale(d))*(200+bulge*Math.sin(25*scale(d))); })<\/span>\r\n <\/span> <\/span> <\/span>.angle(function (d) { return scale(d)+Math.PI })<\/span>\r\n <\/span> <\/span> <\/span>.curve(d3.curveCardinalClosed)<\/span>\r\n <\/span> <\/span> <\/span>.context(canvas);<\/span>\r\n <\/span> <\/span>canvas.save();<\/span>\r\n\r\nvar shape9 = d3.lineRadial()<\/span>\r\n <\/span> <\/span> <\/span>.radius(function (d) { return sc*Math.sin(scale(d))*(200+bulge*Math.sin(25*scale(d))); })<\/span>\r\n <\/span> <\/span> <\/span>.angle(function (d) { return scale(d)+Math.PI })<\/span>\r\n <\/span> <\/span> <\/span>.curve(d3.curveCardinalClosed)<\/span>\r\n <\/span> <\/span> <\/span>.context(canvas);<\/span>\r\n <\/span> <\/span>canvas.save();<\/span>\r\n\r\nvar shape10 = d3.lineRadial()<\/span>\r\n <\/span> <\/span> <\/span>.radius(function (d) { return sc*Math.sin(scale(d))*(200+bulge*Math.sin(25*scale(d))); })<\/span>\r\n <\/span> <\/span> <\/span>.angle(function (d) { return scale(d)+Math.PI })<\/span>\r\n <\/span> <\/span> <\/span>.curve(d3.curveCardinalClosed)<\/span>\r\n <\/span> <\/span> <\/span>.context(canvas);<\/span>\r\n <\/span> <\/span>canvas.save();<\/span>\r\n\r\nvar shape11 = d3.lineRadial()<\/span>\r\n <\/span> <\/span> <\/span>.radius(function (d) { return sc*Math.sin(scale(d))*(200+bulge*Math.sin(25*scale(d))); })<\/span>\r\n <\/span> <\/span> <\/span>.angle(function (d) { return scale(d)+0*Math.PI })<\/span>\r\n <\/span> <\/span> <\/span>.curve(d3.curveCardinalClosed)<\/span>\r\n <\/span> <\/span> <\/span>.context(canvas);<\/span>\r\n <\/span> <\/span>canvas.save();<\/span>\r\n\r\nvar shape12 = d3.lineRadial()<\/span>\r\n <\/span> <\/span> <\/span>.radius(function (d) { return 0.5*sc*Math.sin(Math.PI\/2+scale(d))*(200+bulge*Math.sin(25*scale(d))); })<\/span>\r\n <\/span> <\/span> <\/span>.angle(function (d) { return scale(d)+0*Math.PI })<\/span>\r\n <\/span> <\/span> <\/span>.curve(d3.curveCardinalClosed)<\/span>\r\n <\/span> <\/span> <\/span>.context(canvas);<\/span>\r\n <\/span> <\/span>canvas.save();<\/span>\r\n\r\n <\/span> <\/span>setInterval(function () {<\/span>\r\n <\/span> <\/span> <\/span>canvas.beginPath();<\/span>\r\n <\/span> <\/span> <\/span>canvas.setTransform(1, 0, 0, 1, 0, 0);<\/span>\r\n <\/span> <\/span> <\/span>canvas.clearRect(0, shutter, width, height+offset - shutter);<\/span>\r\n <\/span> <\/span> <\/span>canvas.rect(0, shutter, width, height+offset - shutter);<\/span>\r\n <\/span> <\/span> <\/span>canvas.clip();<\/span>\r\n\r\ncanvas.beginPath();<\/span>\r\n <\/span> <\/span> <\/span>canvas.moveTo(0, shutter);<\/span>\r\n <\/span> <\/span> <\/span>canvas.lineTo(width, shutter);<\/span>\r\ncanvas.strokeStyle = \"rgba(87,207,255,0.8)\";<\/span>\r\n <\/span> <\/span> <\/span>canvas.stroke();<\/span>\r\n\r\ncanvas.beginPath();<\/span>\r\ncanvas.setTransform(1,0,0,1,width\/2+200,height\/2+of);<\/span>\r\ncanvas.rotate(rotationSpeed*shutter \/ 180 *Math.PI);<\/span>\r\n\r\nshape11(points);<\/span>\r\n\r\ncanvas.fillStyle = \"rgba(159, 170, 200, 0.6)\";\/**\/<\/span>\r\n <\/span> <\/span> <\/span>canvas.fill();<\/span>\r\n\r\ncanvas.beginPath();<\/span>\r\ncanvas.setTransform(1,0,0,1,width\/2-200,height\/2+of);<\/span>\r\ncanvas.rotate(-rotationSpeed*shutter \/ 180 *Math.PI);<\/span>\r\n\r\nshape10(points);<\/span>\r\n\r\ncanvas.fillStyle = \"rgba(50, 100, 255, 0.6)\";\/**\/<\/span>\r\n <\/span> <\/span> <\/span>canvas.fill();<\/span>\r\n\r\ncanvas.beginPath();<\/span>\r\ncanvas.setTransform(1,0,0,1,width\/2+200,height\/2+of+30);<\/span>\r\ncanvas.rotate(rotationSpeed*shutter \/ 180 * Math.PI);<\/span>\r\n\r\nshape9(points);<\/span>\r\n\r\ncanvas.fillStyle = \"rgba(200, 200, 200, 0.6)\";\/**\/<\/span>\r\n <\/span> <\/span> <\/span>canvas.fill();<\/span>\r\n\r\ncanvas.beginPath();<\/span>\r\ncanvas.setTransform(1,0,0,1,width\/2+100,height\/2+of);<\/span>\r\ncanvas.rotate(rotationSpeed*shutter \/ 180 * Math.PI);<\/span>\r\n\r\nshape8(points);<\/span>\r\n\r\ncanvas.fillStyle = \"rgba(0, 10, 130, 0.8)\";\/**\/<\/span>\r\n <\/span> <\/span> <\/span>canvas.fill();<\/span>\r\n\r\ncanvas.beginPath();<\/span>\r\ncanvas.setTransform(1,0,0,1,width\/2-250,height\/2+of);<\/span>\r\ncanvas.rotate(-rotationSpeed*shutter \/ 180 *Math.PI);<\/span>\r\nshape6(points);<\/span>\r\n\r\ncanvas.fillStyle = \"rgba(03, 150, 200, 0.6)\";\/**\/<\/span>\r\n <\/span> <\/span> <\/span>canvas.fill();<\/span>\r\n\r\ncanvas.beginPath();<\/span>\r\ncanvas.setTransform(1,0,0,1,width\/2+150,height\/2+of-30);<\/span>\r\ncanvas.rotate(rotationSpeed*shutter \/ 180 * Math.PI);<\/span>\r\n\r\nshape7(points);<\/span>\r\n\r\ncanvas.fillStyle = \"rgba(03, 10, 199, 0.8)\";\/**\/<\/span>\r\n <\/span> <\/span> <\/span>canvas.fill();<\/span>\r\n\r\n <\/span> <\/span>canvas.beginPath();<\/span>\r\ncanvas.setTransform(1,0,0,1,width\/2-100,height\/2+of);<\/span>\r\ncanvas.rotate(-rotationSpeed*shutter \/ 180 * Math.PI);<\/span>\r\nshape4(points);<\/span>\r\ncanvas.fillStyle = \"#53f6e1\";<\/span>\r\n <\/span> <\/span> <\/span>canvas.fill();<\/span>\r\n\r\n <\/span>canvas.beginPath();<\/span>\r\n <\/span> <\/span> <\/span>canvas.setTransform(Math.cos(theta), Math.sin(theta), 0, 1, width \/ 2, height \/ 2+of);<\/span>\r\n <\/span> <\/span> <\/span>canvas.rotate(rotationSpeed*shutter \/ 180 *Math.PI);<\/span>\r\n <\/span> <\/span> <\/span>\r\nshape2(points);<\/span>\r\ncanvas.fillStyle = \"rgba(05, 50, 80, 0.6)\";<\/span>\r\n <\/span> <\/span> <\/span>canvas.fill();<\/span>\r\n\r\ncanvas.beginPath(); \/*red ball*\/<\/span>\r\nvar heigh=120+shutter-0.16*shutter<\/span>\r\nif(heigh<height+offset-140){<\/span>\r\ncanvas.setTransform(1,0,0,1,width\/2-50,heigh);}<\/span>\r\n\/*canvas.rotate(rotationSpeed*shutter \/ 180 *Math.PI);*\/<\/span>\r\n\r\nshape12(points);<\/span>\r\n\r\ncanvas.fillStyle = \"rgba(159, 0, 0, 1)\";\/**\/<\/span>\r\n <\/span> <\/span> <\/span>canvas.fill();<\/span>\r\n\r\n <\/span>canvas.beginPath();<\/span>\r\ncanvas.setTransform(1,0,0,1,width\/2-100,height\/2+of);<\/span>\r\ncanvas.rotate(-rotationSpeed*shutter \/ 180 * Math.PI);<\/span>\r\nshape5(points);<\/span>\r\ncanvas.fillStyle = \"rgba(209,237,239,0.6)\";<\/span>\r\n\/*\"#FFF8DC\";*\/<\/span>\r\n <\/span> <\/span> <\/span>canvas.fill();<\/span>\r\n\r\n <\/span> <\/span>canvas.beginPath();<\/span>\r\n <\/span> <\/span> <\/span>canvas.setTransform(Math.cos(theta), Math.sin(theta), 0, 1, width \/ 2, height \/ 2+of);<\/span>\r\n <\/span> <\/span> <\/span>canvas.rotate(rotationSpeed*shutter \/ 180 *Math.PI);<\/span>\r\n <\/span> <\/span> <\/span>shape(points);<\/span>\r\n\r\ncanvas.fillStyle=\"#42edf7\"; \/*blue*\/<\/span>\r\n <\/span>canvas.fill();<\/span>\r\n\r\ncanvas.beginPath();<\/span>\r\ncanvas.setTransform(1,0,0,1,width\/2+100,height\/2+of);<\/span>\r\ncanvas.rotate(rotationSpeed*shutter \/ 180 * Math.PI);<\/span>\r\n\r\nshape3(points);<\/span>\r\n\r\ncanvas.fillStyle = \"rgba(55, 220, 199, 0.8)\";\/*ehemals rot*\/<\/span>\r\n <\/span> <\/span> <\/span>canvas.fill();<\/span>\r\n\r\n <\/span> <\/span>\/*<\/span> <\/span>canvas.beginPath();<\/span>\r\n <\/span> <\/span> <\/span>circle();<\/span>\r\ncanvas.fillStyle=\"blue\";<\/span>\r\ncanvas.fill();*\/<\/span>\r\n\r\n <\/span> <\/span> <\/span>shutter = (shutter + 1) % (height+offset);<\/span>\r\n\r\n <\/span> <\/span> <\/span>if (shutter == 0) {<\/span>\r\nsetInterval(function(){<\/span>\r\n <\/span> <\/span> <\/span> <\/span>canvas.restore();<\/span>\r\n <\/span> <\/span> <\/span> <\/span>canvas.save();<\/span>\r\n <\/span> <\/span> <\/span> <\/span> }, 5000);<\/span>\r\n\/*rotationSpeed=d3.randomUniform(0.1, 5)();*\/<\/span>\r\n <\/span> <\/span> <\/span>}<\/span>\r\n <\/span> <\/span>}, 1);<\/span>\r\n <\/span><\/script><\/span>\r\n<\/body><\/span>\r\n<\/html><\/span>\r\n<\/pre>\n<\/blockquote>\n","protected":false},"excerpt":{"rendered":"
Mohammad Ali (mohdali) had made a nice illustration of the socalled rolling shutter effect. He wrote a programm in javascript which uses the library d3 called Rolling shutter. This program was used by artist Scriptique to program a kind of “paint-by-number recreational occupation for your browser” (as the artist called it). It should display something […]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[5,4,8,31,6,1,14],"tags":[],"_links":{"self":[{"href":"https:\/\/www.randform.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/6868"}],"collection":[{"href":"https:\/\/www.randform.org\/blog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.randform.org\/blog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.randform.org\/blog\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.randform.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6868"}],"version-history":[{"count":28,"href":"https:\/\/www.randform.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/6868\/revisions"}],"predecessor-version":[{"id":6898,"href":"https:\/\/www.randform.org\/blog\/index.php?rest_route=\/wp\/v2\/posts\/6868\/revisions\/6898"}],"wp:attachment":[{"href":"https:\/\/www.randform.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6868"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.randform.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6868"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.randform.org\/blog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6868"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}