2b:null 2c:["$","title",null,{"children":"Random Image Sampling | Fabian Iwand | Observable"}] 31:Tac3,{ reset; const {data: floatData, url: canvasUrl, width: w, height: h} = source; const count = floatData.length / 4 * sampleRatio | 0; const rng = seedrandom.alea(''); const aspect = w / h; const c = DOM.context2d(w, h, 1); c.canvas.style.maxWidth = '100%'; c.fillStyle = '#000'; c.fillRect(0, 0, w, h); const imgData = c.getImageData(0, 0, w, h); const progress = html``; const status = html`

`; const id = DOM.uid().id; const view = html`

${c.canvas}

${progress} ${status} `; yield view; const mergeTyped = (a, b) => { const arr = new a.constructor(a.length + b.length); arr.set(a, 0); arr.set(b, a.length); return arr; } const indices = {}, offset = Date.now(); let i = 0; while(i < count) { const batchSize = 10 ** viewof stepSize.value; const {r, g, b} = sampleIndices(Math.min(i + batchSize, count) - i, floatData, rng); if(r.length + g.length + b.length > 0) { Object.assign(indices, !indices.r ? {r, g, b} : { r: mergeTyped(indices.r, r), g: mergeTyped(indices.g, g), b: mergeTyped(indices.b, b), }); i = indices.r.length + indices.g.length + indices.b.length; } else i = count; yield update(i / count); } console.log('Time:', ((Date.now() - offset)/1000).toFixed(1)); progress.value = null; //view.removeChild(progress); function update(t) { let data = new Float64Array(imgData.data.length); const brightness = floatData.length / 4 / count / (viewof autoBrightness.value ? t : 1); for(let i of indices.r) data[i * 4 ] += brightness; for(let i of indices.g) data[i * 4 + 1] += brightness; for(let i of indices.b) data[i * 4 + 2] += brightness; data = float2clamped(data); // Set alpha to full opacity. for(let i = 3; i < data.length; i += 4) data[i] = 255; imgData.data.set(data); c.putImageData(imgData, 0, 0); progress.value = t; const lr = indices.r.length, lg = indices.g.length, lb = indices.b.length; const s = lr+lg+lb, [pr, pg, pb] = [lr, lg, lb].map(v => (v/s*100).toFixed()+'%'); status.textContent = '' + `Dimensions: ${w} × ${h} (${(w*h).toLocaleString('en')} px)\n` + `Samples: ${s.toLocaleString('en')}\n` + `Sample distribution: ${pr} red, ${pg} green, ${pb} blue` return view; } }32:T402,function sampleIndices(count, data, rng) { const [rr, rg, rb, mr, mg, mb] = getRatios(data); const r = sample(0, data, count * rr | 0); const g = sample(1, data, count * rg | 0); const b = sample(2, data, count * rb | 0); return {r, g, b}; function getRatios(data) { const l = data.length; let r = 0, g = 0, b = 0; let i1, i2; for(let i = 0; i < l; i += 4) { r += data[i]; g += data[i+1]; b += data[i+2]; } const sum = r + g + b; return [r / sum, g / sum, b / sum]; } function getMax(data, offset) { let max = 0; for(let i = offset; i < data.length; i += 4) { if(max < data[i]) max = data[i]; } return max; } function sample(offset, source, count) { const target = new Uint32Array(count), l = source.length / 4; const max = getMax(source, offset); let n = 0; while(n < count) { const i = Math.floor(rng() * l); if(rng() * max <= source[i * 4 + offset]) target[n++] = i; } return target; } }33:T7ad,function imageSelect(opts) { const { options = new Map, height = 120, title = null, checked = null, getValue = (key, options) => { if(!options.has(key)) return; const v = options.get(key); return v.value || v.image || v; }, smooth = true } = opts; const update = (form, v) => { if(options.has(v)) form.value = getValue(form.checked = v, options); }; const inputs = Array.from(options.entries()).map(([k, v]) => { const image = v.image || v; const label = v.label || k; const nw = image.naturalWidth || image.width; const nh = image.naturalHeight || image.height; const [w, h] = matchSize(nw, nh, nw, height || nh); const c = DOM.context2d(w, h, 1); c.imageSmoothingEnabled = smooth; c.resetTransform(); c.drawImage(image, 0, 0, w, h); return html`

${c.canvas}

${DOM.text(label)} `; }); const {id} = DOM.uid('image-select'); const label = title != null ? html`

${title}` : ''; const form = html`