morie-pentagon by gka

script.js

var ƒ = d3.f

var width = innerWidth*0.7, 
    height = innerHeight,
    n = 90,
    r = Math.min(width, height)/2 - 10,
    ir = r/8,
    flowers = 4,
    strokeWidth = 4


var lines = d3.range(n)


var canvas = d3.select('body').html('')
  .append('canvas')
  .at({width:width*2, height:height*2})
  .st({width:width, height:height})
  .on('mousemove', function(){
    var pos = d3.mouse(this)

    flowers = d3.scaleLinear().domain([0, width]).range([1, 8])(pos[0])
    strokeWidth = d3.scaleLinear().domain([0, height]).range([1, 10])(pos[1])
  })
  .node()

var ctx = canvas.getContext('2d');
ctx.scale(2,2);
ctx.translate(width/2, height/2);


if (window.timer) window.timer.stop()
window.timer = d3.timer(function(t){
  ctx.clearRect(-width/2, -height/2, width, height)
ctx.globalAlpha =1;
  ctx.fillStyle = '#28b0ff'
  ctx.lineWidth = strokeWidth
  lines.forEach(function(i){
    var θ = i*Math.PI*2/(n);
    var f = i/90;
    var or = r - 10;
    
    var dθ = 0.03,
        dphi = 0.33 ,
        rs = 0.2 + Math.abs(f%0.2-0.3) * 0.8;
    var x0 = Math.cos(θ)*or;
    var y0 = Math.sin(θ)*or;
    var x1 = Math.cos(θ+dθ)*or;
    var y1 = Math.sin(θ+dθ)*or;
    var x2 = Math.cos(θ+dθ+dphi)*r*rs;
    var y2 = Math.sin(θ+dθ+dphi)*r*rs;

     var x3 = Math.cos(θ+dphi)*r*rs;
    var y3 = Math.sin(θ+dphi)*r*rs;
    
    var j =  Math.sin(θ*flowers)*2 + i

    var xj = Math.cos(j*Math.PI*2/n)*ir
    var yj = Math.sin(j*Math.PI*2/n)*ir

    ctx.beginPath() 
    ctx.moveTo(x0, y0)
    ctx.lineTo(x1, y1)
    ctx.quadraticCurveTo(x2, y2, 0, 0);
    //ctx.lineTo(x2, y2)
    //ctx.lineTo(0, 0)
    ctx.quadraticCurveTo(x3, y3, x0, y0)
//     ctx.stroke();
    ctx.fill();
  })

  ctx.fillStyle = '#000'
//   ctx.globalAlpha = 0.000648;
	ctx.rotate(4/2000)
  var s = -t/2000
  var arc = d3.arc()
    .innerRadius(0)
    .outerRadius(r)
    .startAngle(function(i){ return (s + i)*Math.PI*2/n })
    .endAngle(function(i){   return (s + i + .5)*Math.PI*2/n })
    .context(ctx)

  ctx.beginPath()
  lines.forEach(arc)
  ctx.fill()

  ctx.moveTo(ir, 0)
  ctx.arc(0, 0, ir, 0, 2 * Math.PI)
  ctx.fill()


})

ctx.beginPath() 
ctx.moveTo(0,0);           // Create a starting point

ctx.arcTo(150,20,150,70,50)
ctx.stroke()



ctx.beginPath(); 
ctx.moveTo(20,20);           // Create a starting point
ctx.arcTo(150,20,150,70,50); // Create an arc
// ctx.stroke();                // Draw it

index.html

<!DOCTYPE html>
<meta charset='utf-8'>
<link rel="stylesheet" type="text/css" href="style.css">

<body></body>

<script src='d3v4.js'></script>
<script src='lodash.js'></script>
<script src='script.js'></script>

readme.md

Trying to replicate [http://www.ignant.com/submissions/parratoro-moire-as-energy-beings/](http://www.ignant.com/submissions/parratoro-moire-as-energy-beings/).

style.css

svg{
	overflow: visible;
}

body{
  font-family: monospace;
  margin: 0px;
  overflow: hidden;
}