Add sinewaves to home page

1 files changed, 92 insertions, 0 deletions

diff --git a/ps/gfx/sine.js b/ps/gfx/sine.js
new file mode 100644
index 0000000..b1d14a4
--- /dev/null
+++ b/ps/gfx/sine.js
@@ -0,0 +1,92 @@
+(function(d3) {
+
+    const increase = ((Math.PI * 2) / 360);
+    const margin   = { top:10, right:10, bottom:10, left:10 }
+    const view     = d3.select('#gfx')
+    const bbox     = view.node().getBoundingClientRect()
+    const width    = Math.max(bbox.width, bbox.height)
+    const height   = Math.max(bbox.width, bbox.height)
+
+    var w = width - margin.right - margin.left
+    var h = height - margin.top - margin.bottom
+
+    const samples = Math.PI * 3
+    var   data    = generateSineData(samples)
+    
+    console.log(data)
+
+    var xScale = d3.scaleLinear().domain([0, samples-1]).range([0, w])
+    var yScale = d3.scaleLinear().domain([-1, 1]).range([h, 0])
+
+    const initialX = xScale(12);
+    const initialY = yScale(15);
+
+    // define the area
+    var sine = d3.area()
+	.curve(d3.curveMonotoneX)
+	.x(function(d, i) { return xScale(i); })
+	.y0(height)
+	.y1(function(d) { return yScale(d.y || d); });
+
+    const svg   = view.append('svg')
+	  .attr('width', width + margin.left + margin.right)
+	  .attr('height', height + margin.top + margin.bottom)
+	  .style('background-color', 'black')
+	  .append('g')
+	  .attr('transform',function(){
+              var x1 = bbox.x + bbox.width / 2
+              var y1 = bbox.y + bbox.height / 2
+	      console.log(`rotate(90, ${x1}, ${y1}) translate(${margin.left}, ${margin.top})`)
+	      return `translate(${margin.left - x1}, ${margin.top -y1}) rotate(90, ${x1}, ${y1})`
+          })
+    
+//    svg.append("defs").append("clipPath").attr("id", "clip")
+//	.append("rect").attr("width", width).attr("height", height)
+//    	.append("rect").attr("width", h).attr("height", w)    
+
+    const graphContainer = svg.append("g")
+//           .attr('transform', `translate(-${initialX}, -${initialY})`);
+
+    const state = {
+	initialX,
+	initialY,
+	graphContainer,
+	time: 0
+    };
+
+    function generateSineData(samples) {
+	return d3.range(0, 100).map(function(i) { return Math.sin(i) })
+    }
+
+    var drawSineWave = function(state) {
+	const freqs = [ 84, 34, 71, 125 ]
+
+	svg
+	    .attr('width', function() { return bbox.width  })
+	    .attr('height', function() {return bbox.height })
+
+	d3.selectAll('.sinewave').remove()
+
+	freqs.forEach(function(f, i) {
+	    var data = d3.range(0, 54)
+		.map(x => x * 10 / f)
+		.map((x) => { return { x: x, y: - Math.sin(x + i - state.time)} })
+
+	    state.graphContainer.append('path')
+		.datum(data)
+		.attr('class', 'sinewave w' + i)
+		.attr('d', sine)
+	})
+    }
+    
+    var drawGraph = function(state) {
+	state.time += increase;
+	drawSineWave(state);
+	requestAnimationFrame(drawGraph.bind(this, state));
+    }
+
+    d3.select('#view').attr('transform', 'rotate(90deg)')
+
+    drawGraph(state);
+
+})(d3)