1wheel/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>

## preview.png

      
    Raw
  

              preview.png
            
          
## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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 - x2 : x2 - 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>