【p5.js】SVGRepoの罠を回避！動くSVGパスの見分け方と『最強の描画関数』

// 直線（MとL）しか描けない、初期のシンプル版
const drawSVGPath = (pathData) => {
  const commands = pathData.match(/[a-df-zA-DF-Z][\d.,\s-]*/g);
  beginShape();
  for (let command of commands) {
    const [cmd, ...params] = command.split(/[ ,]/).filter(Boolean);
    const args = params.map(Number);
    if (cmd === "M" || cmd === "L") { vertex(...args); }
    else if (cmd === "Z" || cmd === "z") { endShape(CLOSE); }
  }
};

// カーブも省略形もすべて解読できる！最強の完成版
const drawSVGPath = (pathData) => {
  const commands = pathData.match(/[a-zA-Z][^a-zA-Z]*/g);
  if (!commands) return;
  
  let cx = 0, cy = 0; 
  let isFirstM = true; 

  for (let command of commands) {
    const cmd = command[0];
    const args = (command.slice(1).match(/-?\d*\.?\d+/g) || []).map(Number);

    switch (cmd) {
      case "M": 
        if (!isFirstM) endShape(); 
        beginShape(); 
        cx = args[0]; cy = args[1]; vertex(cx, cy); 
        isFirstM = false;
        break;
      case "m": 
        if (!isFirstM) endShape();
        beginShape();
        cx += args[0]; cy += args[1]; vertex(cx, cy); 
        isFirstM = false;
        break;
      case "L": cx = args[0]; cy = args[1]; vertex(cx, cy); break;
      case "l": cx += args[0]; cy += args[1]; vertex(cx, cy); break;
      case "H": cx = args[0]; vertex(cx, cy); break;
      case "h": cx += args[0]; vertex(cx, cy); break;
      case "V": cy = args[0]; vertex(cx, cy); break;
      case "v": cy += args[0]; vertex(cx, cy); break;
      case "C":
        bezierVertex(args[0], args[1], args[2], args[3], args[4], args[5]);
        cx = args[4]; cy = args[5]; break;
      case "c":
        bezierVertex(cx + args[0], cy + args[1], cx + args[2], cy + args[3], cx + args[4], cy + args[5]);
        cx += args[4]; cy += args[5]; break;
      case "Z": case "z": endShape(CLOSE); isFirstM = true; break;
    }
  }
  endShape(); 
};