31:T73d,function paperTexture(options = {}) { let { width = 800, height = 600, baseAngle = 45, angleVar = 3, coarseness = 10, lengthVariation = 0.2, layers = 10, background = "white", color = "rgb(200,0,0)", colorVariation = 0.1, opacity = 0.7, blur = 2, randomSeed = 0 } = options; const sep = coarseness; baseAngle *= Math.PI / 180; angleVar *= Math.PI / 180; const [w, h] = [width + sep * 2, height + sep * 2]; const canvas = DOM.canvas(w, h); const ctx = canvas.getContext("2d"); const baseColor = d3.hsl(d3.color(color)); const rand = makeRandFunction(randomSeed); const avgLen = sep; const pds = new Poisson( { shape: [w, h], minDistance: sep * 0.8, maxDistance: sep / 0.8, tries: 15 }, rand ); ctx.lineWidth = sep / 4; const [minv, maxv] = [ Math.max(0.5, 1 - colorVariation), Math.min(1.5, 1 + colorVariation) ]; ctx.fillStyle = background; ctx.fillRect(0, 0, w, h); for (let [x, y] of pds.fill()) { ctx.beginPath(); const vlen = avgLen * rand(1 - lengthVariation, 1 + lengthVariation); const ang = baseAngle + rand(-angleVar, angleVar); const [vx, vy] = [vlen * Math.cos(ang), vlen * Math.sin(ang)]; ctx.moveTo(x - vx, y - vy); ctx.lineTo(x + vx, y + vy); let color = d3.hsl( baseColor.h, baseColor.s * rand(minv, maxv), baseColor.l * rand(minv, maxv) ); color.opacity = opacity; ctx.strokeStyle = color.formatRgb(); ctx.stroke(); } const canvas2 = DOM.canvas(width, height); const ctx2 = canvas2.getContext("2d"); ctx2.filter = `blur(${blur}px)`; ctx2.drawImage(canvas, 0, 0); if (layers > 1) { ctx2.globalAlpha = 0.5; for (let i = 1; i < layers; i++) ctx2.drawImage(canvas, rand(-sep, 0), rand(-sep, 0)); } return canvas2; }32:T66d,function fiberTexture(options = {}) { let { width = 800, height = 600, linewidth = 1, coarseness = 10, waviness = 0.2, background = "white", color = "black", colorVariation = 0, threadLen = 10, opacity = 0.2, randomSeed = 0 } = options; const canvas = DOM.canvas(width, height); const ctx = canvas.getContext("2d"); const baseColor = d3.hsl(color); const sep = coarseness; const avgLen = sep * 2; const rand = makeRandFunction(randomSeed); const pds = new Poisson( { shape: [width, height], minDistance: sep * 0.8, maxDistance: sep / 0.8, tries: 15 }, rand ); ctx.fillStyle = background; ctx.fillRect(0, 0, width, height); ctx.lineWidth = linewidth; const [minv, maxv] = [ Math.max(0.5, 1 - colorVariation), Math.min(1.5, 1 + colorVariation) ]; for (let [x, y] of pds.fill()) { let angle = rand(-Math.PI, Math.PI); let [px, py] = [x, y]; ctx.beginPath(); ctx.moveTo(x, y); for (let i = 0; i < threadLen; i++) { const pts = d3.range(3).map((k) => { const len = sep * 0.3 * rand(0.7, 1 / 0.7); if (k != 0) angle += Math.PI * 0.25 * rand(-waviness, waviness); const p = [px + len * Math.cos(angle), py + len * Math.sin(angle)]; [px, py] = p; return p; }); ctx.bezierCurveTo(...pts.flat()); } let color = d3.hsl( baseColor.h * rand(minv, maxv), baseColor.s * rand(minv, maxv), baseColor.l * rand(minv, maxv) ); color.opacity = opacity; ctx.strokeStyle = color.formatRgb(); ctx.stroke(); } return canvas; }33:T733,viewof noiseTextureParams = Inputs.form({ coarseness: Inputs.range([5, 100], { label: "coarseness", value: 20, step: 1 }), background: Inputs.color({ label: "background", value: "#ffffff" }), color: Inputs.color({ label: "base color", value: "#770000" }), opacity: Inputs.range([0.1, 1], { label: "opacity", value: 0.5, step: 0.1 }), primitive: Inputs.radio(["circle", "square", "triangle", "slab"], { label: "primitive", value: "square" }), baseSize: Inputs.range([0.5, 4], { label: "base Size", step: 0.1, value: 1 }), sizeModulation: Inputs.range([0, 2], { label: "size modulation", value: 1, step: 0.1 }), sizeNoiseAmplitude: Inputs.range([20, 1000], { label: "size noise amplitude", value: 100, step: 0.1 }), angleModulation: Inputs.range([0, 1], { label: "angle modulation", value: 0, step: 0.1 }), angleNoiseAmplitude: Inputs.range([20, 1000], { label: "angle noise amplitude", value: 100, step: 0.1 }), aspectModulation: Inputs.range([0, 1], { label: "aspect modulation", value: 0, step: 0.1 }), aspectNoiseAmplitude: Inputs.range([20, 1000], { label: "aspect noise amplitude", value: 100, step: 0.1 }), lumModulation: Inputs.range([0, 1], { label: "luminosity modulation", value: 0, step: 0.1 }), lumNoiseAmplitude: Inputs.range([20, 1000], { label: "luminosity noise amplitude", value: 100, step: 0.1 }), hueModulation: Inputs.range([0, 1], { label: "hue modulation", value: 0, step: 0.1 }), hueNoiseAmplitude: Inputs.range([20, 1000], { label: "hue noise amplitude", value: 100, step: 0.1 }), blur: Inputs.range([0, 10], { label: "blur", value: 0, step: 1 }), randomSeed: Inputs.range([0, 10], { label: "random seed", value: 0 }) })34:Tb7a,function noiseTexture(options = {}) { let { width = 800, height = 600, coarseness = 30, background = "white", color = "red", baseSize = 1, sizeModulation = 1, aspectModulation = 1, angleModulation = 1, hueModulation = 0.5, lumModulation = 0.5, primitive = "line", sizeNoiseAmplitude = 100, aspectNoiseAmplitude = 100, angleNoiseAmplitude = 200, hueNoiseAmplitude = 100, lumNoiseAmplitude = 200, opacity = 0.7, randomSeed = 1, blur = 0 } = options; const baseColor = d3.hsl(d3.color(color)); baseColor.opacity = opacity; const canvas = DOM.canvas(width, height); const ctx = canvas.getContext("2d"); const sep = coarseness; const [deltax, deltay] = [sep * 0.5, sep * 0.5]; const size = sep * 0.5 * baseSize; const rand = makeRandFunction(randomSeed); const makeNoise = (amplitude) => { const scale = -Math.log2(amplitude); return createSimplexNoise({ xScaleLog: scale, yScaleLog: scale, octaves: 1, random: rand }); }; const sizeNoise = makeNoise(sizeNoiseAmplitude); const aspectNoise = makeNoise(aspectNoiseAmplitude); const angleNoise = makeNoise(angleNoiseAmplitude); const hueNoise = makeNoise(hueNoiseAmplitude); const lumNoise = makeNoise(lumNoiseAmplitude); const draw = primitive == "circle" ? () => { ctx.beginPath(); ctx.arc(0, 0, 0.5, 0, Math.PI * 2); ctx.fill(); } : primitive == "square" ? () => { ctx.fillRect(-0.5, -0.5, 1, 1); } : primitive == "triangle" ? () => { ctx.beginPath(); ctx.moveTo(-0.5, -0.5); ctx.lineTo(0.5, 0.5); ctx.lineTo(-0.5, 0.5); ctx.fill(); } : () => { ctx.beginPath(); ctx.moveTo(-0.25, -0.75); ctx.lineTo(-0.75, -0.25); ctx.lineTo(0.25, 0.75); ctx.lineTo(0.75, 0.25); ctx.fill(); }; ctx.fillStyle = background; ctx.fillRect(0, 0, width, height); for (let x = -deltax; x - deltax <= width; x += deltax) { for (let y = -deltay; y - deltay <= height; y += deltay) { ctx.resetTransform(); ctx.translate(x, y); const ang = angleModulation * angleNoise(x, y) * Math.PI; ctx.rotate(ang); const s = 1 + sizeModulation * sizeNoise(x, y); const a = aspectModulation * aspectNoise(x, y); ctx.scale(size * s * (1 + a), size * s * (1 - a)); const hfactor = hueModulation * 180 * hueNoise(x, y); const lfactor = lumModulation * 0.5 * lumNoise(x, y); ctx.fillStyle = d3 .hsl(baseColor.h + hfactor, baseColor.s, baseColor.l + lfactor, opacity) .formatRgb(); draw(); } } const canvas2 = DOM.canvas(width, height); const ctx2 = canvas2.getContext("2d"); ctx2.filter = `blur(${blur}px)`; ctx2.drawImage(canvas, 0, 0); return canvas2; }35:[{"id":"14d3b323ca30b687caf3bd9d6ffa28a9184656ccac8f75a7188ff65fc0aaeffe69b9bf68fd14cbdb8b1c28dc4ec23881e9c01ad08bd070ed668ea43f355abdc6","href":"https://static.observableusercontent.com/files/14d3b323ca30b687caf3bd9d6ffa28a9184656ccac8f75a7188ff65fc0aaeffe69b9bf68fd14cbdb8b1c28dc4ec23881e9c01ad08bd070ed668ea43f355abdc6","name":"presets@1.json","type":"application/json","lastModified":1694106121555.152,"size":3039}] 2f:{"title":"Synthetic texture algorithms","cells":[{"id":0,"value":"# Synthetic texture algorithms\n\nHere, we experiment with 3 pattern-making algorithms. Each has a number of parameters that can be tweaked to your heart's content. A few presets have been added so that you can get an idea of the algorithm's expressiveness. \n","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"## Paper-like texture","pinned":false,"hidden":false,"mode":"md"},{"id":126,"value":"viewof paperTextureParms = Inputs.form({\n baseAngle: Inputs.range([-90, 90], { label: \"angle\", step: 1, value: 45 }),\n angleVar: Inputs.range([0, 20], {\n label: \"angle variation\",\n step: 1,\n value: 2\n }),\n coarseness: Inputs.range([3, 30], {\n label: \"coarseness\",\n step: 1,\n value: 10\n }),\n lengthVariation: Inputs.range([0, 0.5], {\n label: \"length variation\",\n value: 0.2,\n step: 0.05\n }),\n layers: Inputs.range([1, 30], {\n label: \"layers\",\n step: 1,\n value: 10\n }),\n background: Inputs.color({ label: \"background\", value: \"#ffffff\" }),\n color: Inputs.color({ label: \"base color\", value: \"#777777\" }),\n opacity: Inputs.range([0.1, 1], { label: \"opacity\", value: 0.7, step: 0.1 }),\n colorVariation: Inputs.range([0, 0.5], {\n label: \"color variation\",\n value: 0.2,\n step: 0.05\n }),\n blur: Inputs.range([0, 10], { label: \"blur\", value: 2, step: 1 }),\n randomSeed: Inputs.range([0, 10], { label: \"random seed\", value: 0 })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":586,"value":"viewof paperTexturePresets = presetMenu(\n viewof paperTextureParms,\n presets.paperPresets\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"samplePaperTexture = paperTexture(\n Object.assign({ width, height: (width * 9) / 16 }, paperTexturePresets)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"
\n## Fiber texture","pinned":false,"hidden":false,"mode":"md"},{"id":167,"value":"viewof fiberTextureParam = Inputs.form({\n linewidth: Inputs.range([0.5, 5], {\n label: \"fiber thickness\",\n value: 1,\n step: 0.2\n }),\n coarseness: Inputs.range([5, 50], {\n label: \"coarseness\",\n value: 10,\n step: 1\n }),\n waviness: Inputs.range([0.2, 5], { label: \"waviness\", value: 1, step: 0.1 }),\n threadLen: Inputs.range([1, 10], {\n label: \"thread length\",\n value: 4,\n step: 1\n }),\n background: Inputs.color({ label: \"background\", value: \"#ffffff\" }),\n color: Inputs.color({ label: \"base color\", value: \"#777777\" }),\n opacity: Inputs.range([0.1, 1], { label: \"opacity\", value: 0.7, step: 0.1 }),\n colorVariation: Inputs.range([0, 0.5], {\n label: \"color variation\",\n value: 0.2,\n step: 0.05\n }),\n randomSeed: Inputs.range([0, 10], { label: \"random seed\", value: 0 })\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":555,"value":"viewof fiberTexturePresets = presetMenu(\n viewof fiberTextureParam,\n presets.fiberPresets\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":133,"value":"sampleFiberTexture = fiberTexture(fiberTexturePresets)","pinned":false,"hidden":false,"mode":"ojs"},{"id":131,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"
\n## Noise texture","pinned":false,"hidden":false,"mode":"md"},{"id":511,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":538,"value":"viewof noiseTexturePresets = presetMenu(\n viewof noiseTextureParams,\n presets.noisePresets,\n { label: \"presets\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"sampleNoiseTexture = noiseTexture(noiseTexturePresets)","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":596,"value":"
\n## Presets\n","pinned":false,"hidden":false,"mode":"md"},{"id":550,"value":"savePresets = {\n const button = htl.html`