<story><title>Show HN: Wiv.js – A library for a more wiggly div</title><url>https://jjkaufman.github.io/wiv.js/</url></story><parent_chain></parent_chain><comment><author>PavlovsCat</author><text>move these things into initWiv() and cache them:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    var speed = parseFloat(wivCurve.parentNode.dataset.wivSpeed)
    var height = parseFloat(wivCurve.parentNode.dataset.wivHeight)
    var tightness = parseFloat(wivCurve.parentNode.dataset.wivTightness)
    var thickness = parseFloat(wivCurve.parentNode.dataset.wivThickness)
    var ctx = wivCurve.getContext(&amp;quot;2d&amp;quot;);
&lt;/code&gt;&lt;/pre&gt;
do this once on init, the canvas context remembers it anyway:&lt;p&gt;&lt;pre&gt;&lt;code&gt;    ctx.strokeStyle = wivCurve.parentNode.dataset.wivColor != undefined ? wivCurve.parentNode.dataset.wivColor : &amp;quot;#FF0000&amp;quot;
&lt;/code&gt;&lt;/pre&gt;
don&amp;#x27;t convert numbers and strings all the time, use numbers and init them to 0&lt;p&gt;&lt;pre&gt;&lt;code&gt;    &amp;#x2F;&amp;#x2F;current frame is tracked on per wiv basis. This is to help with speed calculations 
    if (parseFloat(wivCurve.dataset.count) &amp;gt; 100000) {
        wivCurve.dataset.count = &amp;quot;0&amp;quot;;
    }
    wivCurve.dataset.count = (wivCurve.dataset.count ? parseFloat(wivCurve.dataset.count) : 0) + speed;
&lt;/code&gt;&lt;/pre&gt;
parseFloat(wivCurve.dataset.count) also is used a lot in that loop.&lt;p&gt;And don&amp;#x27;t set unneccessary canvas state, this should happen only once per draw loop iteration: [edit, actually, as I said above, the canvas contexts remember it individually, so do this once in initWiv(), and not in the draw loop at all, yay!]&lt;p&gt;&lt;pre&gt;&lt;code&gt;    ctx.lineWidth = thickness;
&lt;/code&gt;&lt;/pre&gt;
That&amp;#x27;s all just at first glance, but I bet you, this would help with slow laptops and whatnot :) Such &amp;quot;small&amp;quot; things really add up when you do them 60 times per second * number of borders. I don&amp;#x27;t know if setting the canvas width or height to the value it has anyway to clear it (instead of clearing&amp;#x2F;drawing a rectangle explicitly) is still a useful thing to do, but you might try that as well.</text></comment>
<story><title>Show HN: Wiv.js – A library for a more wiggly div</title><url>https://jjkaufman.github.io/wiv.js/</url></story><parent_chain></parent_chain><comment><author>ryanchoi</author><text>This is guilt-trippingly sweet, there&amp;#x27;s a certain charm I get from this, kind of like that of tacky Christmas sweaters or unironically used comic sans :)</text></comment>