The svg2p5 from ygev

Welcome to My GitHub

have fun & try not to break anything

svg2p5's People

Contributors

Stargazers

Watchers

svg2p5's Issues

An error occurred when the script translating coordinates.

Actually Transformations such as translate(), rotate(), and scale() do not work within beginShape(). It is also not possible to use other shapes, such as ellipse() or rect() within beginShape(). (See reference)

For example, the script dosen't work well with the svg markup below:

<svg fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15a4.5 4.5 0 ,0,0,4.5 4.5H18a3.75 3.75 0 0,0,1.332-7.257 3 3 0 ,0,0,-3.758-3.848 5.25 5.25 0 0,0,-10.233 2.33A4.502 4.502 0 0,0,2.25 15z"></path>
</svg>

...as it outputs the following p5.js code using translate() within beginShape():

strokeCap(ROUND);
strokeJoin(ROUND);
beginShape();
vertex(2.25,15);
translate(6.75,15);
rotate(0);
arc(0,0,4.5,3.141592653589793,1.5707963267948966,1);
rotate(0);
translate(-6.75,-15);
vertex(18,19.5);
translate(18.004055868688575,15.750002193343418);
rotate(0);
arc(0,0,3.75,1.5718778919893823,-1.2088250759817043,1);
rotate(0);
translate(-18.004055868688575,-15.750002193343418);
translate(16.501840726401678,11.2479128248915);
rotate(0);
arc(0,0,3,0.3381004956888263,-1.8852323996796212,1);
rotate(0);
translate(-16.501840726401678,-11.2479128248915);
translate(10.49377898204332,9.719331683797977);
rotate(0);
arc(0,0,5.25,-0.25500852097167903,-3.3343397810501907,1);
rotate(0);
translate(-10.49377898204332,-9.719331683797977);
translate(6.751999996770499,15.000170523980728);
rotate(0);
arc(0,0,4.502,-1.889584750326278,-3.1415547762062372,1);
rotate(0);
translate(-6.751999996770499,-15.000170523980728);
endShape();

Recommend Projects