2e:null 2f:["$","title",null,{"children":"Blend modes for Cartography | Michael Bricknell | Observable"}] 34:T7cc,listInput = ({ input = defaultInput, min = 0, max = 0, value = null, defaultValue = "" } = {}) => { // This is a state variable that we will change as events occur on the input let values = value !== null ? value : Array.isArray(defaultValue) ? [...defaultValue] : new Array(Math.max(min, 1)).fill(defaultValue); // Templates const inputRow = (v, i) => html.fragment` changeValueAt(i, +e.target.value)}>${input( v, i, values )} `; const footerRow = () => html.fragment` `; // Rerender Helpers const rerenderTbody = () => { const tbody = output.querySelector("tbody"); tbody.innerHTML = ""; tbody.appendChild(html.fragment`${values.map(inputRow)}`); }; const rerenderTfoot = () => { const tfoot = output.querySelector("tfoot"); tfoot.innerHTML = ""; tfoot.appendChild(footerRow()); }; const rerender = () => { rerenderTbody(); rerenderTfoot(); }; // Event Dispatcher const dispatchInputEvent = () => { output.value = values; output.dispatchEvent(new CustomEvent("input")); }; // Event Handlers const addRow = () => { values.push(defaultValue); rerender(); dispatchInputEvent(); }; const removeRow = (removeIdx) => { values = values.filter((_, i) => i !== removeIdx); rerender(); dispatchInputEvent(); }; const changeValueAt = (i, value) => { values[i] = value; rerender(); dispatchInputEvent(); }; const output = html` ${values.map(inputRow)} ${footerRow()}

`; output.value = values; return output; }35:T537,function combine( img1, img2, img3, targetWidth, blendModes, opacities, maskImg ) { // Use the first available image for dimensions const baseImg = img1 || img2 || img3; if (!baseImg) { const canvas = document.createElement("canvas"); canvas.width = 400; canvas.height = 300; return canvas; } let canvas = document.createElement("canvas"); const aspectRatio = baseImg.naturalHeight / baseImg.naturalWidth; // Changed from img1 to baseImg const w = targetWidth; const h = targetWidth * aspectRatio; canvas.id = "mycanvas"; canvas.width = w; canvas.height = h; var ctx = canvas.getContext("2d"); ctx.clearRect(0, 0, w, h); // Only draw layers that exist if (img3) { ctx.globalCompositeOperation = blend[blendModes[2]]; ctx.globalAlpha = opacities[2] / 100; ctx.drawImage(img3, 0, 0, w, h); } if (img2) { ctx.globalCompositeOperation = blend[blendModes[1]]; ctx.globalAlpha = opacities[1] / 100; ctx.drawImage(img2, 0, 0, w, h); } if (img1) { ctx.globalCompositeOperation = blend[blendModes[0]]; ctx.globalAlpha = opacities[0] / 100; ctx.drawImage(img1, 0, 0, w, h); } if (maskImg) { ctx.globalCompositeOperation = "destination-in"; ctx.globalAlpha = 1.0; ctx.drawImage(maskImg, 0, 0, w, h); } return canvas; }36:T7ab,function blendWithGradientMask(canvasA, canvasB, w, h, axis, edge, feather) { const out = document.createElement("canvas"); out.width = w; out.height = h; const ctx = out.getContext("2d"); // draw A first ctx.drawImage(canvasA, 0, 0); // compute gradient endpoints from axis angle const rad = (axis * Math.PI) / 180; const cx = w / 2, cy = h / 2; const dx = Math.cos(rad), dy = Math.sin(rad); // project corners to find extent const corners = [[0,0],[w,0],[0,h],[w,h]]; const dots = corners.map(([x,y]) => (x - cx)*dx + (y - cy)*dy); const extent = Math.max(...dots.map(Math.abs)); const x0 = cx + dx * (-extent), y0 = cy + dy * (-extent); const x1 = cx + dx * extent, y1 = cy + dy * extent; // edge position along the gradient const mid = edge; // 0..1 const half = feather / 2; const t0 = Math.max(0, mid - half); const t1 = Math.min(1, mid + half); const grad = ctx.createLinearGradient(x0, y0, x1, y1); grad.addColorStop(t0, "rgba(0,0,0,1)"); // fully A grad.addColorStop(t1, "rgba(0,0,0,0)"); // fully B // mask: draw B, then apply gradient mask to punch through to A const tmp = document.createElement("canvas"); tmp.width = w; tmp.height = h; const tc = tmp.getContext("2d"); tc.drawImage(canvasB, 0, 0); tc.globalCompositeOperation = "destination-in"; tc.fillStyle = grad; // invert: A side opaque, B side transparent // so B shows through where grad is transparent... // easier: draw B masked to the complement const tmp2 = document.createElement("canvas"); tmp2.width = w; tmp2.height = h; const tc2 = tmp2.getContext("2d"); tc2.drawImage(canvasB, 0, 0); tc2.globalCompositeOperation = "destination-in"; const grad2 = ctx.createLinearGradient(x0, y0, x1, y1); grad2.addColorStop(t0, "rgba(0,0,0,0)"); grad2.addColorStop(t1, "rgba(0,0,0,1)"); tc2.fillStyle = grad2; tc2.fillRect(0, 0, w, h); ctx.drawImage(tmp2, 0, 0); return out; }37:T568,function combineCombo( images, targetWidth, { axis = 0, splits = [0.5], // N-1 split positions [0..1], one per seam feathers = [0.15], // N-1 feather widths bands = [ // per-image resample config { coarse: 1, fine: 1 }, { coarse: 1, fine: 1 }, { coarse: 1, fine: 1 } ], opacities = [100, 100, 100], blendModes = ["normal", "normal", "normal"] } = {} ) { const imgs = images.filter(Boolean); if (!imgs.length) return null; const base = imgs[0]; const w = targetWidth; const h = Math.round((w * base.naturalHeight) / base.naturalWidth); // render each band at its resample setting const rendered = imgs.map((img, i) => { const blockSize = bands[i] ?? 1; return blockSize <= 1 ? resampleSmooth(img, w, h) : resampleNearest(img, w, h, blockSize); }); // composite left to right using gradient seams let composite = rendered[0]; for (let i = 1; i < rendered.length; i++) { const edge = splits[i - 1] ?? i / rendered.length; const feather = feathers[i - 1] ?? 0.15; composite = blendWithGradientMask( composite, rendered[i], w, h, axis, edge, feather ); } const out = document.createElement("canvas"); out.width = w; out.height = h; const ctx = out.getContext("2d"); ctx.drawImage(composite, 0, 0); return out; }38:T43c,function createSeamControls(n) { const seams = n - 1; const splits = listInput({ input: (v, i) => Inputs.range([0, 1], { step: 0.01, value: v, label: `seam ${i + 1} position` }), min: seams, max: seams, defaultValue: Array.from({ length: seams }, (_, i) => (i + 1) / n) }); const feathers = listInput({ input: (v, i) => Inputs.range([0, 1], { step: 0.01, value: v, label: `seam ${i + 1} feather` }), min: seams, max: seams, defaultValue: Array(seams).fill(0.15) }); const container = html`

${splits}${feathers}

`; container.value = { splits: splits.value, feathers: feathers.value }; splits.addEventListener("input", () => { container.value = { splits: splits.value, feathers: feathers.value }; container.dispatchEvent(new Event("input")); }); feathers.addEventListener("input", () => { container.value = { splits: splits.value, feathers: feathers.value }; container.dispatchEvent(new Event("input")); }); return container; }39:T193f,viewof gradientDef = { const wrap = document.createElement("div"); wrap.style.cssText = "display:flex; flex-direction:column; gap:4px;"; const idIn = Inputs.text({ label: "id", value: "my-gradient" }); const typeIn = Inputs.select(["linear", "radial"], { label: "type", value: "linear" }); const x1In = Inputs.text({ label: "x1", value: "0%" }); const y1In = Inputs.text({ label: "y1", value: "0%" }); const x2In = Inputs.text({ label: "x2", value: "100%" }); const y2In = Inputs.text({ label: "y2", value: "0%" }); const cxIn = Inputs.text({ label: "cx", value: "50%" }); const cyIn = Inputs.text({ label: "cy", value: "50%" }); const rIn = Inputs.text({ label: "r", value: "50%" }); const axisIn = Inputs.range([0, 360], { label: "axis", value: 0, step: 1 }); const hIn = Inputs.range([20, 400], { label: "preview height", value: 80, step: 10 }); const linearDiv = document.createElement("div"); linearDiv.append(x1In, y1In, x2In, y2In); const radialDiv = document.createElement("div"); radialDiv.style.display = "none"; radialDiv.append(cxIn, cyIn, rIn); const preview = document.createElement("canvas"); preview.width = 600; preview.style.cssText = "width:100%; border:0.5px solid #ccc; border-radius:4px; display:block;"; const output = document.createElement("textarea"); output.style.cssText = "font-size:11px; width:100%; height:120px; padding:8px; border-radius:4px; border:0.5px solid #ccc; background:#f5f5f5; resize:vertical;"; const stops = [ { offset: "0%", color: "white", opacity: 1 }, { offset: "100%", color: "white", opacity: 0 } ]; const stopsDiv = document.createElement("div"); const addBtn = document.createElement("button"); addBtn.textContent = "+ stop"; addBtn.onclick = () => { stops.push({ offset: "100%", color: "white", opacity: 0 }); renderStops(); renderPreview(); }; function renderStops() { stopsDiv.innerHTML = ""; stops.forEach((s, i) => { const row = document.createElement("div"); row.style.cssText = "display:flex; gap:6px; align-items:center; margin-bottom:4px;"; const offsetIn = Inputs.text({ label: "offset", value: s.offset }); const colorIn = Inputs.select(["white", "black"], { label: "color", value: s.color }); const opIn = Inputs.range([0, 1], { label: "opacity", value: s.opacity, step: 0.01 }); const removeBtn = document.createElement("button"); removeBtn.textContent = "×"; removeBtn.onclick = () => { stops.splice(i, 1); renderStops(); renderPreview(); }; offsetIn.addEventListener("input", () => { stops[i].offset = offsetIn.value; renderPreview(); }); colorIn.addEventListener("input", () => { stops[i].color = colorIn.value; renderPreview(); }); opIn.addEventListener("input", () => { stops[i].opacity = opIn.value; renderPreview(); }); row.append(offsetIn, colorIn, opIn, removeBtn); stopsDiv.appendChild(row); }); } function renderPreview() { const ph = hIn.value; preview.height = ph; const pw = preview.width; const ctx = preview.getContext("2d"); ctx.clearRect(0, 0, pw, ph); for (let x = 0; x < pw; x += 10) for (let y = 0; y < ph; y += 10) { ctx.fillStyle = (Math.floor(x / 10) + Math.floor(y / 10)) % 2 === 0 ? "#ccc" : "#fff"; ctx.fillRect(x, y, 10, 10); } try { let grad; if (typeIn.value === "radial") { const cx = (parseFloat(cxIn.value) / 100) * pw; const cy = (parseFloat(cyIn.value) / 100) * ph; const r = (parseFloat(rIn.value) / 100) * Math.min(pw, ph); grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r); } else { grad = ctx.createLinearGradient( (parseFloat(x1In.value) / 100) * pw, (parseFloat(y1In.value) / 100) * ph, (parseFloat(x2In.value) / 100) * pw, (parseFloat(y2In.value) / 100) * ph ); } stops.forEach((s) => { const c = s.color === "white" ? 255 : 0; grad.addColorStop( parseFloat(s.offset) / 100, `rgba(${c},${c},${c},${s.opacity})` ); }); ctx.fillStyle = grad; ctx.fillRect(0, 0, pw, ph); } catch (e) {} const def = { id: idIn.value, type: typeIn.value }; if (typeIn.value === "radial") { def.cx = cxIn.value; def.cy = cyIn.value; def.r = rIn.value; } else { def.x1 = x1In.value; def.y1 = y1In.value; def.x2 = x2In.value; def.y2 = y2In.value; } def.stops = stops.map((s) => ({ offset: s.offset, color: s.color, opacity: +s.opacity })); output.value = JSON.stringify(def, null, 2); wrap.value = def; wrap.dispatchEvent(new CustomEvent("input", { bubbles: true })); } typeIn.addEventListener("input", () => { linearDiv.style.display = typeIn.value === "linear" ? "" : "none"; radialDiv.style.display = typeIn.value === "radial" ? "" : "none"; renderPreview(); }); axisIn.addEventListener("input", () => { const rad = (axisIn.value * Math.PI) / 180; const dx = Math.cos(rad), dy = Math.sin(rad); // map to percentage endpoints centered at 50% const x1 = Math.round((0.5 - dx * 0.5) * 100) + "%"; const y1 = Math.round((0.5 - dy * 0.5) * 100) + "%"; const x2 = Math.round((0.5 + dx * 0.5) * 100) + "%"; const y2 = Math.round((0.5 + dy * 0.5) * 100) + "%"; x1In.value = x1; y1In.value = y1; x2In.value = x2; y2In.value = y2; // also update the Inputs display x1In.dispatchEvent(new Event("input")); renderPreview(); }); [idIn, x1In, y1In, x2In, y2In, cxIn, cyIn, rIn, hIn].forEach((i) => i.addEventListener("input", renderPreview) ); const stopsHeader = document.createElement("div"); stopsHeader.style.cssText = "display:flex; justify-content:space-between; align-items:center; margin-top:8px;"; const stopsLabel = document.createElement("b"); stopsLabel.textContent = "stops"; stopsHeader.append(stopsLabel, addBtn); wrap.append( idIn, typeIn, linearDiv, radialDiv, hIn, axisIn, stopsHeader, stopsDiv, preview, output ); renderStops(); renderPreview(); wrap.value = {}; return wrap; }3a:T102f,viewof squiggleDef = { const wrap = document.createElement("div"); wrap.style.cssText = "display:flex; flex-direction:column; gap:4px;"; const idIn = Inputs.text({ label: "id", value: "squiggle-1" }); const baseFreqIn = Inputs.range([0.005, 0.3], { label: "baseFrequency", value: 0.05, step: 0.005 }); const octavesIn = Inputs.range([1, 8], { label: "numOctaves", value: 4, step: 1 }); const scaleIn = Inputs.range([0, 30], { label: "scale", value: 4, step: 0.5 }); const seedIn = Inputs.range([0, 100], { label: "seed", value: 1, step: 1 }); const regionIn = Inputs.range([100, 200], { label: "filter region %", value: 120, step: 5 }); const strokeWidthIn = Inputs.range([0, 20], { label: "preview stroke-width", value: 5, step: 0.5 }); const preview = document.createElementNS("http://www.w3.org/2000/svg", "svg"); preview.setAttribute("viewBox", "0 0 300 200"); preview.style.cssText = "width:100%; border:0.5px solid #ccc; border-radius:4px; display:block; background:#fff;"; const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs"); const filter = document.createElementNS( "http://www.w3.org/2000/svg", "filter" ); filter.setAttribute("id", "squiggle-preview"); const turbulence = document.createElementNS( "http://www.w3.org/2000/svg", "feTurbulence" ); turbulence.setAttribute("type", "fractalNoise"); const displacement = document.createElementNS( "http://www.w3.org/2000/svg", "feDisplacementMap" ); displacement.setAttribute("in", "SourceGraphic"); filter.append(turbulence, displacement); defs.append(filter); // a stroked line, to test the stroke case directly const line = document.createElementNS("http://www.w3.org/2000/svg", "path"); line.setAttribute("d", "M20,60 C90,10 140,110 200,60 S260,10 280,60"); line.setAttribute("fill", "none"); line.setAttribute("stroke", "#cd6d57"); // a pattern-ish filled rect, to test the fill case const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", "20"); rect.setAttribute("y", "100"); rect.setAttribute("width", "260"); rect.setAttribute("height", "80"); rect.setAttribute("fill", "#f3daa7"); rect.setAttribute("stroke", "#cd6d57"); rect.setAttribute("stroke-width", "2"); preview.append(defs, rect, line); const output = document.createElement("textarea"); output.style.cssText = "font-size:11px; width:100%; height:100px; padding:8px; border-radius:4px; border:0.5px solid #ccc; background:#f5f5f5; resize:vertical;"; function renderPreview() { turbulence.setAttribute("baseFrequency", baseFreqIn.value); turbulence.setAttribute("numOctaves", octavesIn.value); turbulence.setAttribute("seed", seedIn.value); displacement.setAttribute("scale", scaleIn.value); const pad = +regionIn.value; const off = -(pad - 100) / 2; filter.setAttribute("x", `${off}%`); filter.setAttribute("y", `${off}%`); filter.setAttribute("width", `${pad}%`); filter.setAttribute("height", `${pad}%`); line.setAttribute("stroke-width", strokeWidthIn.value); line.setAttribute("filter", "url(#squiggle-preview)"); rect.setAttribute("filter", "url(#squiggle-preview)"); const def = { id: idIn.value, baseFrequency: +baseFreqIn.value, numOctaves: +octavesIn.value, scale: +scaleIn.value, seed: +seedIn.value }; if (pad !== 120) { def.x = `${off}%`; def.y = `${off}%`; def.width = `${pad}%`; def.height = `${pad}%`; } output.value = JSON.stringify(def, null, 2); wrap.value = def; wrap.dispatchEvent(new CustomEvent("input", { bubbles: true })); } [ idIn, baseFreqIn, octavesIn, scaleIn, seedIn, regionIn, strokeWidthIn ].forEach((i) => i.addEventListener("input", renderPreview)); wrap.append( idIn, baseFreqIn, octavesIn, scaleIn, seedIn, regionIn, strokeWidthIn, preview, output ); renderPreview(); wrap.value = {}; return wrap; }3b:[{"id":"1c92177218931a26395e23066330657ee66abf519e759d9cb5e85c858ebe9eabdeba9a5db24667765b6eb4146640fa08d05ee47184d7d9b9990df96687bf57ed","href":"https://static.observableusercontent.com/files/1c92177218931a26395e23066330657ee66abf519e759d9cb5e85c858ebe9eabdeba9a5db24667765b6eb4146640fa08d05ee47184d7d9b9990df96687bf57ed","name":"untitled (13).png","type":"image/png","lastModified":1683075875588.037,"size":816141},{"id":"408f8cca373745baae5e3ee5f439494010d5bb0e7968b48d7ee31a717bbeb0ad480d302dbf8600828050506964fd5360e7edd6a08b9c3e08037b062928817975","href":"https://static.observableusercontent.com/files/408f8cca373745baae5e3ee5f439494010d5bb0e7968b48d7ee31a717bbeb0ad480d302dbf8600828050506964fd5360e7edd6a08b9c3e08037b062928817975","name":"Screenshot 2023-01-28 at 10.04.05 AM.png","type":"image/png","lastModified":1674918260399.893,"size":47279},{"id":"a36709188401d1ef7a0d316e8dbf3b4b041c06d42a2a65f6046d276b5b774d5e0647b3707e66335ee86b3987da684406ec0f250a14468518117cbcb82be4d995","href":"https://static.observableusercontent.com/files/a36709188401d1ef7a0d316e8dbf3b4b041c06d42a2a65f6046d276b5b774d5e0647b3707e66335ee86b3987da684406ec0f250a14468518117cbcb82be4d995","name":"color.png","type":"image/png","lastModified":1683072871409.486,"size":4960043},{"id":"e23efff895aa12bf2374c2afe0b0156c57795b7b90cd9ef37cc7fd027b7871a9aadf159cc5db793e5085211fa2f355149bcee16074a61a61ea433b3a05ec8988","href":"https://static.observableusercontent.com/files/e23efff895aa12bf2374c2afe0b0156c57795b7b90cd9ef37cc7fd027b7871a9aadf159cc5db793e5085211fa2f355149bcee16074a61a61ea433b3a05ec8988","name":"texture.png","type":"image/png","lastModified":1683072883122.379,"size":5234287},{"id":"eb7ac51d1f1222c1f325fa2dbb014b5bf6bb2c11ae504c036036d4e7f90fa4c8fc02a05ca569071727a43bdba6711dab7d309c1164a0d713292ca2f5d357e73e","href":"https://static.observableusercontent.com/files/eb7ac51d1f1222c1f325fa2dbb014b5bf6bb2c11ae504c036036d4e7f90fa4c8fc02a05ca569071727a43bdba6711dab7d309c1164a0d713292ca2f5d357e73e","name":"hs.png","type":"image/png","lastModified":1683072878004.928,"size":3795144},{"id":"882cf6088f4b55f52ae3ca6850f5009c20ce6c05b956d23cb1344323df88ecdc050ac48cd2a2fbe4c5907ef996d498d14a87e3f10441e7389943aeb3c2798910","href":"https://static.observableusercontent.com/files/882cf6088f4b55f52ae3ca6850f5009c20ce6c05b956d23cb1344323df88ecdc050ac48cd2a2fbe4c5907ef996d498d14a87e3f10441e7389943aeb3c2798910","name":"color2@2.png","type":"image/png","lastModified":1683116080742.666,"size":3159180}] 32:{"id":"47d37bdf8e3a423a","slug":"blend-modes-for-cartography","title":"Blend modes for Cartography","thumbnail":"72a3c7ddafe417da935c811fb62c93a8f05ebd8562530b01bc204077e1d02465","access_level":"public","create_time":"$D2023-01-28T14:17:34.421Z","update_time":"$D2026-06-14T13:29:14.398Z","view_time":null,"first_public_time":"$D2023-05-03T12:18:53.485Z","has_unpublished_edits":null,"fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/2f0578a8eeb34ee1c8a3bd6be41477c4bc13989c0c53551154178a64c9f2945f","tier":"pro_2024"},"version":889,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null}],"members":[{"type":"individual","id":"8a8aec8a4dd1da2d","login":"mbrickmaps","name":"Michael Bricknell","avatar_url":"https://avatars-next.observableusercontent.com/669d4a33f00b7dbf619507bedb374f580b5457ee3c0717ba47d37e4869518958","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"2f71d064e45acb0b","slug":"carto","title":"Carto","owner":{"id":"aa36944c9e64c088","login":"mbrickmaps","name":"Michael Bricknell"}},"type":"notebook","body":{"title":"Blend modes for Cartography","cells":[{"id":0,"value":"# Blend modes for Cartography","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"I know, I know... not another blend mode overview. This isn't a ESRI or QGIS tutorial, but lets look at the basics with step by step examples for blending color with grayscale terrain.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":869,"value":"https://observablehq.com/@mbrickmaps/raster-overlay-drag-and-drop","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":792,"value":"import { html } from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"//import { listInput } from \"@harrislapiroff/list-input\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"modified","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":787,"value":"defaultInput = (v) => html.fragment``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"import { displayColors, checkContrast, showColor } from \"@mbrickmaps/color\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":87,"value":"first some inspiration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":610,"value":"Take a screenshot or use the color picker below.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"screenshot20230128At100405Am = FileAttachment(\"Screenshot 2023-01-28 at 10.04.05 AM.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"viewof mapColors = listInput({\n input: (v, i) =>\n Inputs.color({ label: \"Color \" + (i + 1), value: v ?? \"#000000\" }),\n value: [\"#a23924\", \"#ac774f\", \"#efca95\", \"#bdbe89\", \"#6e9379\"],\n min: 2,\n max: 5\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":614,"value":"Let's look at some useless data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"demo2 = displayColors(\n 25,\n 25,\n mapColors.filter((c) => c), // an array of colors\n \"rgb\", // return format\n true, // show table distance\n false, // colorize distance numbers\n \"rgb\" // render format far left\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"Let's look at some color contrast, because everyone does it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":762,"value":"viewof text = Inputs.text({\n label: \"Text Color\",\n value: \"black\",\n submit: true\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":568,"value":"demo3 = checkContrast(\n text,\n mapColors.filter((c) => c)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"demo = html`

${viewof text}

${viewof mapColors}

${demo3}

${demo2}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":621,"value":"Let's tweak our colors to have proper contrast","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":576,"value":"viewof mapColors2 = listInput({\n input: (v, i) => Inputs.color({ label: \"Color \" + (i + 1), value: v }),\n value: [\"#ee7a63\", \"#d29465\", \"#efca95\", \"#bdbe89\", \"#81a28b\"]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"checkContrast(\"black\", mapColors2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"displayColors(\n 25,\n 25,\n mapColors2, // an array of colors\n \"lab\", // return format\n true, // show table distance\n false, // colorize distance numbers\n \"rgb\" // render format far left\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"The easiest way to get a colorized dem:
\ngdaldem color-relief input_dem color_text_file output_color_relief_map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"color.txt\n


\n100% 255:255:255
\n75% 162:57:36
\n25% 72:119:79
\n10% 239:202:149
\n0 189:190:137
\nnv 0:0:0:0
\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":128,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":590,"value":"color2.txt


\n100% 238:122:99
\n75% 210:148:101
\n25% 39:202:149
\n10% 189:190:137
\n0 129:162:139
\nnv 0:0:0:0\n

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":597,"value":"image1b = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"Get some beautiful hillshading...
\nhttps://eduard.earth/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":130,"value":"image3 = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"Why not some sexy texture shading too...
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":466,"value":"img2 = html`

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":155,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":774,"value":"function createLayerBlend(options = {}) {\n const defaults = options.defaultValue || [\"multiply\", \"difference\", \"normal\"];\n const defaultIndices = defaults.map((mode) => blend.indexOf(mode));\n\n return listInput({\n input: (v, i) =>\n Inputs.select(blend, {\n label: \"blend mode layer \" + (i + 1),\n value: blend[v]\n }),\n min: 3,\n defaultValue: defaultIndices\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"function createLayerOpacity(options = {}) {\n return listInput({\n input: (v, i) =>\n Inputs.range([0, 100], {\n step: 1,\n value: v,\n label: \"opacity layer \" + (i + 1)\n }),\n min: 3,\n defaultValue: options.defaultValue || [80, 80, 100]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"Play around with opacity and blend modes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"viewof layerOpacity = listInput({\n input: (v, i) =>\n Inputs.range([0, 100], {\n step: 1,\n value: v,\n label: \"opacity layer \" + (i + 1)\n }),\n min: 3,\n defaultValue: 80\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":538,"value":"Blend without the need for photoshop","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"viewof layerBlend = listInput({\n input: (v, i) =>\n Inputs.select(blend, {\n label: \"blend mode layer \" + (i + 1),\n value: blend[v]\n }),\n min: 3\n //defaultValue: [\"multiply\", \"difference\", \"normal\"]\n})\n\n//","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":507,"value":"button = d3.create(\"button\").text(\"click me\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"//html`${button.node()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":485,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":487,"value":"TO DO after this section","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"blendModes = Inputs.select(blend, { label: \"Blend modes\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"Inputs.select([null].concat(composite), { label: \"Composite modes\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"blend = [\n \"normal\",\n \"multiply\",\n \"screen\",\n \"overlay\",\n \"darken\",\n \"lighten\",\n \"color-dodge\",\n \"color-burn\",\n \"hard-light\",\n \"soft-light\",\n \"difference\",\n \"exclusion\",\n \"hue\",\n \"saturation\",\n \"color\",\n \"luminosity\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"composite = [\n \"clear\",\n \"copy\",\n \"source-over\",\n \"destination-over\",\n \"source-in\",\n \"destination-in\",\n \"source-out\",\n \"destination-out\",\n \"source-atop\",\n \"destination-atop\",\n \"xor\",\n \"lighter\",\n \"plus-darker\",\n \"plus-lighter\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"viewof layerComposite = listInput({\n input: (v, i) =>\n Inputs.select(composite, {\n label: \"layer\" + (i + 1),\n value: composite[v]\n }),\n min: 2,\n max: 2,\n defaultValue: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"# Resample ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":809,"value":"function resampleNearest(img, w, h, blockSize) {\n // downsample → upscale with smoothing off = pixelated\n const small = document.createElement(\"canvas\");\n small.width = Math.max(1, Math.round(w / blockSize));\n small.height = Math.max(1, Math.round(h / blockSize));\n const sc = small.getContext(\"2d\");\n sc.imageSmoothingEnabled = true;\n sc.drawImage(img, 0, 0, small.width, small.height);\n\n const out = document.createElement(\"canvas\");\n out.width = w; out.height = h;\n const oc = out.getContext(\"2d\");\n oc.imageSmoothingEnabled = false;\n oc.drawImage(small, 0, 0, w, h);\n return out;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":811,"value":"function resampleSmooth(img, w, h) {\n const out = document.createElement(\"canvas\");\n out.width = w; out.height = h;\n const oc = out.getContext(\"2d\");\n oc.imageSmoothingEnabled = true;\n oc.imageSmoothingQuality = \"high\";\n oc.drawImage(img, 0, 0, w, h);\n return out;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"function combineSingle(img, targetWidth, {\n axis = 0, // degrees\n coarse = 16, // block size at coarse end\n fine = 1, // block size at fine end (1 = no pixelation)\n edge = 0.5, // transition center 0..1\n feather = 0.4, // blend zone width 0..1\n opacity = 100,\n} = {}) {\n const w = targetWidth;\n const h = Math.round(w * img.naturalHeight / img.naturalWidth);\n\n const coarseCanvas = resampleNearest(img, w, h, coarse);\n const fineCanvas = fine <= 1\n ? resampleSmooth(img, w, h)\n : resampleNearest(img, w, h, fine);\n\n const blended = blendWithGradientMask(coarseCanvas, fineCanvas, w, h, axis, edge, feather);\n\n const out = document.createElement(\"canvas\");\n out.width = w; out.height = h;\n const ctx = out.getContext(\"2d\");\n ctx.globalAlpha = opacity / 100;\n ctx.drawImage(blended, 0, 0);\n return out;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"viewof seamControls = createSeamControls(3)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"function createBandResample(options = {}) {\n return listInput({\n input: (v, i) =>\n Inputs.range([1, 64], {\n step: 1,\n value: v,\n label: \"block size band \" + (i + 1)\n }),\n min: 3,\n defaultValue: options.defaultValue || [16, 4, 1]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"viewof bandResample = createBandResample({ defaultValue: [16, 4, 1] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":819,"value":"viewof bandParams = Inputs.form({\n mode: Inputs.select([\"single\", \"combo\"], { label: \"mode\" }),\n axis: Inputs.range([0, 360], { step: 1, value: 0, label: \"axis (°)\" }),\n coarse: Inputs.range([1, 64], { step: 1, value: 16, label: \"coarse block\" }),\n feather: Inputs.range([0, 1], { step: 0.01, value: 0.3, label: \"feather\" }),\n edge: Inputs.range([0, 1], {\n step: 0.01,\n value: 0.5,\n label: \"edge position\"\n }),\n width: Inputs.range([100, 5000], {\n step: 1,\n value: 1024,\n label: \"width\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"result = {\n //const img1 = layer1File ? await layer1File.image() : null;\n //const img2 = layer2File ? await layer2File.image() : null;\n //const img3 = layer3File ? await layer3File.image() : null;\n let img1 = img2;\n let img3 = img2;\n if (bandParams.mode === \"single\" && img1) {\n return combineSingle(img1, bandParams.width, {\n axis: bandParams.axis,\n coarse: bandParams.coarse,\n feather: bandParams.feather,\n edge: bandParams.edge\n });\n }\n\n return combineCombo([img1, img2, img3], bandParams.width, {\n axis: bandParams.axis,\n splits: seamControls.splits,\n feathers: seamControls.feathers,\n layerOpacity,\n blendModes,\n bands: [bandParams.coarse, Math.round(bandParams.coarse / 4), 1],\n feather: bandParams.feather,\n edge: bandParams.edge\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3b","stdlib":"1","titling":"auto"}} 33:"$32:body"