Show HN: Wiv.js – A library for a more wiggly div

I sense a second coming soon

The quintessential eighties.

Browsers are getting too feature laden. Soon nobody will be able to write a browser from scratch. Instead, let users implement the features they need, or let them use libraries if necessary.

Upvoting because it's wednesday.

move these things into initWiv() and cache them:

    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("2d");

do this once on init, the canvas context remembers it anyway:

    ctx.strokeStyle = wivCurve.parentNode.dataset.wivColor != undefined ? wivCurve.parentNode.dataset.wivColor : "#FF0000"

don't convert numbers and strings all the time, use numbers and init them to 0

    //current frame is tracked on per wiv basis. This is to help with speed calculations 
    if (parseFloat(wivCurve.dataset.count) > 100000) {
        wivCurve.dataset.count = "0";
    }
    wivCurve.dataset.count = (wivCurve.dataset.count ? parseFloat(wivCurve.dataset.count) : 0) + speed;

parseFloat(wivCurve.dataset.count) also is used a lot in that loop.

And don'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!]

    ctx.lineWidth = thickness;

That's all just at first glance, but I bet you, this would help with slow laptops and whatnot :) Such "small" things really add up when you do them 60 times per second * number of borders. I don't know if setting the canvas width or height to the value it has anyway to clear it (instead of clearing/drawing a rectangle explicitly) is still a useful thing to do, but you might try that as well.