Interact using canvas and save using SVG

[carmolim]

Hello! Excelente work @zenozeng!

I think the title is very straight to the point, but I was wondering if would be possible to interact with my sketch using canvas to take advantage of the performance, and when I find a good enough result "convert" it to SVG in order to use it outside p5.js.

The result, in my case, is just an array of objects, so I think that would be possible, but I don't know-how.

Here is my sketch:

const size = 50;
const columns = size;
const lines = size;
let side;

let segments = []

function setup() {
  createCanvas(720, 1200, SVG);
  noStroke();
  
    for (let y = 1; y < lines; y++) {
        for (let x = 1; x < columns; x++) {
            segments.push(new Segment((x * width) / columns, (y * height) / columns, 8))
        }
    }

}

function draw() {
    clear()
    background(0,72,217);

    for(let i = 0; i <segments.length; i++){

        if(dist( segments[i].x, segments[i].y,mouseX,mouseY) < 200){
            segments[i].update(mouseX, mouseY);
        }

        segments[i].display(mouseX, mouseY);
    }
}

function Segment(tx, ty, ts) {
  
  this.x = tx;
  this.y = ty;
  this.size = ts;
  this.angle = 0;

  this.update = function(mx, my) {
    this.angle = atan2(my - this.y, mx - this.x);
  };

  this.display = function() {

    push();
        translate(this.x, this.y);
        rotate(this.angle - radians(45));
        stroke(255)
        line(0,0,this.size, this.size)
    pop();

  };
}

Thanks!