2d image to "3D" svg - OpenProcessing

mySketch
CLine
Cube
matrices
xxxxxxxxxx
 
// 2D image to "3D" svg
// see: https://image-vectorizer.vercel.app/
​
let S, img, angle;
let clines, cubes;
// const pens = [{name: "white", clr: null, vec: null}, {name: "black", clr: null, vec: null}, {name: "cyan", clr: null, vec: null}, {name: "magenta", clr: null, vec: null}, {name: "orange", clr: null, vec: null},{name: "darkred", clr: null, vec: null}, {name: "green", clr: null, vec: null}, {name: "lightblue", clr: null, vec: null}];
const pens = [{name: "white", clr: null, vec: null}, {name: "black", clr: null, vec: null}, {name: "cyan", clr: null, vec: null}, {name: "magenta", clr: null, vec: null}, {name: "orange", clr: null, vec: null},{name: "darkred", clr: null, vec: null}, ];
​
let svgGrps;
​
function preload() {
  img = loadImage("https://upload.wikimedia.org/wikipedia/commons/6/62/Panthera_tigris_sumatran_subspecies.jpg");
  img = loadImage("https://upload.wikimedia.org/wikipedia/commons/0/0e/Berlinerfernsehturmdetail.jpg");
  img = loadImage("https://upload.wikimedia.org/wikipedia/commons/4/4b/Wachten_op_hoog_water_%28beeld_van_Jan_Ketelaar%29_14-08-2023._%28d.j.b%29_05.jpg")
}
​
function setup() {   
  createCanvas(windowWidth, windowHeight);
  S = min(width, height); // used in projection method to 2D
  if (img.width > img.height) {
    img.resize(S/5, 0);
  } else {
    img.resize(0, S/5);
  }
  
  for (let i = 0; i < pens.length; i++) {
    if (typeof pens[i].name === 'string' || pens[i] instanceof String) color(pens[i].clr = color(pens[i].name));
    pens[i].vec = createVector(red(pens[i].clr), green(pens[i].clr), blue(pens[i].clr));
  }
  // console.log(pens);
  
  svgGrps = [];
  for (let i = 0; i < pens.length; i++) svgGrps[i] = [];
  
  cubes = []; // makeCubes();
  clines = []; makeCLines(img);
  
  angle = random(TWO_PI);
} // setup
​
function draw() {
  background(212);
  translate(width / 2, height / 2);
  stroke("beige");
  // const angle = frameCount / 60;
  
  // CLines
  svgStr = "";
  for (let i = 0; i < clines.length; i++) {
    const cline = clines[i];
    const SCL = 30; // map(mouseX, 0, width, 2, 50)
    cline.setAngle([0, 0, 0]);
    cline.show(SCL);
  }
  
  // Cubes
  for (let i = 0; i < cubes.length; i++) {
    const cube = cubes[i];
    cube.setAngle([i+angle, i+angle/2, i+angle/3]);
    cube.show(S * 0.25);
  }
  angle += 0.02
  
  noLoop();
} // draw
​
function makeCLines(img) {
  // console.log(img);
  clines = [];
  img.loadPixels();
  for (let x = 0; x < img.width; x++) {
    let pts = [];
    let clrs = [];
    let pns = [];
    let idx = x * 4; // starting x idx
    for (let y = 0; y < img.height; y++) {
      let p_r = img.pixels[idx + 0]; // red
      let p_g = img.pixels[idx + 1]; // green
      let p_b = img.pixels[idx + 2]; // blue
      let p_h = map(p_r + p_g + p_b, 0, 768, -6, -5); // brightness = height 
      pts.push([x-img.width/2, y-img.height/2, p_h]);
      clrs.push([p_r, p_g, p_b]);
      pns.push(findShortestPen(pens, p_r, p_g, p_b));     
      
      idx += img.width * 4; // + one line
    }
    const newCLine = new CLine(pts, clrs, pns);
    clines.push(newCLine);
  }
  // console.log(clines)
}
​
function findShortestPen(pens, r, g, b) {
  let clrVec = createVector(r, g, b);
  let currentPen = 0;
  let shortestDist = Infinity;
  for (let i = 0; i < pens.length; i++) {
    // console.log(`${i}, ${pens.length}`)
    const pen = pens[i];
    // console.log(i, pen)
    const dst = p5.Vector.dist(clrVec, pen.vec); // clrVec.dist(pen.vec);
    if (dst < shortestDist) {
      shortestDist = dst;
      currentPen = i;
    }
  }
  return currentPen;
}
​
function makeCubes() {
  const p = 4;
  cubes = [];
  cubes.push(new Cube([-p, -p, -p]));
  cubes.push(new Cube([0, -p, -p]));
  cubes.push(new Cube([p, -p, -p]));
  cubes.push(new Cube([-p, 0, -p]));
  cubes.push(new Cube([0, 0, -p]));
  cubes.push(new Cube([p, 0, -p]));
  cubes.push(new Cube([-p, p, -p]));
  cubes.push(new Cube([0, p, -p]));
  cubes.push(new Cube([p, p, -p]));
}
​
​
function keyPressed() {
  if (key != "s" && key != "S") return;
  
  let svgStr = `<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">\n`;
  
  for (let i = 0; i < svgGrps.length; i++) {
    svgStr += `<g fill="none" stroke="${pens[i].name}" stroke-width="0.5">\n`;
    
    const lines = svgGrps[i];
    for (let ln of lines) {
      svgStr += getSvgLine(ln.x1, ln.y1, ln.x2, ln.y2, 1);
    }
    
    svgStr += `</g>\n`;
  }
  
  svgStr += `</svg>`;
  save(svgStr.split("\n"), "epi_pic.svg.txt");
}
function getSvgLine(x1, y1, x2, y2, prec = 0) {
  return ` <line x1="${nf(x1,0,prec)}" y1="${nf(y1,0,prec)}" x2="${nf(x2,0,prec)}" y2="${nf(y2,0,prec)}" />\n`;
}