svg test - OpenProcessing

mySketch.js
style.css
index.html
xxxxxxxxxx
 
// Playing with generating svgs for plotting.
// twitter.com/ElsifThen
// 2023.07.15.
​
let w=600
let h=900
let ystep=45
let xstep=4
let margin = 20;
let bounds = [margin, margin, w-margin, h-margin];
​
function setup() {
  noLoop();
  createCanvas(w, h, SVG);
  let g = createGraphics(w, h, SVG);
  noFill();
  background(255)
  stroke(0);
  for (let y = 0; y<h; y+=ystep) {
    beginShape()
    for (let x = 0; x<w; x+=4) {
      let n = noise(x*0.005, y*0.005);
      let yy = y+100*n;
      vertex(x, yy);
    }
    endShape()
  }
  
  g.stroke('#4166f5');
  let verticals = [];
  for (let y = -ystep*1.5; y<h; y+=ystep) {
    let nprev = -1;
    let count = 0;
    let verts = [];
    g.beginShape()
    for (let x = 0; x<w; x+=xstep) {
      let n = noise(x*0.005, y*0.005);
      let yy = y+100*n;
      let v = [x, yy];
      if (nprev > n) {
        count = 0;
        verts.push(v);
        g.endShape()
        x+= 4;
        g.beginShape()
      } else {
        count++;
        if (count > 1 && inBounds(v, bounds)) {
          g.vertex(x, yy);
        }
      }
      nprev = n;
    }
    g.endShape()
    verticals.push(verts);
  }
  
  for (let i =0; i< verticals[0].length; i++) {
    stroke(0)
    beginShape()
    for (let j = 0; j < verticals.length; j++) {
      let p = verticals[j][i];
      if (!p) {
        endShape();
        beginShape();
      } else {
        curveVertex(p[0], p[1]);
      }
    }
    endShape()
  }
  
  image(g, 0, 0, w, h);
​
  fill(255)
  noStroke()
  rect(0, 0, w, margin)
  rect(0, h-margin, w, margin)
  rect(0, 0, margin, h )
  rect(w-margin, 0, margin, h)
}
​
function inBounds(v, b) {
  return v[0] > b[0] && v[0] < b[2] && v[1]>b[1] && v[1]<b[3]
}
​
function clipToBounds(v, b) {
  let x=v[0], y=v[1];
  return [constrain(x, b[0], b[2]), constrain(y, b[1], b[3])];
}
​
function renderPreview() {
  // svg preview doesn't work so we just render a static image.
  svg = document.getElementById('defaultCanvas0');
  svg.id = ''
  svg.style.display = 'none';
  img = document.createElement('img');
  img.src = 'https://i.imgur.com/LOYOMtk.png'
  document.body.appendChild(img);
}
​
function keyTyped() {
  if (key === 'p') {
    save('sketch.png');
  } else if (key === 's') {
    save('sketch.svg');
  } else if (key === 'r') {
    renderPreview();
  }
}