Spiraling Birds

forked from tonyhschu's block: Boid Sort of Works

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    console.clear()
    
    // Feel free to change or delete any of the code you see in this editor!
    var NUM_OF_NODES = 130
    var WIDTH = 960
    var HEIGHT = 500
    var TICKS = 0
    var LOCAL_DIST = 30
    
    var TAU = 2 * Math.PI
    
    var mouse = [0, 0]

var forceX = d3.forceX().strength(0.01)
    var forceY = d3.forceY().strength(0.01)

var localAlignment = local.reduce(function(prev, curr) {
            return prev + curr.theta
          }, 0) / local.length
          
          var ld = subtractAngle(node.theta, localAlignment) // cohesion delta

var cx = node.x - localCentroid[0]
          var cy = node.y - localCentroid[1]
          var distFromCentroid = Math.sqrt(cx * cx + cy * cy)
          
          var cohesion = Math.atan2(node.y - localCentroid[1], node.x - localCentroid[0])
          var cd = subtractAngle(node.theta, cohesion) // cohesion delta
          var cohesionPower = sigmoid(distFromCentroid - 120) / 2

node.theta += cd * cohesionPower
         	// node.theta += ld * 0.005
        }
      }
    }
    
    var simulation = d3.forceSimulation()
      .force("collide",d3.forceCollide(function(d){ return d.r }).iterations(16))
    	.force("boid", forceB)	
	    .force("spiral", forceSpiral)    	
    	.alphaDecay(0)
    
    var svg = d3.select("body").append("svg")
    	.attr("style", "background: #333")
      .attr("width", WIDTH)
      .attr("height", HEIGHT)
    	.on("mousemove", function() {
      	mouse = d3.mouse(this);
       	
        forceX.x(mouse[0])
      	forceY.y(mouse[1])
        
        simulation.alpha(1)
        simulation.restart();
      })
    
    var nodes = d3.range(NUM_OF_NODES).map(function(key) {
      return {
        key: key,
        x: WIDTH / 2,
        y: HEIGHT / 2,
        r: 5,
        theta: Math.random() * Math.PI * 2,
        velocity: 12
      }
    })

var triangles = svg.append("g")
      .attr("class", "circles")
      .selectAll(".triangle")
      .data(nodes)
        .enter().append("g")
    		.attr("class", "triangle")
    			.each(function(d) {
            var layer = d3.select(this)

layer.append('path')
            	.attr('d', 'M -7, 0 L 5, 5 L 5, -5 Z')
          })
    
    var paths = svg.selectAll("path")
    
    var ticked = function() {
      TICKS += 1
      
      triangles
        .attr("transform", function(d) { 
        	return "translate(" + d.x + ", " + d.y + ") rotate(" + (d.theta / Math.PI * 180) + ")"; 
      	})
      
      paths.each(function(d, i) {
        d3.select(this).attr('fill', nodes[i].color)
      })
    }
    
    simulation
      .nodes(nodes)
      .on("tick", ticked);

</script>
</body>

https://d3js.org/d3.v4.min.js