Hacker Newsnew | past | comments | ask | show | jobs | submitlogin

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.


Thank you for the thoughtful code review. It is already running smoother

https://github.com/jjkaufman/wiv.js/pull/5 if you are curious


Awesome! You're welcome :)




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: