Converting P5 to SVG. What could go wrong?

Show and Tell
1

I converted this to SVG from the p5 code without too much of a rewrite.

With only 30 branches the SVG file was over 168MB with the 30th branch translation of rotates + translates being a 282,996 bytes character string.

image

It’s another of my SVG learning exercises that have taught me a lot and been crazy to actually do without a big rewrite to work with SVGs strengths instead of working with SVGs like they have the abilities of P5.js

Here is another conversion, that did get a bit of refactoring as it was even slower than it is. KomaTebe P5 sketch to SVG / Brett Cooper / Observable
image

And again this is crazy to do but as a leaning exercise I have found it a valuable exercise.

The 3rd one I have converted that uses P5’s push(), pop() and HSB colour mode. The push() and pop() reduced the SVG transform size greatly. p5 to svg, red Pythagoras tree / Brett Cooper / Observable

image
image1196×890 160 KB

1 Like
2

SVG file was over 168MB

If you want to reduce the size, SVG files have support for re-using the same (trees of) objects. The use tag: <use> - SVG: Scalable Vector Graphics | MDN

They also have support for applying arbitrary geometric transformations to objects. I would expect you can express the same drawing in a few kilobytes, though it might still be very slow to render in some implementations.

1 Like
3

Thanks, playing with that now. I looks like the stroke colour can’t be changed.

<svg viewBox="0,0,100,100" width="100" height="100" style="background: #000;">
  <g id="outt">
    <line id="L" stroke="#f5e93a" x1="0" y1="0" x2="0" y2="-30" transform="translate(50, 50)"/>
    <use href="#L" stroke="blue" id="L3" transform="translate(5,5)"></use>
  </g>
</svg>

MDN <Use> says,
Only the attributes x , y , width , height and href on the use element will override those set on the referenced element. So stroke colour doesn’t change.

Transform isn’t changed or appended to when updated via the href.

The X1 Y1 X2 Y2 are like the stroke colour and not changed when <use> is used. Even making changes in the debugger doesn’t affect these attributes.

Note the html SVG test image at bottom.

I have not looked at the arbitrary geometric transformations (matrix) as I don’t know matrix math.

4

What you need to do instead is something like:

<svg viewBox="0,0,500,640" width="500" height="640" style="background: rgb(0, 0, 0);">
  <defs>
    <line id="L" x1="0" y1="0" x2="0" y2="-30" /> </defs>
  <g id="outt" stroke-width=4>
    <g stroke="#f5e93a" transform="translate(245, 600)">
      <use href="#L"></use> </g>
    <g stroke=green transform="translate(245, 600)">
      <use href="#L" x=10></use> </g>
    <g stroke="blue" transform="translate(265, 590)">
      <use href="#L"></use> </g> </g>
</svg>
1 Like
5

I could see that working if the groups g are nested as that would allow the following translates and rotates to accumulate instead of being every growing strings.

And so I have tried that: p5 to svg nested groups test / Brett Cooper / Observable

image
image516×534 136 KB

Which does 70 levels before the doomed gray cells. I guess having 7756 nested groups is a bit much. The saved SVG also has issues loading into the browser with it throwing a XML Parsing Error: But the file size is down to 2.5MB so that’s better.

I tried loading the 2.5MB SVG into SGVHO and got,

image
image904×149 8.8 KB

After running the 168MB through SVGOMG - SVGO's Missing GUI I see it converted everything to paths.
So I have been thinking how I could do that. I figure it could be done with customs translate and rotate functions that return polar coordinates, but that would be another level of development I don’t think I would want to do as a rewrite would be easier. But that would diverge from the core I wanted was to write in a style that followed the original P5 code using SVG.

Thanks for the help @jrus

6

I have never gone beyond about 5 levels deep of recursive use tags. So congratulations!

1 Like