// sketch.js — Tone-mapped tile library with brightness-ordered patterns (p5.js + OPC) // Plotter-ready: stroke-only, deterministic via Seed, single render, margin aware. // Noise value → pick tile whose estimated darkness best matches that tone. // // Requires: p5.js, opc.js. Optional: p5.svg (if present, canvas uses SVG). // Keys: S = save (PNG or SVG via browser "Save as..."), R = reseed. let cnv; // ---------- p5 lifecycle ---------- function preload(){} function setup(){ const w0 = 1000, h0 = 1200; cnv = (typeof SVG !== 'undefined') ? createCanvas(w0, h0, SVG) : createCanvas(w0, h0); pixelDensity(1); noLoop(); strokeCap(SQUARE); strokeJoin(MITER); // ---------- OPC ---------- OPC.title('Canvas'); OPC.slider({ name:'Width', value:w0, min:400, max:3200, step:10, label:'Width', description:'Canvas width (px)' }); OPC.slider({ name:'Height', value:h0, min:400, max:3200, step:10, label:'Height', description:'Canvas height (px)' }); OPC.slider({ name:'Margin', value:64, min:0, max:240, step:1, label:'Margin', description:'Outer border (px)' }); OPC.slider({ name:'Stroke_Width', value:2, min:1, max:12, step:1, label:'Stroke Width', description:'Pen width (px)' }); OPC.slider({ name:'Seed', value:12345, min:0, max:1_000_000, step:1, label:'Seed', description:'Random + noise seed' }); OPC.toggle({ name:'Preview_BG', value:true, label:'Preview Background', description:'Off for transparent SVG preview' }); OPC.title('Grid'); OPC.slider({ name:'Cell', value:24, min:6, max:120, step:1, label:'Cell Size', description:'Tile width/height (px)' }); OPC.toggle({ name:'Center_Grid', value:true, label:'Center Grid' }); OPC.title('Noise'); OPC.slider({ name:'Noise_Scale_X', value:0.02, min:0.001, max:0.2, step:0.001, label:'Scale X' }); OPC.slider({ name:'Noise_Scale_Y', value:0.02, min:0.001, max:0.2, step:0.001, label:'Scale Y' }); OPC.slider({ name:'Noise_Z', value:0.0, min:0, max:10, step:0.001, label:'Z Slice', description:'3rd dimension' }); OPC.toggle({ name:'Flow_Z_By_Row', value:true, label:'Flow Z by Row' }); OPC.slider({ name:'Z_Step', value:0.00005, min:0, max:0.01, step:0.00001, label:'Z Step/Row' }); OPC.title('Tone Mapping', 'Map noise → closest tile darkness'); OPC.slider({ name:'Tone_Bias', value:0.0, min:-0.5, max:0.5, step:0.01, label:'Bias' }); OPC.slider({ name:'Tone_Gamma', value:1.0, min:0.3, max:3.0, step:0.01, label:'Gamma' }); OPC.toggle({ name:'Include_Empty', value:true, label:'Include Empty Tile' }); OPC.title('Pattern Families'); OPC.toggle({ name:'Use_Diagonals', value:true, label:'Use Diagonals (\\ and /)' }); OPC.toggle({ name:'Use_Rectangles', value:true, label:'Use Rectangles' }); OPC.toggle({ name:'Use_Crosses', value:true, label:'Use Crosses (X, Asterisk, Hash)' }); OPC.title('Pattern Params'); OPC.slider({ name:'Dash_Segments', value:8, min:2, max:40, step:1, label:'Dash Segments' }); OPC.slider({ name:'Double_Offset', value:3, min:1, max:20, step:1, label:'Double/Inset Offset (px)' }); OPC.slider({ name:'Zigzag_Amp_Pct', value:0.18, min:0, max:0.5, step:0.01, label:'Zigzag Amplitude (% cell)' }); OPC.slider({ name:'Zigzag_Freq', value:5, min:1, max:20, step:1, label:'Zigzag Frequency' }); OPC.slider({ name:'Grid_Divs', value:3, min:2, max:12, step:1, label:'Rect Grid Divisions' }); OPC.slider({ name:'Corner_Len_Pct', value:0.35, min:0.05, max:0.5, step:0.01, label:'Corner Length (% cell)' }); OPC.title('Transform'); OPC.select({ name:'Rotate_Mode', options:['None','Random90','Alternate'], value:'None', label:'Tile Rotation' }); OPC.title('Actions'); OPC.button({ name:'Reseed', value:'Reseed', label:'Reseed' }); } function draw(){ // ----- read OPC ----- const W = Width, H = Height; if (width !== W || height !== H) resizeCanvas(W, H); const m = Margin; const sw = Stroke_Width; const s = Cell; const nsx = Noise_Scale_X; const nsy = Noise_Scale_Y; const z0 = Noise_Z; const flowZ = Flow_Z_By_Row; const zStep = Z_Step; const bias = Tone_Bias; const gamma = Tone_Gamma; // deterministic randomSeed(Seed|0); noiseSeed(Seed|0); // preview bg only (plotter is stroke-only) if (Preview_BG) { background(255); } else { clear(); } noFill(); stroke(0); strokeWeight(sw); // grid extents const innerW = W - 2*m; const innerH = H - 2*m; const cols = max(1, floor(innerW / s)); const rows = max(1, floor(innerH / s)); const gridW = cols * s; const gridH = rows * s; const x0 = Center_Grid ? floor((W - gridW)/2) : m; const y0 = Center_Grid ? floor((H - gridH)/2) : m; // build and order pattern library by estimated darkness const lib = buildPatternLibrary(s, sw); if (lib.length === 0){ return; } lib.sort((a,b)=>a.dark-b.dark); // 0 = bright, 1 = dark // row-wise noise z let zRow = z0; // tile render for (let r = 0; r < rows; r++){ const y = y0 + r*s; const cy = y + s*0.5; for (let c = 0; c < cols; c++){ const x = x0 + c*s; const cx = x + s*0.5; // sample noise at tile center let n = noise(cx*nsx, cy*nsy, zRow); // tone shaping n = clamp01(pow(clamp01(n + bias), gamma)); // pick closest by darkness let best = lib[0], bestDiff = 1e9; for (let i=0;i{} // nothing }); } const segs = Dash_Segments|0; const off = Double_Offset; const amp = Zigzag_Amp_Pct * s; const freq = max(1, Zigzag_Freq|0); const divs = max(2, Grid_Divs|0); const cl = Corner_Len_Pct * s; // helpers for darkness ~ (ink length * stroke) / area const area = s*s; const diagLen = s*Math.SQRT2; function darknessFromLen(len){ return clamp01((len * sw) / area); } function dashedFrac(N){ return Math.ceil(N/2)/N; } function zigzagLenDiag(){ const pts = zigzagPoints(0,0,s,s,freq,amp); let sum = 0; for (let i=1;idrawDiagBackslash(x,y,s,sw,'Single') }); L.push({ id:'diag_bs_dashed', dark:darknessFromLen(diagLen*dashedFrac(segs)), draw:(x,y,s,sw)=>drawDiagBackslash(x,y,s,sw,'Dashed') }); L.push({ id:'diag_bs_zigzag', dark:darknessFromLen(zigzagLenDiag()), draw:(x,y,s,sw)=>drawDiagBackslash(x,y,s,sw,'Zigzag') }); L.push({ id:'diag_bs_chevron', dark:darknessFromLen(chevronLenDiag()), draw:(x,y,s,sw)=>drawDiagBackslash(x,y,s,sw,'Chevron') }); L.push({ id:'diag_bs_double', dark:darknessFromLen(2*diagLen), draw:(x,y,s,sw)=>drawDiagBackslash(x,y,s,sw,'Double') }); // slash (/) L.push({ id:'diag_sl_single', dark:darknessFromLen(diagLen), draw:(x,y,s,sw)=>drawDiagSlash(x,y,s,sw,'Single') }); L.push({ id:'diag_sl_dashed', dark:darknessFromLen(diagLen*dashedFrac(segs)), draw:(x,y,s,sw)=>drawDiagSlash(x,y,s,sw,'Dashed') }); L.push({ id:'diag_sl_zigzag', dark:darknessFromLen(zigzagLenAntiDiag()), draw:(x,y,s,sw)=>drawDiagSlash(x,y,s,sw,'Zigzag') }); L.push({ id:'diag_sl_chevron', dark:darknessFromLen(chevronLenAntiDiag()), draw:(x,y,s,sw)=>drawDiagSlash(x,y,s,sw,'Chevron') }); L.push({ id:'diag_sl_double', dark:darknessFromLen(2*diagLen), draw:(x,y,s,sw)=>drawDiagSlash(x,y,s,sw,'Double') }); } if (Use_Rectangles){ const perim = (side)=> max(0, 4*(side - 0)); // approximate; pad ignored in estimate const outlineLen = perim(s - sw); const insetLen = perim(s - sw) + perim(max(0, s - 2*off - sw)); const gridLen = outlineLen + 2*(divs-1)*s; const cornersLen = 8 * cl; const crosshairLen = outlineLen + 2*s; L.push({ id:'rect_outline', dark:darknessFromLen(outlineLen), draw:(x,y,s,sw)=>drawRectVariant(x,y,s,sw,'Outline') }); L.push({ id:'rect_inset', dark:darknessFromLen(insetLen), draw:(x,y,s,sw)=>drawRectVariant(x,y,s,sw,'Inset') }); L.push({ id:'rect_corners', dark:darknessFromLen(cornersLen), draw:(x,y,s,sw)=>drawRectVariant(x,y,s,sw,'Corners') }); L.push({ id:'rect_crosshair', dark:darknessFromLen(crosshairLen), draw:(x,y,s,sw)=>drawRectVariant(x,y,s,sw,'Crosshair') }); L.push({ id:'rect_grid', dark:darknessFromLen(gridLen), draw:(x,y,s,sw)=>drawRectVariant(x,y,s,sw,'Grid') }); } if (Use_Crosses){ const xLen = 2*diagLen; const dblXLen = 4*diagLen; const asterisk = 2*diagLen + 2*s; const hashLen = 4*s; L.push({ id:'cross_x', dark:darknessFromLen(xLen), draw:(x,y,s,sw)=>drawCrossVariant(x,y,s,sw,'X') }); L.push({ id:'cross_hash', dark:darknessFromLen(hashLen), draw:(x,y,s,sw)=>drawCrossVariant(x,y,s,sw,'Hash') }); L.push({ id:'cross_asterisk', dark:darknessFromLen(asterisk), draw:(x,y,s,sw)=>drawCrossVariant(x,y,s,sw,'Asterisk') }); L.push({ id:'cross_doublex', dark:darknessFromLen(dblXLen), draw:(x,y,s,sw)=>drawCrossVariant(x,y,s,sw,'Double X') }); } return L; } // ---------- tile drawers ---------- function drawDiagBackslash(x, y, s, sw, variant){ withTile(x, y, s, () => { if (Rotate_Mode !== 'None'){ applyRotationVariant(x, y, s); } const off = Double_Offset; const segs = Dash_Segments|0; const amp = Zigzag_Amp_Pct * s; const freq = Zigzag_Freq|0; switch(variant){ case 'Single': line(0, 0, s, s); break; case 'Double': parallelLine(0, 0, s, s, off); parallelLine(0, 0, s, s, -off); break; case 'Dashed': dashedLine(0, 0, s, s, segs); break; case 'Zigzag': polyline(zigzagPoints(0,0,s,s,freq,amp)); break; case 'Chevron': { const a = amp*0.7; const midx = s*0.5, midy = s*0.5; line(0,0, midx, midy+a); line(midx, midy+a, s, s); break; } } }); } function drawDiagSlash(x, y, s, sw, variant){ withTile(x, y, s, () => { if (Rotate_Mode !== 'None'){ applyRotationVariant(x, y, s); } const off = Double_Offset; const segs = Dash_Segments|0; const amp = Zigzag_Amp_Pct * s; const freq = Zigzag_Freq|0; switch(variant){ case 'Single': line(0, s, s, 0); break; case 'Double': parallelLine(0, s, s, 0, off); parallelLine(0, s, s, 0, -off); break; case 'Dashed': dashedLine(0, s, s, 0, segs); break; case 'Zigzag': polyline(zigzagPoints(0,s,s,0,freq,amp)); break; case 'Chevron': { const a = amp*0.7; const midx = s*0.5, midy = s*0.5; line(0,s, midx, midy-a); line(midx, midy-a, s, 0); break; } } }); } function drawRectVariant(x, y, s, sw, variant){ withTile(x, y, s, () => { if (Rotate_Mode !== 'None'){ applyRotationVariant(x, y, s); } const inset = Double_Offset; const divs = max(2, Grid_Divs|0); const cl = Corner_Len_Pct * s; switch(variant){ case 'Outline': { const pad = sw*0.5; rect(pad, pad, s-2*pad, s-2*pad); break; } case 'Inset': { const pad = sw*0.5; rect(pad, pad, s-2*pad, s-2*pad); rect(pad+inset, pad+inset, s-2*(pad+inset), s-2*(pad+inset)); break; } case 'Grid': { const pad = sw*0.5; rect(pad, pad, s-2*pad, s-2*pad); for (let i=1;i { if (Rotate_Mode !== 'None'){ applyRotationVariant(x, y, s); } const off = Double_Offset; switch(variant){ case 'X': line(0,0,s,s); line(0,s,s,0); break; case 'Double X': parallelLine(0,0,s,s, off); parallelLine(0,0,s,s,-off); parallelLine(0,s,s,0, off); parallelLine(0,s,s,0,-off); break; case 'Asterisk': line(0,0,s,s); line(0,s,s,0); line(s*0.5,0,s*0.5,s); line(0,s*0.5,s,s*0.5); break; case 'Hash': { const n = 3; // 3x3 hash for (let i=1;i