query-dependent pixel vis

by juve

HTML

<input id="samples" type=text value=4000 title="Press Enter to submit!"></input><br>
<canvas id="canvas" width=300 height=200 style="border: solid 1px gray"></canvas>
<pre id="dbg" style="min-height: 300px"></pre>

CoffeeScript

$("#samples").change fnChange = -> redraw()

redraw = ->
    DB = runQuery: (data,q) -> data.map (d,i) -> d-q[i]
    {random,floor,round,ceil,sqrt} = Math
    log = []
    
    len = $("#samples").val()
    
    NL = "\n"
    print = (o) -> for k,v of o
      if v.slice? then log.push k + "\t" + v[..15].join ","
      else log.push k + "\t" + v
      $("#dbg").text log.join "\n"
    
    #data  = [0,8,4,1,7,4,8,8,3,9,1,8,4,3]; len = 14   # Example Input/Output
    data  = [0...len].map (d,i) -> floor(10*random())  # data:   [0,8,4..1..7..4..8..8..3..9..1..8, 4, 3]
    query = [0...len].map (d,i) -> floor(10*i/len)     # query:  [0,0,0..1..2..3..4..5..6..7..8..9, 9, 9]
    
    dist  = DB.runQuery(data,query)                    # result: [0,8,4..0..5..1..4..3.-3..2.-7.-1,-5,-6]
    vis   = dist.map (d,i) -> floor(128 + 128*d/10)    # vis:    [128,230,166,................,140,76,51]
    
    print data: data, query: query, dist: dist, vis: vis
    
    #use vis array as colors for pixels
    ctx = (canvas = $("#canvas")[0]).getContext("2d")
    ctx.save()
    ctx.clearRect 0,0,canvas.width,canvas.height
    ctx.translate(-0.5,-0.5)
    len = data.length
    w = canvas.width;                          h = canvas.height
    u = Math.max(1,round(Math.sqrt(len)*w/h)); v = Math.max(1,ceil(len/u))
    w_px = Math.max(1,floor(w/u));             h_px  = Math.max(1,floor(h/v))
    print wh:[w,h], uv:[u,v]
    
    pixels = []
    for y in [0...v]
      for x in [0...u]
        color = vis[y*u+x] || 0
        ctx.fillStyle = "rgba(#{color},128,128,1.0)"
        ctx.fillRect x*w_px, y*h_px, w_px, h_px
        pixels.push color
    
    ctx.restore()
    print pixels: pixels
    
redraw()