index.html

## readme.md

      
          Raw
        
        
              readme.md
            
          
    Triangles over letter idea stolen from Shirley Wu. 

  
## index.html
<!DOCTYPE html>
<meta charset='utf-8'>
<body style='background: #000;'>
  <canvas width='960' height='960'></canvas>
</body>
<script src='//d3js.org/d3.v4.min.js'></script>
<script>
var width = 960
var height = 960

var canvas = d3.select('canvas').node()
var ctx = canvas.getContext('2d');

var triangles = d3.range(screen.width < 400 ? 250 : screen.width < 600 ? 500 : 1000)
  .map(function(d, i){ return [randomL(), randomR(), i % 2 ? randomL() : randomR()] })

d3.timer(function(t){
  var isGrowing = (t % 10000) < 500

  ctx.globalCompositeOperation = 'lighter'
  ctx.clearRect(0, 0, width, height)

  triangles.forEach(function(d, i){
    d.forEach(function(d, i){
      var dist = Math.abs(height/2 - d.y)
      var dx = d.s*(dist + isGrowing)/30
      d.x += clamp(-1.4, dx, 1.4)

      if ( d.isL && d.x > width/2 || !d.isL && d.x < width/2){
        d.s = -d.s
        d.x = width/2
      }
      if (d.x < 0 || d.x > width){
        d.s = -d.s
      }

      d.y = XtoY(d.x)
    })

    ctx.fillStyle = ['rgba(',
      d[0].s < 0 ? 0 : 255, ',',
      d[0].s > 0 ? 0 : 255, ',',
      255, ',',
      4/triangles.length, ')'].join('')

    drawTriangle(d)
  })

  ctx.globalCompositeOperation = 'source-over'

  ctx.strokeStyle = '#000'
  ctx.beginPath()
  ctx.moveTo(width/4,   height/2)
  ctx.lineTo(width/4*3, height/2)
  ctx.stroke()
})


function randomL(){
  var x = width/4 + Math.random()*20 - 10
  return {x:x, y: XtoY(x), isL: true, s: (.5 - Math.random())}
}

function randomR(){
  var x = width/4 + Math.random()*20 - 10 + width/2
  return {x:x, y: XtoY(x), isL: false, s: (.5 -Math.random())}
}

function XtoY(x){
  return x < width/2 ? height - x*2 : x*2 - height
}

function clamp(a, b, c){
  return b < a ? a : b > c ? c : b
}

function drawTriangle(p){
  ctx.beginPath()
  ctx.lineTo(p[0].x, p[0].y)
  ctx.lineTo(p[1].x, p[1].y)
  ctx.lineTo(p[2].x, p[2].y)
  ctx.fill()
}


d3.select(self.frameElement).style('height', height + 'px');
</script>