SVG Repetitions

MikeB

Is it possible to draw SVGs seamlessly one after the other as often as needed?
and then see the whole thing as one path?

d.healey

@MikeB If you mean a tiled pattern then yes.

MikeB

@d-healey how David?

d.healey

This is the function I'm using

    inline function tile(pattern, area, tileWidth, tileHeight, fill)
    {
        local a = [];
        
        for (i = 0; i < area[2] / tileWidth; i++)
        {
            Engine.extendTimeOut(1000);
            
            for (j = 0; j < area[3] / tileHeight; j++)
            {
                Engine.extendTimeOut(1000);

                a = [i * tileWidth, j * tileHeight, tileWidth, tileHeight];
                
                if (fill)
                    g.fillPath(pattern, a);
                else
                    g.drawPath(pattern, a, 2);
            }
        }
    }

MikeB

sorry david
I'm completely missing the connection!?!
how do I use this ?

d.healey

@MikeB Use it like any other function. Call it from inside your panel's paint routine and pass it the parameters. Pattern is a path, area is an array [x, y, w, h], tileWidth and tileHeight are self explanatory, fill is if you want the path to be filled rather than outlined.

MikeB

Please give me an example David - I have been working on this problem since 5 o'clock this morning and can't get any further.

d.healey

@MikeB What more do you need? You call the function from inside your paint routine, that's all there is to it.

MikeB

@d-healey I have been trying to do this all the time

HiseSnippet 2172.3oc0Y0sbaabEFPRvQDIJiciunWt18FpXJIrfjPjiaGwX8iqZrk3XJa2Ndz3ABXI4ZCBPCrT+DOdl7Bz2k9HzmCeQlbUto2j2fzyt3WBtTVUQ9hBNhB3762dNm8fcW1MLvgDEEDpnV4nKFSTT+JsdW3yFt8Papux96nn9Gz18wGhdo8oj9AgiNhDwTdzEisihHtJppK9XtbpUVRQb8qa8HaOaeGRNIEkWDPcHOgNhxxo1sy2S871y1kbDcTAoazYem.+sC7Bl.XZQMCkw1Nu0d.4.atXKnondqccorfvdLaFIRQcoGE3dQugAm4GK+KnQzS7H7GvJ8.CESdu.OWNh4TU1dH0ysa5XORArR27HwhwQh6p8TpKMiddD41BFnbMJFOTW3xfG9SCOCYvSs.7VJFd2QqmSHcLKmCGaeo199LRXeaHETDVwxprve7NZaG.R3yVej8aI6EBOjoQUKCiZnlFFq9vUz4e1Xidu3wnt8scQ81+fcQqgn9n+1y2dWzaC7OkDxnveqcUtVQGRqQLzo1gnHpOA8WPo3vIj.gpt1rgU49sfbmN30t1LaP1WgwF0vFsqY.eLMqYEeWcqZVV0Z2BtEaUyDmRGiEL.ALqYZjQ0xLlpoYiZ3VkHKrRaKtgJKOXEbyLplfl0Er4OThrvJb4MlQdtWaMisAOZICIboqyYnOk3bmZNioAGZHCHVMpY1DhJsJg71PXoQqL5YFWPudI5wgWNq5ypB2C7rPIOHHW1w4Fxr0LZvGull4VB9uUy3AuoYyTxER37TqYNVSy3bOahkOzvsl6PCWW5PCikNzLrjMzDbjGswskGswsmazVG2RZ3F2RZ3F2BOGLg2zRNl1rtbLYM2vD1RZXBaIMLgaZMuJ.by5Rq.vwUq5EJAD21zX5J.rQ57rxbxF0EpuSqM3ytaXMyHP3X4k8BVRJ64VRRYuf7bK6wfwjlHvsK5.87LgQ64kIZ2VZtqsbOzpw7vzlxUvRt4aNW7zPtBMja95yEO5lsmQCHMTtuPx7bIodtV3YS8hvYC4wLoiIvLlMg9NaVRAN8F4zyFUb5lkomaJC4pfaOkKzy7Adyx9NezMGXgk.K9s0kAJiZspKQZq5yXZH5WWFT3SNxDofz3V42la3MsJQL0FMRxm5kPc9b+BsAxEHsM.tlwwvhF3KoXcu.aWXAMi1AVyP0zEOvWRwFar1uyqjUC889Amr1dgj2Mg36bw0zVEWhC2f3BqEZ.gscvnwA9vCUuuf684i.puGeQS8m36vnA9n.eAOtZgAdUcR0oFXUuIjUWQ+8HDZE8JbmzOEvfixjj6pWvks5pe6lFFfOpz01m3gWOjLFVoKSrXrO.+coXa8HNUAJ111y6DXw5UmFb2DIfBQ+C62Gb4MTn27RC8lWRn27pE5CDncNw80vWy3t4kE2Mugi6bq7xgjPBhEfFOggnrsRulM5vndjpisYvNJ7qgrgk1WSP6kTW1v3a+qD5fgP3pOrAvU0gXE58hu4WdAN1dHwJ9O9gYTytA1AJpJE3Z7PDE8mE1+UlGi1H2G.iG7fUyzH2z7qc8GvaTPNGBrt7Mdd3DVUHK.a3YJ4l5AgSeSrSeSpSqm5z3QCvonWm0yeJuOivhX.E8sEiduI4wzHnz.6wObFaMCAZeT07ve4qAqy4I1PVdlb0YMKwKhLGC3FZeVICTCYVxFePe569vMUihiFRP1mDbJAw29JMhW4dBAASv36zzEUGBWiHQ7Myx.QOeM6yoQ26d2KsbWLgDMhx35+6oGS7L641jIl88i2scRW.XdcWdafmELgAUKUSmYUc.uyxJ54Inuyyqpw46smqM+C2HUFD2Vfe3IBV86uYq3cyWoPRk+xxZnWE2apFB1xe1aHpgZ073D4S5Gw6Fcy0KoPazCBXjC8qtp960qnCU.kY0uuTdIs27HgRYymWEdYJV0exnSHgosqSETQcooO3Fsq1A23DmYKHXf+99T1giI9y6zlTRJGT.ARPEbGSbrNecxw5zyi5RBUntJpegl38oJB.mbTYcpW+a5nbkU1bJkUT9wClU4amnLTfdRviBNWn9Wpk9HtjIT90sTd9970ZwOepjQDLJGKNVHH.ptC4TpCI9zppnsCI5srfwPbNaFfh5xexA84YNryYctH262tSDiLtG8G.00zLVGqLJ9fH6Kt9ksFYmqpxNcXPaW9vIa0a7rPFNziwwJomoFetn.FKqEOur.N928Jhi624LdG3LBceWmgh9v4394cnLxnzyzrxs93G+3uwYjS0rH4SBBgfP7HK+PTio9LaW5jnhzKNJ9hOYUP4nolZS39hQR75FJSE59GIgtk0hW50Td7VWwRmb68uJlE6brHz.Cn+jVOnqj9QgTa+AdD8d1mo26cSf20p+Lae2fQ55wvRSUSDlm47Pus1SCbm3Yyl9nZ4mOcBCnMvTmIJ+bO8inrKJVS+4+7a+5X7po8j8NLAjvcnLziKBxEjBx7h3LhK2geX56mdV7+3+4c+yNYGZe7TvL0eBY.3nhTNh.ozdW36Trzp2nf.1Pp+foOh9614IAAi202FBCtEMR2g1QjjhjXx+7Ob2eZqsmDwBFkhEwY32CJ3DcNTeklUi0gq9Of+c6sgupe3MyyJkSkKd0RkRReKbEK29FQlLKkwyo2nUbFW4ePCk+mPbV8z+Gf36n0kxbFJeNsroKJJe1waxuXzJZ61uOwgkC1kz16u+4+mGRIdwhCdpMKjx6QdvjQ8fWq3P.j3Cu9hubF0E3urH9YC9yho3vNQDO7avUBSL+Y0Dl3TlP2WmvfW6DunA9jhkET.L4K9o4pn8T9ynr0IveqL7tDpK80NN7PwZPXTtNlWCcpeMzow0PmlWCcrtF5r40PmVWpN7ekxuaBz6MdZBPn6twccUy5dqtnx+0AGhST

d.healey

You put the function in on init (like all functions that you write) then you call it from inside your panel's paint routine.

MikeB

I don't understand what you are saying-David
I will try something else - thanks for your effort

d.healey

@MikeB Have you ever written your own function?

MikeB

@d-healey

not in this complexity - in javascript every now and then - but that's not quite the same here as I noticed.
do you have a video on this topic?
as I have mentioned many times before, I am a visual learner - I need to see the things to understand them.
should the whole thing be a snippet in this category to help others with the problem of displaying the LFO waveforms in the GUI.
the idea came from your suggestion @d-healey said in Drawing Sine Waves:

@Natan Yes, but why not just use an svg path?

I have now created all 5 waveforms in Adobe Illustrator and would like to use them as SVG for the representation of the LFO in the GUI.

To use the full frequency range, the waves are 9000 px long - which as SVG code is almost half a page. That's why I had the idea to take only a section and then repeat it several times.

I learned this from a Mr Healey here - to keep the code effective :-)

I have actually already solved the whole thing but unfortunately not very efficiently - Therefore here again the question for a more elegant solution.

d.healey

@MikeB said in SVG Repetitions:

not in this complexity - in javascript every now and then - but that's not quite the same here as I noticed.

You should be writing lots of functions, so go practice :)

do you have a video on this topic?

I use functions in a lot of my videos. Scripting 101 is where you sohuld start.

as I have mentioned many times before, I am a visual learner - I need to see the things to understand them.

You can create visuals yourself ;) Go and play and see what works and what doesn't. I do this all the time, when I need to learn a new aspect of scripting I make a little sandbox project and experiment.

I have now created all 5 waveforms in Adobe Illustrator and would like to use them as SVG for the representation of the LFO in the GUI.

Ah this is different to what I thought you were asking for. The function I posted is for creating a tiled background, repeating an image over a square. I think you only need to repeat it horizontally, correct?

To use the full frequency range, the waves are 9000 px long

Can you show me the image?

MikeB

@d-healey see snippet

It would be nice if it would be possible to achieve the same behaviour as with the long version of the SVG (move Knob1 and 2).
with the short version by repetition.

HiseSnippet 4447.3oc0b0rjbbajtZR1xbJuzgrW8.Tg1KC2sIYATn9KXnfiEIGFbME4Dpo3tanPgbwtqdlJXOcMp6ZnDsBEgeA12k8QXeNzAG6IeYu32.uYBT+.THQKZZpC6PQwoyDIvWl4GRfFci5js0KJ2sqdq2jCd9atnzax+vz4uYSyY2+rhpMdO9AdS9MSe3idVv+VwqKWUu87mWtqw6SeyEE61Utzaxjq9HrcSN3Zdxe9K26SKVWrYQ4fHOuWTWsn7IUmW0LH8ji9cUqWebwxxmWctVqEG83E0ate855KALc0ogdWTr3UEmV9zBrYWYp2jO3gKqZp2Nuonobm2jq8o0Key7yp+1Mp1+hpcUubcI9Bl2bniThOtd8RDwnTu6eV05kmz4667fd4jgHwUUQhOZ5mUsrpW9PD4CkJBFrPOdL4J6CdreZ3ERAuIZv6ZJ38qmNew1pKZFzfX6WN8waZJ2tp.RA5vR0Vuq7m9jo2uFZwllaedwqJOdK7hdKNLILbVPbX3Mu6M7w+bm6L+EOJ3jUEKCl+3m9vfaETsI3e8Kt+CCdU8lWWtsoB96sT+7jm8zGE7hG94ye7ydJzva8V+yM7gL9tlfWWrMXW0lxfOInChK1VBQwSJZN6PDRZs60m90KKZJf19kLV3LVX9rvYbgXVdxrzvY3ehRlkjLKOC9UVltBFSpA9Etg3DtRrfPppaDgyxisZehgTd1rjH7WhAqDiDK6FdLeVdjsAoFh65cFgTEZByl4mysL.5OMo88N5qLR3vA7GZafvPbeuCg0rbJ7jRnP4rYYV8dNgTkWQ1bN3qYoCcNHNdlOBRc4ZY7Li12kv4l8RGDCEyxHS3BBEp.VlcBOgPpxk.lPlvp8oFR6S2.KHiNeqqvev.zUsy2bBoscC3TLq1KLj124.IHKjBMHOH0Nci9pl3dz.rfT57cJgFLkYHVkvCmo5Fei7MNO.zjn0dMhfbjsYBrbCw8vmQHV0OvnjlPL6zPbu+BA4TRxPBgBrxEDjsICYDR8aCavfZWrH2PZevDcVRxPDghVe0lLHHj1VWTBRq5hFR6ACLOIImBLYDJPvzK0WiIvwLIUBGYfCJ5S34FR6SeDRU8BPDRr4GQFRGpslgpIqsJP3ZWa0PbegEQWPaLbfPiehM+vn48kVSv+kZpFPCR3jS0RHVFAHAIjoaAghVW0NcmPHUEZ.mM1NcyxLDOTomqKWelOlhGzfgvVbFmXL.gCKHEqkyEC0csD2U2kp8PY23dpfzOkEcGIqujabxn1JzkMzsXTIVWrudE2XgsEw5h6.B5jQ1HI2Rrx+hr6VH1FyohG3xkwLaC35h6vAl0BIhHBK4RR9fLr.muZlttXszKVAPXmew3gl3N3kRHseAHgc9MWWZWjBx4Bh7K2RrJJIryuBBo8QDgUhWtqhAwc3.cQAANfDlvJ8lpKTKcYKseakBtU645R6YNf2vrwgvRrZ5tvH6JSt3zcwnrqbispMsKnR7xgMzJwmXHsG2frHxDeFgBYsk7QPGJnFkQvgAJRz3zNVLMJ0FEfKEQl2EDJ7UUSiFm2Srjo.BvQhD1SlhHJV.w8H5zNghVebbZOxRV+NjhFm1wMnOHrOsmoKUeNMj40ZdeMaLZDRTrjPb+hKb6jKFo3iSuVhTUJSPvLxYzkMzoPJmmRWoLaFmnFOWWbekRXFOmH6B+KOlXxD2N6lQHse2hb6rattzNeDx3bhrqzKGyDh0k0mb4PNmSkcw5m7wYWn7DChF9ZJRRZU.kJsDC8DZBTLhGZaQhtXzOExVCKfyxMEq5GNrzIKy1fTcwCcOiPbKfvSgH01hHcwC8O3wrdJfuAh3HdssPnKdn+4PoIlfDRoDZ5b4HqAH2VZWnlp4blbMjtdOSsgVDi5xEhA3jaX.WzBG+HC4CvLDBQzIeAgltHmcxOwVZqiArhbqlmpITKwCDBGIdaEnT7nSr56HSg9CPA3CIVMWnITmCBaXiDJHWfHgi9ovNABz.57cpkBI+VS5P5VuSTIab0a0doinXA3vJy19lz.Vdq7QXmYKtsiPBHgAQZhGbVtbOf1NahkbbQENVgF1FdRtduiZXxxwhQZxyTJCw8fEQYFVpEpV1pweXnXQXLg0ooGax2hHhhPSU8f.1MKw3DpJ+RBOXeFbXepDVgX.IaiGHD.hXRrovfv1Fgg7VlhzB4xSQfymaxJjijRWmUJZQejSvIPcDkh1tSl.EgDVkXnPC1vrmbZOUtLYpsIQFx0FC4nGEaCM+9HWjfvNC4ZoaI.3zfCScQLaiTXHzEElmuGJLOyEElSDFjPfmPBOIJ3xHgulU4.iHLtSiNOAzvg26f7vDFSSPq3F553InFC4svFjmmBJhHbVPGrgWbMCaiXP3gyGGUAEIwx2Rqkqp..K21Bb7gsL3aOH3nyRoQFFY3rXBnkXnPKdBhEz.KGGHtsIQFx0FC0nGRCMVBLTg4TQMc4CCiuD.gojfKhPkZTxk6.vldHLTXxNx.bGFSvNRLUngYo2HncUL2EFQYkziHBoRhSHaTc91tSBhPJekA+aNM4kkm4j7xxScPdwIqTjW4+PRdw0eoHunqRxckmlnKtKt8GeRxKpgf7xxxIAFhfrLaK3HBxRI3GLlglgMkzU+vR4PLPqC0prDgXHgZdhDDj04aovRbYmV0kq4SgHD3zIHIHXtBDgjTaXbRycLKFlMvRynbJDEoTSIQHjlPBuT.Dojk4kffJHnPfiJyBl7bqHrRBBh3fDANpLiXHgnxjvPtNGJKVczyDzjDCUZ7DLv4yRnlRhtShqR8XBLgp1TpgBsYkp2AOgmJycID0kDFxGSgSbVpGFp3bZFb7n.peO.hScSgiSbPgiicQgiE6gBGG4hBGycPgo1rcOJnJNwLTXrSE.dve8Iq0zoE8AnKfh7i1JyX0ZboAUYxi3Z77F0V7MUpM0QsKeBaQ+uai9xsQjpO+oaq9CZ5pBq15rsUHXfM0FQObRnvchTYDWsWbaaS60MdLgV2sScKfJy7c6I2zLQuF6AShD0F1IQpjGp1Ztod+N.QFcTng6.qBRkxgCJ+xTapG2TKCOWiAVWbuR4mb2XZUdj78.OnViVkNnylafR44tiAHuiqy676rNRHobLtcfGUg8KIyp2NNkcYQxkqsAKniy.+h4XRPqsrDZaQ7vhIQJBFF2ETykGxmTouogR3DlQOdHVBSbBUksQNvJhnPtqvZXnCrhcZ2FGGAUHIo113XpEpDlIq14nA0RVQKBOoGvReJhmBOFl1Q6hjenE4wNRjHbhbFbfcEm6fBfcZHYfIIZVVpi.CXUVrq3Rlir.fB0Vu7oyf3o+6H4ifIkbZA9I43bVAZEYVGfRJycnLIaegxjDmgxjXWgxtsM3agRrGYjlguJzAGCqcEmOyEKBH7wYzzHDMwoNSQw6YNFDZhibmgh4NxPpk88cjhDoNRQhD2oHwdY6B2rcgS1dzdX6QNY6QtY6Q8nvmLVx2Cam6hs6bM.YOFQBSAdBMNHRcpbTLhybVLhG5N8LrnhOU9g4dJDy4THmKofVE5rZjyzy9I56gm6hlagA7KYF9gxvTmMcloQb4wUHOm4rwiTmtHacp9TpNh1Tb7hRHFOoBKfn0g7LBqPSjmLYlE+A5R0wOlYwe7wOB+b0oFlMl.ofBm41yYY60yYQN8bFygmGlP64RctROxCNxAHkGpCAH86zm4L+HOIDJTJOcBGnTdrAznLMxMJS1anTt3jCPl3HT19kCjlD4Ke2jjrHlZV.EKR9VCyH1vjjEQocHrzNCZLEC2Nn7soQ3cRz3d1kTsiYWxtkb5EpwmQNAC.k7ShkKFqrSCdp2iGsNcg4j.sUctaKycMbYB2fL0kQItGnXoJeWPT31RgqQKZOPjmSXD9YbRUkB+xbjIWkylAIMiOiQvf5B9B2QWMM9C9LPGwIHxO4yzQV1oSH0o6.cZ3VZz5xPWlIORMGCl7HESsoOcp2CNY13Dd2InBrrdmB+dbpTlEQaTRDANjZ3QjHDObb02XF4Gw732ssRo7rdSFMWT84kklLVS6W4L0wJ09MftSWX+AJI+7oL3PgcQDbeH5bHeFrzQ3rvu5t2vGu1M2dccwxi2Ve9CJZJNr6B1fW6l6bma824O9cWmnlyp1E.+WyYkA6NqdaSvKJ2tqpdyeuivs.mnonoZQf5RBc4lcUmtobYvhyJ1FbQQyYna8keUvmD78AC2XnDUrRNkz7aQNOSc.CY12a.FSzKu+KRNJOLej79umf44jVjOzQ5eW8yFKtueRoMHgt6iIviuRkf1BAc+G4DP7bKCBaKlYbwMjelythyNByzQY5Xb2WXiT6qmQeIK+Qek86qXM9BxjMTuZjIsUqrFi1JUTvh4.V8UnLBc8kmLwTXeoIiVmDY00gy3Q1PQ9oxzVLZTy6qBYzycEfFCC4l9isQ8fzDpFz880WVwI3GtquOdo9jyKuqO9+kUePYcUfBNraR6rfcU+gx5UCRt4MuaaEE8+bm6761T+xac71xu4xxMKdy6bgjgqYH1gLs6i3okM2u97Kp2.u3vOVp8iwJjUaViWbwUWtYQCTLKndiTGZ1150GtnylYPut9xxadC+uOHH3F9GfCxpN.CCTeKwg5EXaO7l+yoggvXbvIEaJWyt81xKJpfgGG2e.96dw1s2gRkn39EqW+xhEu5PSv89n.uVz+YqVAC46oPOeugd9dB872tPesDsNh62h8NF246KtyeOG2639RTFbdUSv7W7n1aja8lS+ae8U8jfx0clETp+X0sEtMLAN9IXb5yqurARLG1kXN7TLzeCeH3Gbm6b5sWUsd8uc85CC+tiOdYA9GraN3TUjCu92RUqVklotOxGnrQdYfw8qLK3KUouYAgyFlDMKHK9qZaeaJCSXueC2ZrsmV2T9rMGdS+u2+.+evOXrpUqH00xBVWtkTMdo32tOCObykm+xxscr5tF5M4ZlW+7oucW+7Ep7qVCq273MUMO6hxMtty7dsjBOnAsnB9sF4kS+W0d4zmutZY4VupkdS9ESkkc7j.t8B++6Ws5OeOu2Zi4FF648GO5HKi+vViAZ5Kq+z5uSZ9ubZ2KYi5Bu+x879hGiKpf2x9VOB7xKjWtcH.N4AkutZQo5N2evzGTt6UM0W.w494AdSt9OoS+c8C3Qe6QuYXz+vi10TdwbX8MHUMM71LuyUONEVI+4OeuyKFL06AG0T9cMn6zuHGlE5wguBG2n6IC.NiTBiqOUM6TCG+2y0wwGez2Vsr4rdAm7MGcVY0omM7Da3nu3nplxy6dxLbvG7i+3O9WQECR45heY8VHHn7rgGEDJoedwxpK2oKW2K9E+jrfwQyoShgeWORxtcnmQn6+nMzc8opUnLFwO3sj5Lze+W5Ywi9JYnAbn+ooygJS9OeaUwlSWW5Ou3a8m+MWVrsz+yK1rr9beeErlNYpLLa8Tc3Cm9Y0KubcQi4CbB7orQqBnLfwS1A7o2.7lcZdiNm9m+mBE+JEdmN8IG+rVPB+VPO5Y5f7JjfbfD2K75GgORPdb2STj+3+627edT+idD0TvdyeR4ov.oK44kPJc9a1rPmZM+75Z3sct4TyGzHezQOot9hGto.BCK06jSNqXWYKIQI9+4O7Q+o6c+K20TedGVjOIRlCDNYkiIe4zDwsgeV8uf++76C+unm8940diSkW8sKURj9txaIc6eTlI6SYXN88JiK7s9wxh2eSHtmO8+CP7ud5IUMKNidNM0zEOue1wa6y8laL8gqVUtnY.rWa5w+6+7+PtwSskwS+rhlsUXMxmd44ygkUVTBHYCr7EtclIWAWrP85P70xo3kaVJeweE9oUICe8jVkrNkP02Eaq+5EpMMfSJttTBfoMxGvPGL8yvWGzuOAbUYXsjpkUe8hEXn3VPXj1F96fMQuC1HdGrI9cvlj2AaReGrIau1fOqk9sWB0dUSS.Am7PUU2I8UumbUu+OJcSwnA

d.healey

I'd stick with the long version. The problem with repeating the short version is you'll need to also calculate the scaling for each image which sounds like a headache.

MikeB

Not if it is possible to duplicate the short SVG e.g. 5 times before and then to compress the whole thing again as as a coherent element (frequency) or to shift it (offset).

This does not have to take place in the same panel - I thought a panel image - attached to each other which is then compressed in a paren panel.

Would that be possible?

d.healey

@MikeB said in SVG Repetitions:

Not if it is possible to duplicate the short SVG e.g. 5 times before and then to compress the whole thing again as as a coherent element (frequency) or to shift it (offset).

It isn't possible. Just use the big version, it doesn't make a noticable performance difference.

MikeB

Besides, it is not one long version but five - Sine, Square, Saw, Triangle, Random.

d.healey

@MikeB said in SVG Repetitions:

Besides, it is not one long version but five - Sine, Square, Saw, Triangle, Random.

That's fine.

SVG Repetitions

22

1.8k

12.0k

104.3k