alexmacy/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    The first two drop-downs change the wave combination. The third drop-down adjusts the phase.

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0px;
      overflow:hidden;
    }
    div {
      margin-left: 10px;
    }
    path {
      fill: none;
      stroke: black;
      stroke-width: 1;
    }
    svg {
      border: 1px solid steelblue;
      margin: 10px;
    }
  </style>
  <script src="//d3js.org/d3.v4.min.js"></script>
</head>
<body>
  <svg></svg>
  <div>
    <select id="wave-select1" class="wave-select"></select>
    <select id="wave-select2" class="wave-select"></select>
    <select id="speed-select"></select>
    <button id="stop-start" onclick="playing ? stopSound() : phase()">start</button>
    Mute: <input type="checkbox" onchange="muteSound()" checked/>
  </div>
</body>
<script>

  var width = Math.max(940, innerWidth-20),
        height = Math.max(450, innerHeight-60);

  var playing = false;
  var source;
  var timer;

  var audioCtx = new (window.AudioContext || window.webkitAudioContext)(),
      gainNode = audioCtx.createGain(),
      sampleRate = 44100,
      frequency = 440,
      waveCycles = 4,
      samples = sampleRate / frequency;

  var eases = [
    "easeLinear",
    "easePolyIn", "easePolyOut", "easePolyInOut",
    "easeQuadIn", "easeQuadOut", "easeQuadInOut",
    "easeCubicIn", "easeCubicOut", "easeCubicInOut",
    "easeSinIn", "easeSinOut", "easeSinInOut",
    "easeExpIn", "easeExpOut", "easeExpInOut",
    "easeCircleIn", "easeCircleOut", "easeCircleInOut",
    "easeElasticIn", "easeElasticOut", "easeElasticInOut",
    "easeBackIn", "easeBackOut", "easeBackInOut",
    "easeBounceIn", "easeBounceOut", "easeBounceInOut"
    ];

  d3.selectAll(".wave-select").selectAll("option")
      .data(eases)
    .enter().append("option")
      .attr("value", function (d) {return d})
      .text(function (d) {return d});

  d3.select("#speed-select").selectAll("option")
      .data(d3.range(1, 20))
    .enter().append("option")
      .attr("value", function (d) {return d})
      .text(function (d) {return d});

  d3.selectAll("select")
      .on("change", function () {if (playing) phase()});

  var buffer = audioCtx.createBuffer(2, samples * waveCycles, sampleRate);

  var svg = d3.select("svg")
      .attr("width", width)
      .attr("height", height);

  var x = d3.scaleLinear()
      .range([0, width])
      .domain([samples * .25, buffer.length - samples * .75]);

  var y = d3.scaleLinear()
      .range([height - 60, 60])
      .domain([-1, 1]);

  var wave = d3.line()
      .curve(d3.curveMonotoneX)
      .x(function (d, i) {return x(i)})
      .y(function (d) {return y(d)});

  var waveShape1 = svg.append("path")
      .datum([])
      .attr("stroke-dasharray", [5, 5])
      .attr("stroke", "#e9e9e9")
      .attr("d", wave);

  var waveShape2 = svg.append("path")
      .datum([])
      .attr("stroke-dasharray", [5, 5])
      .attr("stroke", "#e9e9e9")
      .attr("d", wave);

  var mainWave = svg.append("path")
      .datum([])
      .style("stroke", "red")
      .style("stroke-width", 2)
      .attr("d", wave);

  var position = svg.append("circle")
      .attr("r", 5);

  phase();

  function loadAudio() {
    var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

    var ease1 = d3.select("#wave-select1").property("value");
    var ease2 = d3.select("#wave-select2").property("value");

    var combined = new Float32Array(buffer.length),
        buffer1 = new Float32Array(buffer.length),
        buffer2 = new Float32Array(buffer.length);

    for (i = 0; i < buffer.length; i++) {
      var thisVal = Math.abs((i + samples / 4) % samples / (samples / 2) - 1),
          thisVal2 = Math.abs((i + offset + samples / 4) % samples / (samples / 2) - 1);

      var eased = (d3[ease1](thisVal) - .5) * 2,
          eased2 = (d3[ease2](thisVal2) - .5) * 2;

      buffer.getChannelData(1)[i] = eased;
      buffer.getChannelData(0)[i] = eased2;
    }

    combined = combined.map(function (d, i) {
      return (buffer.getChannelData(0)[i] + buffer.getChannelData(1)[i]) / 2;
    });

    waveShape1.datum(buffer.getChannelData(0)).attr("d", wave);
    waveShape2.datum(buffer.getChannelData(1)).attr("d", wave);
    mainWave.datum(combined).attr("d", wave);

    position.attr("cx", function (d) {return x(buffer.length >> 1)})
        .attr("cy", function (d) {return y(combined[buffer.length >> 1])});

    if (playing == false) playSound();
  }

  function phase() {
    var t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

    if (playing) stopSound();
    d3.select("#stop-start").text("stop");
    var step = d3.select("#speed-select").property("value");

    timer = d3.timer(function () {
        t = t >= samples ? 0 : t;
        loadAudio(t += +step);
      }, 1);
  }

  function playSound() {
    if (playing) stopSound();
    playing = true;
    source = audioCtx.createBufferSource();
    source.buffer = buffer;
    source.connect(gainNode);
    gainNode.connect(audioCtx.destination);
    source.loop = true;
    muteSound();
    source.start();
  }

  function stopSound() {
    timer.stop();
    playing = false;
    if (source) source.stop();
    muteSound();
    d3.select("#stop-start").text("start");
  }

  function muteSound() {
    return gainNode.gain.value = d3.select("input").property("checked") ? 0 : 1;
  }
</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	body {
	margin: 0px;
	overflow:hidden;
	}
	div {
	margin-left: 10px;
	}
	path {
	fill: none;
	stroke: black;
	stroke-width: 1;
	}
	svg {
	border: 1px solid steelblue;
	margin: 10px;
	}
	</style>
	<script src="//d3js.org/d3.v4.min.js"></script>
	</head>
	<body>
	<svg></svg>
	<div>
	<select id="wave-select1" class="wave-select"></select>
	<select id="wave-select2" class="wave-select"></select>
	<select id="speed-select"></select>
	<button id="stop-start" onclick="playing ? stopSound() : phase()">start</button>
	Mute: <input type="checkbox" onchange="muteSound()" checked/>
	</div>
	</body>
	<script>

	var width = Math.max(940, innerWidth-20),
	height = Math.max(450, innerHeight-60);

	var playing = false;
	var source;
	var timer;

	var audioCtx = new (window.AudioContext \|\| window.webkitAudioContext)(),
	gainNode = audioCtx.createGain(),
	sampleRate = 44100,
	frequency = 440,
	waveCycles = 4,
	samples = sampleRate / frequency;

	var eases = [
	"easeLinear",
	"easePolyIn", "easePolyOut", "easePolyInOut",
	"easeQuadIn", "easeQuadOut", "easeQuadInOut",
	"easeCubicIn", "easeCubicOut", "easeCubicInOut",
	"easeSinIn", "easeSinOut", "easeSinInOut",
	"easeExpIn", "easeExpOut", "easeExpInOut",
	"easeCircleIn", "easeCircleOut", "easeCircleInOut",
	"easeElasticIn", "easeElasticOut", "easeElasticInOut",
	"easeBackIn", "easeBackOut", "easeBackInOut",
	"easeBounceIn", "easeBounceOut", "easeBounceInOut"
	];

	d3.selectAll(".wave-select").selectAll("option")
	.data(eases)
	.enter().append("option")
	.attr("value", function (d) {return d})
	.text(function (d) {return d});

	d3.select("#speed-select").selectAll("option")
	.data(d3.range(1, 20))
	.enter().append("option")
	.attr("value", function (d) {return d})
	.text(function (d) {return d});

	d3.selectAll("select")
	.on("change", function () {if (playing) phase()});

	var buffer = audioCtx.createBuffer(2, samples * waveCycles, sampleRate);

	var svg = d3.select("svg")
	.attr("width", width)
	.attr("height", height);

	var x = d3.scaleLinear()
	.range([0, width])
	.domain([samples * .25, buffer.length - samples * .75]);

	var y = d3.scaleLinear()
	.range([height - 60, 60])
	.domain([-1, 1]);

	var wave = d3.line()
	.curve(d3.curveMonotoneX)
	.x(function (d, i) {return x(i)})
	.y(function (d) {return y(d)});

	var waveShape1 = svg.append("path")
	.datum([])
	.attr("stroke-dasharray", [5, 5])
	.attr("stroke", "#e9e9e9")
	.attr("d", wave);

	var waveShape2 = svg.append("path")
	.datum([])
	.attr("stroke-dasharray", [5, 5])
	.attr("stroke", "#e9e9e9")
	.attr("d", wave);

	var mainWave = svg.append("path")
	.datum([])
	.style("stroke", "red")
	.style("stroke-width", 2)
	.attr("d", wave);

	var position = svg.append("circle")
	.attr("r", 5);

	phase();

	function loadAudio() {
	var offset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

	var ease1 = d3.select("#wave-select1").property("value");
	var ease2 = d3.select("#wave-select2").property("value");

	var combined = new Float32Array(buffer.length),
	buffer1 = new Float32Array(buffer.length),
	buffer2 = new Float32Array(buffer.length);

	for (i = 0; i < buffer.length; i++) {
	var thisVal = Math.abs((i + samples / 4) % samples / (samples / 2) - 1),
	thisVal2 = Math.abs((i + offset + samples / 4) % samples / (samples / 2) - 1);

	var eased = (d3[ease1](thisVal) - .5) * 2,
	eased2 = (d3[ease2](thisVal2) - .5) * 2;

	buffer.getChannelData(1)[i] = eased;
	buffer.getChannelData(0)[i] = eased2;
	}

	combined = combined.map(function (d, i) {
	return (buffer.getChannelData(0)[i] + buffer.getChannelData(1)[i]) / 2;
	});

	waveShape1.datum(buffer.getChannelData(0)).attr("d", wave);
	waveShape2.datum(buffer.getChannelData(1)).attr("d", wave);
	mainWave.datum(combined).attr("d", wave);

	position.attr("cx", function (d) {return x(buffer.length >> 1)})
	.attr("cy", function (d) {return y(combined[buffer.length >> 1])});

	if (playing == false) playSound();
	}

	function phase() {
	var t = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;

	if (playing) stopSound();
	d3.select("#stop-start").text("stop");
	var step = d3.select("#speed-select").property("value");

	timer = d3.timer(function () {
	t = t >= samples ? 0 : t;
	loadAudio(t += +step);
	}, 1);
	}

	function playSound() {
	if (playing) stopSound();
	playing = true;
	source = audioCtx.createBufferSource();
	source.buffer = buffer;
	source.connect(gainNode);
	gainNode.connect(audioCtx.destination);
	source.loop = true;
	muteSound();
	source.start();
	}

	function stopSound() {
	timer.stop();
	playing = false;
	if (source) source.stop();
	muteSound();
	d3.select("#stop-start").text("start");
	}

	function muteSound() {
	return gainNode.gain.value = d3.select("input").property("checked") ? 0 : 1;
	}
	</script>