omarieclaire/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>

<style>
  path {
    fill: none;
    stroke: steelblue;
    stroke-width: 2;
}

.axis path, .axis line {
    fill: none;
    shape-rendering: crispEdges;
    stroke: #BBB;
    stroke-width: 1;
}

.axis text {
    fill: #766;
    font-family: 'PT Sans Narrow', sans-serif;
    font-size: 12px;
}
</style>

<script>
function lerp (value1, value2, amount) {
	amount = amount < 0 ? 0 : amount;
	amount = amount > 1 ? 1 : amount;
	return value1 + (value2 - value1) * amount;
}

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    angles = d3.range(0, 2 * Math.PI, Math.PI / 200);


var p1x = 15;
var p1y = 10;

var p2x = width;
var p2y = height;

var xStart = 0;
var yStart = 0;

var xEnd = width;
var yEnd = height;

var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

var numSamples = 100;

var xAxis = d3.axisBottom()
    .scale(x)
    .ticks(numSamples);

var yAxis = d3.axisLeft()
    .scale(y)
    .ticks(numSamples);

var valueline = d3.line()
    .x(function (d) {
        return x(d.xVal);
    })
    .y(function (d) {
        return y(d.yVal);
    });

var data = [];
var amplitude = height/2.0;
var frequency = 2.0;
for (var i = 0; i < numSamples; i++)
  {
    var progress = (i.toFixed(10) / numSamples);

    var xpos = lerp(xStart, xEnd, progress);// progress * width;
    var ypos = lerp(yStart, yEnd, progress);// height/2.0 + Math.sin(progress * Math.PI * 2.0 * frequency ) * amplitude;

    var xDelta = xEnd - xStart;
    var yDelta = yStart - yEnd;

    var perpendicularVecX = yDelta;
    var perpendicularVecY = - xDelta;

    var wave = Math.sin(progress * Math.PI * 2.0 * frequency ) * amplitude;

    xpos += perpendicularVecX * wave*0.01;
    ypos += perpendicularVecY * wave*0.01;

    var entry = { xVal:xpos, yVal:ypos };
    data.push(entry);
  }

x.domain(d3.extent(data,
    function (d) {
        return d.xVal;
    }));
y.domain([
    0, d3.max(data,
        function (d) {
            return d.yVal;
        })
]);

svg.append("path") // Add the valueline path.
    .attr("d", valueline(data));


var path = svg.append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .attr("fill", "none")
    .attr("stroke-width", 10)
    .attr("stroke-linejoin", "round")
  .selectAll("path")
  .data(["cyan", "magenta", "yellow"])
  .enter().append("path")
    .attr("stroke", function(d) { return d; })
    .style("mix-blend-mode", "darken")
    .datum(function(d, i) {
      return d3.line(data)
          .x(function(d) { return d.x; })
          .y(function(d) { return d.y; });
    });

d3.timer(function() {
  path.attr("d", function(d) {
    return d(angles);
  });
});

</script>
	<!DOCTYPE html>
	<svg width="960" height="500"></svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>

	<style>
	path {
	fill: none;
	stroke: steelblue;
	stroke-width: 2;
	}

	.axis path, .axis line {
	fill: none;
	shape-rendering: crispEdges;
	stroke: #BBB;
	stroke-width: 1;
	}

	.axis text {
	fill: #766;
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 12px;
	}
	</style>

	<script>
	function lerp (value1, value2, amount) {
	amount = amount < 0 ? 0 : amount;
	amount = amount > 1 ? 1 : amount;
	return value1 + (value2 - value1) * amount;
	}

	var svg = d3.select("svg"),
	width = +svg.attr("width"),
	height = +svg.attr("height"),
	angles = d3.range(0, 2 * Math.PI, Math.PI / 200);


	var p1x = 15;
	var p1y = 10;

	var p2x = width;
	var p2y = height;

	var xStart = 0;
	var yStart = 0;

	var xEnd = width;
	var yEnd = height;

	var x = d3.scaleLinear().range([0, width]);
	var y = d3.scaleLinear().range([height, 0]);

	var numSamples = 100;

	var xAxis = d3.axisBottom()
	.scale(x)
	.ticks(numSamples);

	var yAxis = d3.axisLeft()
	.scale(y)
	.ticks(numSamples);

	var valueline = d3.line()
	.x(function (d) {
	return x(d.xVal);
	})
	.y(function (d) {
	return y(d.yVal);
	});

	var data = [];
	var amplitude = height/2.0;
	var frequency = 2.0;
	for (var i = 0; i < numSamples; i++)
	{
	var progress = (i.toFixed(10) / numSamples);

	var xpos = lerp(xStart, xEnd, progress);// progress * width;
	var ypos = lerp(yStart, yEnd, progress);// height/2.0 + Math.sin(progress * Math.PI * 2.0 * frequency ) * amplitude;

	var xDelta = xEnd - xStart;
	var yDelta = yStart - yEnd;

	var perpendicularVecX = yDelta;
	var perpendicularVecY = - xDelta;

	var wave = Math.sin(progress * Math.PI * 2.0 * frequency ) * amplitude;

	xpos += perpendicularVecX * wave*0.01;
	ypos += perpendicularVecY * wave*0.01;

	var entry = { xVal:xpos, yVal:ypos };
	data.push(entry);
	}

	x.domain(d3.extent(data,
	function (d) {
	return d.xVal;
	}));
	y.domain([
	0, d3.max(data,
	function (d) {
	return d.yVal;
	})
	]);

	svg.append("path") // Add the valueline path.
	.attr("d", valueline(data));


	var path = svg.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
	.attr("fill", "none")
	.attr("stroke-width", 10)
	.attr("stroke-linejoin", "round")
	.selectAll("path")
	.data(["cyan", "magenta", "yellow"])
	.enter().append("path")
	.attr("stroke", function(d) { return d; })
	.style("mix-blend-mode", "darken")
	.datum(function(d, i) {
	return d3.line(data)
	.x(function(d) { return d.x; })
	.y(function(d) { return d.y; });
	});

	d3.timer(function() {
	path.attr("d", function(d) {
	return d(angles);
	});
	});

	</script>