Skip to content

Instantly share code, notes, and snippets.

@tkurki

tkurki/Radar

Last active October 6, 2022 06:25
Show Gist options
  • Save tkurki/a0ebeb6130e7f80a3e7ff5656086e1fb to your computer and use it in GitHub Desktop.
Save tkurki/a0ebeb6130e7f80a3e7ff5656086e1fb to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tkurki renamed this gist Oct 6, 2022. 1 changed file with 0 additions and 0 deletions.
    0 radar → Radar
    View file
    File renamed without changes.
  2. tkurki revised this gist Oct 6, 2022. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions radar
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    dummy
  3. tkurki created this gist Oct 5, 2022.
    75 changes: 75 additions & 0 deletions canvas.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,75 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    </head>
    <style>
    html,
    body {
    width: 100%;
    height: 100%;
    margin: 0;
    }

    canvas {
    height: 100%;
    margin: 0;
    background-color: black;
    }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>

    <body>
    <canvas id="myCanvas" width="600" height="600"></canvas>
    </body>
    <script>

    const colors = Array.from(Array(10).keys()).map(v => d3.interpolateRdYlBu(v / 10))
    const PI2 = Math.PI * 2

    let c = 0
    const canvas = document.getElementById('myCanvas')
    const drawingContext = myCanvas.getContext("2d")
    drawingContext.lineWidth = 2
    const x0 = 0.5
    const y0 = 0.5

    const drawSpoke = (azimuth, radials, values) => {
    let previous = 0
    drawingContext.setTransform(1, 0, 0, 1, 0, 0)
    drawingContext.translate(300, 300)
    drawingContext.rotate((azimuth % 360) / 180 * Math.PI)

    drawingContext.beginPath();
    drawingContext.moveTo(x0 + previous, y0 + c);
    drawingContext.strokeStyle = '#000';
    drawingContext.lineTo(x0 + 500, y0 + c);
    drawingContext.stroke()

    const line = radials.map((radial, i) => {
    drawingContext.beginPath();
    drawingContext.moveTo(x0 + previous, y0 + c);
    drawingContext.strokeStyle = colors[values[i]];
    drawingContext.lineTo(x0 + radial / 2, y0 + c);
    drawingContext.stroke()
    previous = x0 + radial / 2
    })
    }
    fetch('test.json').then(r => r.json()).then(d => {
    const { azimuths, values, radials } = d
    const sampleCount = azimuths.length
    let i = 0
    setInterval(() => {
    drawSpoke(azimuths[(i + (i / azimuths.length).toFixed(0) * 5) % sampleCount], radials[i % sampleCount], values[i % sampleCount])
    i++
    }, 0)
    })
    </script>

    </html>
    87 changes: 87 additions & 0 deletions pixi.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,87 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="utf-8">
    <title>title</title>
    </head>
    <style>
    html,
    body {
    width: 100%;
    height: 100%;
    margin: 0;
    }

    canvas {
    height: 100%;
    margin: 0;
    }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js"></script>

    <body>
    <div id="stage-container" style="border: 1px solid;display:table"></div>
    </body>
    <script>

    app = new PIXI.Application(500, 500, {
    transparent: true,
    resolution: 1,
    antialias: true
    });
    let rootContainer = new PIXI.Container();
    app.stage.addChild(rootContainer);
    const container = document.getElementById("stage-container");
    container.appendChild(app.view);

    var sprite = new PIXI.Graphics();

    let radar = new PIXI.Container()
    radar.position.x = 250
    radar.position.y = 250
    rootContainer.addChild(radar)

    let c = 0
    const colors = Array.from(Array(10).keys()).map(v => {
    const col = d3.color(d3.interpolateRdYlBu(v / 10))
    return PIXI.utils.rgb2hex([col.r / 255, col.g / 255, col.b / 255])
    })

    const spokes = []

    const drawSpoke = (azimuth, radials, values, removeChild) => {
    let previous = 0
    sprite = new PIXI.Graphics()
    spokes.push(sprite)
    if (removeChild) {
    spokes[0].destroy()
    spokes.shift()
    }
    sprite.angle = azimuth
    sprite.pivot.set(0, 0)
    const line = radials.map((radial, i) => {
    sprite.lineStyle(2, colors[values[i]], 1)
    sprite.moveTo(previous / 2, 0)
    sprite.lineTo(radial / 2, 0)
    radar.addChild(sprite)
    previous = radial
    })
    c++
    }
    fetch('test.json').then(r => r.json()).then(d => {
    const { azimuths, values, radials } = d
    const sampleCount = azimuths.length
    let i = 0
    setInterval(() => {
    drawSpoke(azimuths[(i + (i / azimuths.length).toFixed(0) * 5) % sampleCount], radials[i % sampleCount], values[i % sampleCount], i > azimuths.length)
    i++
    }, 0)
    })

    </script>

    </html>
    71 changes: 71 additions & 0 deletions svg.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="utf-8">
    <title>title</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    </head>
    <style>
    html,
    body {
    width: 100%;
    height: 100%;
    margin: 0;
    }

    svg {
    height: 100%;
    margin: 0;
    background-color: black;
    }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
    <script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>

    <body>
    <svg preserveAspectRatio="xMidYMid slice" viewBox="0 0 600 600">
    <g id="radar" transform="translate(300, 300)">
    </g>
    </svg>
    </body>
    <script>

    const svgns = "http://www.w3.org/2000/svg"
    let c = 0
    const radar = document.getElementById('radar')
    const drawSpoke = (azimuth, radials, values, removeChild) => {
    let previous = 0
    const g = document.createElementNS(svgns, "g")
    g.setAttribute('transform', `rotate(${azimuth},0,0)`)
    const line = radials.map((radial, i) => {
    let newRect = document.createElementNS(svgns, "rect")
    newRect.setAttribute("x", previous / 2)
    newRect.setAttribute("y", 0)
    newRect.setAttribute("width", (radial - previous) / 2);
    newRect.setAttribute("height", 2);
    newRect.setAttribute("fill", d3.interpolateRdYlBu(values[i] / 10));
    g.appendChild(newRect)

    const result = [previous, radial, values[i]]
    previous = radial
    return result
    })
    removeChild && radar.removeChild(radar.firstElementChild)
    radar.appendChild(g)
    c++
    }
    fetch('test.json').then(r => r.json()).then(d => {
    const { azimuths, values, radials } = d
    const sampleCount = azimuths.length
    let i = 0
    setInterval(() => {
    drawSpoke(azimuths[(i + (i / azimuths.length).toFixed(0) * 5) % sampleCount], radials[i % sampleCount], values[i % sampleCount], i > azimuths.length)
    i++
    }, 0)
    })
    </script>

    </html>
    1 change: 1 addition & 0 deletions test.json
    View file
    1 addition, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.