From c2cb20f53b015388c8a84c824111fe844ce318ad Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 2 Jan 2018 13:38:27 +0100 Subject: Add sinewaves to home page --- ps/gfx/sine.js | 92 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 92 insertions(+) create mode 100644 ps/gfx/sine.js (limited to 'ps/gfx') 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) -- cgit v1.2.3