2d:null 2e:["$","title",null,{"children":"Interpolate seismic | Tom Kristian Tjemsland | Observable"}] 33:T5d4,{ const width = pixels.length; const height = 255; const root = d3.create('div'); const text = root.append('div') .text('RGB: [0, 0, 0] - Frac: ') const svg = root.append('svg') .attr('width', `${width}px`) .attr('height', `${height}px`) .style('position', 'absolute') .attr('pointer-events', 'none'); // Don't consume click events const line = svg.append('line') .attr('x1', 0) .attr('y1', 0) .attr('x2', 0) .attr('y2', height) .attr('stroke', 'White') .attr('pointer-events', 'none'); // Don't consume click events const canvas = root.append('canvas') .attr('width', `${width}px`) .attr('height', `${height}px`) .on('mousemove', d => { const mouseX = d3.mouse(canvas)[0]; line.attr('x1', mouseX) .attr('x2', mouseX); const col = pixels[mouseX]; text.text(`RGB: [${col}] - Frac: ${mouseX / width}`); }) .node(); const ctx = canvas.getContext('2d'); const imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imgdata.data; for (let x = 0.0; x < width; x++) { const col = pixels[x]; for (let y = 0.0; y < height; y++) { data[(x + y * width) * 4] = y < col[0] ? col[0] : 0; data[(x + y * width) * 4 + 1] = y < col[1] ? col[1] : 0; data[(x + y * width) * 4 + 2] = y < col[2] ? col[2] : 0; data[(x + y * width) * 4 + 3] = 255; } } ctx.putImageData(imgdata, 0, 0); return root.node(); }34:T509,gradient = { // Calculate optimal compression to linear gradient. Put 5% weight to amount of entries created. let minDeviation = Infinity; let minValue = -1; for (let i = 5; i <= 100; i++) { const val = 1 / i; let deviation = 0; colors.forEach(d => { const remainder = d.frac % val; if (remainder < val * 0.5) deviation += remainder; else deviation += val - deviation; }) if (deviation * (i * 0.05) < minDeviation) { minDeviation = deviation; minValue = val; } } // Round color fraction to optimal solution const colorsApprox = colors.map(d => { return { frac: Math.round(d.frac / minValue) * minValue, // Compress val: d.val, }; }); const output = []; for (let i = 1; i < colorsApprox.length; i++) { const prev = colorsApprox[i - 1]; const cur = colorsApprox[i]; const deltaFrac = cur.frac - prev.frac; // Iterate between colors linearly for (let frac = prev.frac; frac < cur.frac - minValue * 0.5; frac += minValue) { const rel = (frac - prev.frac) / deltaFrac; const from = RGB.fromArray(prev.val); const to = RGB.fromArray(cur.val); const col = RGB.interpolate(from, to, 1 - rel); output.push(col); } } return output; }35:T41f,{ const width = pixels.length; const height = 30; const canvas = d3.create('canvas') .attr('width', `${width}px`) .attr('height', `${height}px`) .node(); const ctx = canvas.getContext('2d'); const imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height); const data = imgdata.data; for (let x = 0.0; x < width; x++) { for (let y = 0.0; y < height; y++) { const frac = (x / width) * 20; // Decimal index const left = gradient[Math.floor(frac)]; const right = gradient[Math.ceil(frac)]; const deltaFrac = Math.ceil(frac) - Math.floor(frac); if(right === undefined) continue; let col; if (left === right) col = left; else col = RGB.interpolate(left, right, 1 - (frac - Math.floor(frac)) / deltaFrac); data[(x + y * width) * 4] = col.r; data[(x + y * width) * 4 + 1] = col.g; data[(x + y * width) * 4 + 2] = col.b; data[(x + y * width) * 4 + 3] = 255; } } ctx.putImageData(imgdata, 0, 0); return canvas }36:T151f,colormap = "data:image/png;base64,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"37:[] 31:{"id":"6348cc2effedf314","slug":"interpolate-seismic","title":"Interpolate seismic","thumbnail":"269a88e768b6f31f219c2b598a994de3340eafd9f778a5dc5554291608fb2046","access_level":"public","create_time":"$D2019-10-17T12:20:23.047Z","update_time":"$D2019-10-23T13:21:45.063Z","view_time":null,"first_public_time":"$D2019-10-18T07:13:58.867Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a49ab297471727ef","login":"tomktjemsland","name":"Tom Kristian Tjemsland","avatar_url":"https://avatars-next.observableusercontent.com/271d0fc197b9153a9c5a4aa29d3f170cbe6d604ab2969e36da2635c2ea6021dd","tier":"starter_2024"},"version":499,"publish_version":499,"role":null,"authored":false,"authors":[{"type":"individual","id":"e44acfdca79f4aeb","login":"tomktjemsland","name":"Tom Kristian Tjemsland","avatar_url":"https://avatars-next.observableusercontent.com/271d0fc197b9153a9c5a4aa29d3f170cbe6d604ab2969e36da2635c2ea6021dd","tier":null}],"members":[{"type":"individual","id":"e44acfdca79f4aeb","login":"tomktjemsland","name":"Tom Kristian Tjemsland","avatar_url":"https://avatars-next.observableusercontent.com/271d0fc197b9153a9c5a4aa29d3f170cbe6d604ab2969e36da2635c2ea6021dd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Interpolate seismic","cells":[{"id":0,"value":"md`# Interpolate seismic`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"md`Upper gradient is estimation with 7 keypoints.
\n Lower gradient use the actual color values.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"{\n const width = pixels.length;\n const height = 80;\n \n const canvas = d3.create('canvas')\n .attr('width', `${width}px`)\n .attr('height', `${height}px`)\n .node();\n \n const ctx = canvas.getContext('2d');\n const imgdata = ctx.getImageData(0, 0, canvas.width, canvas.height);\n const data = imgdata.data;\n \n for (let x = 0.0; x < width; x++) {\n for (let y = 0.0; y < height; y++) {\n let col = [255, 255, 255];\n if (y < 40 - 5) col = InterpolateSeismic(x / width); // Interpolated\n if (y > 40 + 5) col = pixels[x]; // Original\n data[(x + y * width) * 4] = col[0];\n data[(x + y * width) * 4 + 1] = col[1];\n data[(x + y * width) * 4 + 2] = col[2];\n data[(x + y * width) * 4 + 3] = 255; \n }\n }\n \n ctx.putImageData(imgdata, 0, 0);\n \n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"md`## Sampling:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"md`## Convert to linear gradient:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":332,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`## Functions:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"InterpolateSeismic = (t) => {\n for (let i = 1; i < colors.length; i++) {\n const cur = colors[i];\n if (t <= cur.frac) { // Less than fraction\n const prev = colors[i - 1];\n return InterpolateColor(cur.val, prev.val, (t - prev.frac) / (cur.frac - prev.frac));\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"InterpolateColor = (a, b, n) => {\n const m = 1 - n;\n return [\n a[0] * n + b[0] * m,\n a[1] * n + b[1] * m,\n a[2] * n + b[2] * m,\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`## Data:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":493,"value":"gradientImage = {\n const img = new Image();\n img.src = colormap; \n return img;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"pixels = {\n // Create target canvas\n const canvas = d3.create('canvas')\n .attr('width', `${gradientImage.width}px`)\n .attr('height', `${gradientImage.height}px`)\n .node();\n \n // Draw image to context\n const ctx = canvas.getContext(\"2d\");\n ctx.drawImage(gradientImage, 0, 0); \n \n // Get image data\n const imageData = ctx.getImageData(0, 0, gradientImage.width, gradientImage.height);\n const pixels = imageData.data;\n \n // Sample middle\n const centerX = Math.floor(gradientImage.width / 2);\n \n const colors = [];\n \n // Sample downwards\n for (let y = 0.0; y < imageData.height; y++) {\n colors.push([\n pixels[(centerX + y * imageData.width) * 4], // Red\n pixels[(centerX + y * imageData.width) * 4 + 1], // Green\n pixels[(centerX + y * imageData.width) * 4 + 2], // Blue\n ]);\n }\n \n return colors;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"md`Sampled colors:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":347,"value":"colors = [\n {frac: 0.000, val: [0,240,255]},\n {frac: 0.254, val: [0,0,255]},\n {frac: 0.388, val: [70,70,70]},\n {frac: 0.515, val: [195,185,185]},\n {frac: 0.642, val: [140,70,0]},\n {frac: 0.770, val: [255,85,0]},\n {frac: 1.000, val: [255,240,0]},\n ];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"md`## Imports:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"d3 = require('d3@5');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"import { RGB } from '@tomktjemsland/color-library'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"