jcnesci/index.html

## index.html
<!DOCTYPE html>
<html>

  <head>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.sound.min.js" charset="utf-8"></script>
    <style type="text/css">

      body {
        margin: 0;
        font-family: sans-serif;
        font-size: 11px;
      }

      canvas {
        position: absolute;
        top: 0px;
      }

      svg {
        position: absolute;
        top: 50px;
      }

    </style>
  </head>

  <body>

    <script type="text/javascript">

      //////////////////////////////////////////////////
      // P5.js
      //////////////////////////////////////////////////

      var mic,
          micLevel
          windowWidth = window.innerWidth;

      function setup() {
        createCanvas(windowWidth, 50);
        background(255);
        fill(0);
        noStroke();
        mic = new p5.AudioIn();
        mic.start();
      }

      function draw() {
        background(255);    // clear every frame
        var micLevel = mic.getLevel();
        // Draw rect to visualize mic level.
        var boostedMicLevel = micLevel * 2;
        var micLevelWidth = map(boostedMicLevel, 0.0, 1.0, 0, windowWidth);
        rect(0, 0, micLevelWidth, 20);
        textSize(16);
        text('mic level', 5, 40);
      }

      //////////////////////////////////////////////////
      // D3.js stuff
      //////////////////////////////////////////////////

      var w = window.innerWidth,
          h = window.innerHeight,
          radius = 100;

      var svg = d3.select("body").append("svg").attr({
        width: w,
        height: h,
        class: "genart"
      });

      svg
        .append("circle")
        .attr("cx", function(d) { return ( w / 2 ); })
        .attr("cy", function(d) { return ( h / 2 ); })
        .attr("r", radius)
        .on("click", handleMouseClick)
        .on("mouseover", handleMouseOver)
        .on("mouseout", handleMouseOut);

      function handleMouseClick(d, i) {

        var curItem = d3.select(this);
        var curRadius = curItem.attr("r");
        var i = 0;

        (function repeat() {
          while (i < 5) {
            i++;
            var newRadius = Math.random() * radius;
            curItem = curItem.transition()
              .duration(50)
              .ease("bounce")
              .attr("r", newRadius)
              .each("end", repeat);
            }
        })();

      }

      function handleMouseOver(d, i) {

        d3.select(this).attr({
          fill: "cyan",
        });

      }

      function handleMouseOut(d, i) {

        d3.select(this).attr({
          fill: "magenta",
        });

      }

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>

	<head>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/p5.min.js" charset="utf-8"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.4/addons/p5.sound.min.js" charset="utf-8"></script>
	<style type="text/css">

	body {
	margin: 0;
	font-family: sans-serif;
	font-size: 11px;
	}

	canvas {
	position: absolute;
	top: 0px;
	}

	svg {
	position: absolute;
	top: 50px;
	}

	</style>
	</head>

	<body>

	<script type="text/javascript">

	//////////////////////////////////////////////////
	// P5.js
	//////////////////////////////////////////////////

	var mic,
	micLevel
	windowWidth = window.innerWidth;

	function setup() {
	createCanvas(windowWidth, 50);
	background(255);
	fill(0);
	noStroke();
	mic = new p5.AudioIn();
	mic.start();
	}

	function draw() {
	background(255); // clear every frame
	var micLevel = mic.getLevel();
	// Draw rect to visualize mic level.
	var boostedMicLevel = micLevel * 2;
	var micLevelWidth = map(boostedMicLevel, 0.0, 1.0, 0, windowWidth);
	rect(0, 0, micLevelWidth, 20);
	textSize(16);
	text('mic level', 5, 40);
	}

	//////////////////////////////////////////////////
	// D3.js stuff
	//////////////////////////////////////////////////

	var w = window.innerWidth,
	h = window.innerHeight,
	radius = 100;

	var svg = d3.select("body").append("svg").attr({
	width: w,
	height: h,
	class: "genart"
	});

	svg
	.append("circle")
	.attr("cx", function(d) { return ( w / 2 ); })
	.attr("cy", function(d) { return ( h / 2 ); })
	.attr("r", radius)
	.on("click", handleMouseClick)
	.on("mouseover", handleMouseOver)
	.on("mouseout", handleMouseOut);

	function handleMouseClick(d, i) {

	var curItem = d3.select(this);
	var curRadius = curItem.attr("r");
	var i = 0;

	(function repeat() {
	while (i < 5) {
	i++;
	var newRadius = Math.random() * radius;
	curItem = curItem.transition()
	.duration(50)
	.ease("bounce")
	.attr("r", newRadius)
	.each("end", repeat);
	}
	})();

	}

	function handleMouseOver(d, i) {

	d3.select(this).attr({
	fill: "cyan",
	});

	}

	function handleMouseOut(d, i) {

	d3.select(this).attr({
	fill: "magenta",
	});

	}

	</script>
	</body>
	</html>