SVG Canvas performance

p5.js Coding Questions
1

Hi, I need to save an SVG from my p5 sketch, it works great but as soon as I change my canvas to SVG the performance of my sketch really drops.

I have a few sliders to change settings in the sketch and when I use and SVG canvas it’s hard to even move them.

I’m thinking maybe there is a way I could use a regular canvas and then when I click the button, I create an SVG canvas and copy the data over…

Any ideas?

Phil

let img;
let saveSVG_button;
let sizeSlider;
let spaceSlider;
var dotSize;
var space;



function preload() {
  img = loadImage("will.jpg");
}


function setup() {
createCanvas(1024, 1024,SVG);

  noStroke();

  colorMode(RGB);
  ellipseMode(CORNER);
  
  if (img.width > img.height)  img.resize(1024,0);
   else img.resize(0,1024);
  
  
  sizeSlider = createSlider(6, 20, 6);
  sizeSlider.position(10, 10);
  sizeSlider.style('width', '400');
   
  spaceSlider = createSlider(0, 20, 6);
  spaceSlider.position(10, 30);
  spaceSlider.style('width', '400');
  saveSVG_button = createButton('save SVG');
  saveSVG_button.position(200, 10);
  saveSVG_button.mousePressed(saveSVGfunc);
}

function draw() {
  background(255);
  dotSize = sizeSlider.value();
  space = spaceSlider.value();

  for (var x = 1; x < img.width; x = x + (dotSize+space)) {
    for (var y = 1; y < img.height; y = y + (dotSize+space)) {
      c = img.get(x, y);
      fill(c);
      circle(x, y, dotSize);
    } // end for y
  } // end for x
}



function saveSVGfunc() {
  save('MBTB_Dots.svg');

}
2

I think SVG is going to be inherently slower for dynamic sketches because you have more data structures and processing steps before anything actually gets rendered. Given that your sketch only varies when the slider values change it seems like you could use a normal 2D renderer for the live display, and then create a hidden SVG canvas only when the “save SVG” button is clicked, render a single frame to that canvas using the current slider values, and save the result.

1 Like