Skip to content

Instantly share code, notes, and snippets.

@alexmacy

alexmacy/.block

Last active June 9, 2017 17:40
Download ZIP

Revisions

  1. alexmacy revised this gist Jun 9, 2017. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -35,7 +35,7 @@
    </body>
    <script>
    const width = innerWidth,
    height = 300;
    height = innerHeight - 60;

    const canvas = d3.select("canvas")
    .attr("width", width)
  2. Building blocks revised this gist Apr 16, 2017. 1 changed file with 0 additions and 0 deletions.
    Binary file modified thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  3. alexmacy revised this gist Apr 15, 2017. 1 changed file with 3 additions and 0 deletions.
    3 changes: 3 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -10,6 +10,9 @@
    canvas {
    margin-top: 10px;
    }
    table {
    margin-left: 10px;
    }
    </style>
    <script src="//d3js.org/d3.v4.min.js"></script>
    </head>
  4. Building blocks revised this gist Apr 15, 2017. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  5. alexmacy created this gist Apr 15, 2017.
    4 changes: 4 additions & 0 deletions .block
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,4 @@
    license: mit
    border: no
    scrolling: no
    height: 450
    3 changes: 3 additions & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    This is the beginning of exploring how to calculate and display the combinations of multiple waves. This requires finding the least common multiple of the frequencies, which can get pretty heavy to process.

    Adjust the sliders to change frequency combinations. But watch out with some of the more complicated waves, sometimes the least common multiple can get above 1 million! (e.g. 79, 80, 81)
    109 changes: 109 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,109 @@
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    body {
    background-color: black;
    color: rgb(200, 200, 200);
    margin: 0px;
    }
    canvas {
    margin-top: 10px;
    }
    </style>
    <script src="//d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
    <canvas></canvas>
    <table>
    <tr>
    <td>freq. #1: <text id="f1"></text></td>
    <td>freq. #2: <text id="f2"></text></td>
    <td>freq. #3: <text id="f3"></text></td>
    <td>Compound wavelength</td>
    </tr>
    <tr>
    <td><input type="range" min="1" max="100" value="12" oninput="draw()"></td>
    <td><input type="range" min="1" max="100" value="50" oninput="draw()"></td>
    <td><input type="range" min="1" max="100" value="2" oninput="draw()"></td>
    <th id="LCM"></th>
    </tr>
    </table>
    </body>
    <script>
    const width = innerWidth,
    height = 300;

    const canvas = d3.select("canvas")
    .attr("width", width)
    .attr("height", height);

    const canvasCtx = canvas.node().getContext("2d");

    const x = d3.scaleLinear().range([0, width]);

    const wave = d3.line()
    .curve(d3.curveMonotoneX)
    .x(function(d, i) {return x(i)})
    .y(function(d) {return d * height})
    .context(canvasCtx);

    draw();

    function draw() {
    canvasCtx.clearRect(0, 0, width, height);
    canvasCtx.fillStyle = 'rgb(0, 0, 0)';
    canvasCtx.fillRect(0, 0, width, height);

    const fVals = d3.selectAll("input").nodes().map(function(d) {return +d.value});
    const commonLength = LCM(LCM(fVals[0], fVals[1]), fVals[2]) * 2 + 1;

    x.domain([0, commonLength]);

    const wavesArray = fVals.map(function(d) { return []})
    const compoundWave = [];

    for (let i=0; i<commonLength; i++) {
    let combinedVal = 0;
    for (let n=0; n<wavesArray.length; n++) {
    const d = fVals[n]
    const thisVal = d3.easeSinInOut((i % (d*2) - d) / d);
    combinedVal += thisVal
    wavesArray[n].push(thisVal)
    }
    compoundWave.push(combinedVal/3)
    }

    wavesArray.map(function(d) {drawWave(d, 'rgb(200, 200, 200)', d.length > 1000 ? .1 : .4)})

    drawWave(compoundWave, 'rgb(255, 0, 0)')

    d3.select("#f1").html(fVals[0])
    d3.select("#f2").html(fVals[1])
    d3.select("#f3").html(fVals[2])
    d3.select("#LCM").html(commonLength)
    }

    function drawWave(array, color, lineWidth = 1) {
    canvasCtx.beginPath();
    canvasCtx.lineWidth = lineWidth;
    canvasCtx.strokeStyle = color;
    canvasCtx.moveTo(0, 0);
    wave(array)
    canvasCtx.stroke();
    }

    function LCM(a, b) {
    return (a/gcd(a, b)*b)
    }

    function gcd(a,b) {
    while (true) {
    if (b == 0) return a;
    a %= b;
    if (a == 0) return b;
    b %= a;
    }
    }
    </script>
    </html>