// p5.js — original parameters + scale control + SVG export + New Pattern + Save PNG // plus a Layers slider to draw fewer lines (less busy shapes) // Paste into p5 editor or an HTML page that loads p5.js // ---------------- original parameters ---------------- const [pointCount, noiseScaleInc, steps, opacity] = [ [4, 0.01, 200, -0.2], [3, 0.01, 200, -0.2], [500, 0.001, 200, -0.1], [250, 0.0005, 40, -0.8], ][0]; let drawScale = 160; // default, user can change via slider // ----------------------------------------------------- // --- Perlin implementation (unchanged) --- const lib = {}; (function(lib) { function Grad(x, y, z) { this.x = x; this.y = y; this.z = z; } Grad.prototype.dot2 = function(x, y) { return this.x*x + this.y*y; }; Grad.prototype.dot3 = function(x, y, z) { return this.x*x + this.y*y + this.z*z; }; const grad3 = [new Grad(1,1,0),new Grad(-1,1,0),new Grad(1,-1,0),new Grad(-1,-1,0), new Grad(1,0,1),new Grad(-1,0,1),new Grad(1,0,-1),new Grad(-1,0,-1), new Grad(0,1,1),new Grad(0,-1,1),new Grad(0,1,-1),new Grad(0,-1,-1)]; const p = [151,160,137,91,90,15, 131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23, 190, 6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33, 88,237,149,56,87,174,20,125,136,171,168, 68,175,74,165,71,134,139,48,27,166, 77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244, 102,143,54, 65,25,63,161, 1,216,80,73,209,76,132,187,208, 89,18,169,200,196, 135,130,116,188,159,86,164,100,109,198,173,186, 3,64,52,217,226,250,124,123, 5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42, 223,183,170,213,119,248,152, 2,44,154,163, 70,221,153,101,155,167, 43,172,9, 129,22,39,253, 19,98,108,110,79,113,224,232,178,185, 112,104,218,246,97,228, 251,34,242,193,238,210,144,12,191,179,162,241, 81,51,145,235,249,14,239,107, 49,192,214, 31,181,199,106,157,184, 84,204,176,115,121,50,45,127, 4,150,254, 138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180]; const perm = new Array(512); const gradP = new Array(512); lib.seed = function(seed) { if(seed > 0 && seed < 1) seed *= 65536; seed = Math.floor(seed); if(seed < 256) seed |= seed << 8; for(var i = 0; i < 256; i++) { var v; if (i & 1) v = p[i] ^ (seed & 255); else v = p[i] ^ ((seed>>8) & 255); perm[i] = perm[i + 256] = v; gradP[i] = gradP[i + 256] = grad3[v % 12]; } }; lib.seed(0); function fade(t) { return t*t*t*(t*(t*6-15)+10); } function lerp(a, b, t) { return (1-t)*a + t*b; } lib.perlin3 = function(x, y, z) { var X = Math.floor(x), Y = Math.floor(y), Z = Math.floor(z); x = x - X; y = y - Y; z = z - Z; X = X & 255; Y = Y & 255; Z = Z & 255; var n000 = gradP[X+ perm[Y+ perm[Z ]]].dot3(x, y, z); var n001 = gradP[X+ perm[Y+ perm[Z+1]]].dot3(x, y, z-1); var n010 = gradP[X+ perm[Y+1+perm[Z ]]].dot3(x, y-1, z); var n011 = gradP[X+ perm[Y+1+perm[Z+1]]].dot3(x, y-1, z-1); var n100 = gradP[X+1+perm[Y+ perm[Z ]]].dot3(x-1, y, z); var n101 = gradP[X+1+perm[Y+ perm[Z+1]]].dot3(x-1, y, z-1); var n110 = gradP[X+1+perm[Y+1+perm[Z ]]].dot3(x-1, y-1, z); var n111 = gradP[X+1+perm[Y+1+perm[Z+1]]].dot3(x-1, y-1, z-1); var u = fade(x); var v = fade(y); var w = fade(z); return lerp( lerp( lerp(n000, n100, u), lerp(n001, n101, u), w), lerp( lerp(n010, n110, u), lerp(n011, n111, u), w), v); }; })(lib); const { seed, perlin3 } = lib; // ---------------------------------------------------------------- // store geometry for SVG export let allShapes = []; // array of arrays of {x,y} // UI elements let scaleSlider, layersSlider, redrawBtn, exportBtn, newPatternBtn, savePngBtn; let rngSeed; function setup() { createCanvas(windowWidth, windowHeight); pixelDensity(1); background(0); strokeCap(ROUND); noFill(); // UI: scale slider scaleSlider = createSlider(20, 800, drawScale, 1); scaleSlider.position(10, 10); scaleSlider.style('width', '160px'); // Layers slider (controls how many lines/layers are drawn) // default fewer lines so shapes are cleaner: default 40 layersSlider = createSlider(4, steps, Math.min(40, steps), 1); layersSlider.position(scaleSlider.x + scaleSlider.width + 12, 10); layersSlider.style('width', '160px'); // Redraw button redrawBtn = createButton('Redraw'); redrawBtn.position(layersSlider.x + layersSlider.width + 12, 10); redrawBtn.mousePressed(() => { drawScale = scaleSlider.value(); redrawComposition(); }); // Export SVG button exportBtn = createButton('Export SVG (s)'); exportBtn.position(redrawBtn.x + redrawBtn.width + 12, 10); exportBtn.mousePressed(() => exportSVG()); // New Pattern button (generates a new seed and redraws) newPatternBtn = createButton('New Pattern'); newPatternBtn.position(exportBtn.x + exportBtn.width + 12, 10); newPatternBtn.mousePressed(() => { rngSeed = Math.random(); console.log('new rngSeed =', rngSeed); drawScale = scaleSlider.value(); redrawComposition(); }); // Save PNG button savePngBtn = createButton('Save PNG'); savePngBtn.position(newPatternBtn.x + newPatternBtn.width + 12, 10); savePngBtn.mousePressed(() => savePNG()); // seed random (initial) rngSeed = Math.random(); console.log('rngSeed = ', rngSeed); // first render drawScale = scaleSlider.value(); redrawComposition(); noLoop(); } function redrawComposition() { // clear & draw with current drawScale background(0); stroke(255, constrain(Math.abs(opacity), 0, 1) * 255); strokeWeight(1.0); allShapes = []; // center like turtle push(); translate(width / 2, height / 2); // number of layers to actually draw (controlled by slider) const layersToDraw = Math.min(steps, max(1, Math.floor(layersSlider.value()))); // replicate original behavior: seed before each walk for (let i = 0; i < layersToDraw; i++) { seed(rngSeed); // reset perlin for deterministic relative shapes const noiseScale = 1 + noiseScaleInc * i; const vertices = []; beginShape(); for (let j = 0; j < pointCount; j++) { const angle = (j / pointCount) * TWO_PI; const x = Math.cos(angle) * noiseScale; const y = Math.sin(angle) * noiseScale; const vx = perlin3(x, y, 1) * drawScale; const vy = perlin3(x, y, -1) * drawScale; vertex(vx, vy); vertices.push({ x: vx, y: vy }); } endShape(CLOSE); allShapes.push(vertices); } pop(); } function keyPressed() { if (key === 's' || key === 'S') { exportSVG(); } } function windowResized() { resizeCanvas(windowWidth, windowHeight); // do not auto-redraw; user controls regeneration } // ---------- SVG export function ---------- function exportSVG(filename = null) { if (!allShapes || allShapes.length === 0) { console.warn('No shapes to export.'); return; } // Compute bounds (note: shapes are centered around 0,0) let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity; for (const poly of allShapes) { for (const p of poly) { if (p.x < minX) minX = p.x; if (p.y < minY) minY = p.y; if (p.x > maxX) maxX = p.x; if (p.y > maxY) maxY = p.y; } } // transform bounds to positive box with padding const pad = 20; minX -= pad; minY -= pad; maxX += pad; maxY += pad; const w = Math.ceil(maxX - minX); const h = Math.ceil(maxY - minY); // Build SVG content (centered coordinate system -> use viewBox) const alpha = constrain(Math.abs(opacity), 0, 1); let svg = ''; svg += `\n`; svg += ``; const blob = new Blob([svg], { type: 'image/svg+xml;charset=utf-8' }); const dlName = filename || `perlin_export_${(new Date()).toISOString().replace(/[:.]/g,'-')}_seed-${rngSeed.toString().slice(2,10)}.svg`; const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = dlName; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); console.log('SVG exported:', dlName); } // ---------- Save PNG function ---------- function savePNG(filename = null) { const name = filename || `perlin_png_${(new Date()).toISOString().replace(/[:.]/g,'-')}_seed-${rngSeed.toString().slice(2,10)}`; // Use p5's saveCanvas — uses the canvas and saves as PNG saveCanvas(name, 'png'); console.log('PNG saved:', name + '.png'); }

Deth Reaper

Echoes in the Void

Echoes in the Void