Wallpaper Engine, insight on customizing Audio Visualizer's rendering

www :

Since my last post I've made some headway in my Wallpaper-- fixing a lot of my prior issues

Today though I'd like some direction if anyone has it:

The last widget that I'm working on is an Audio Visualizer. My pursuit of desiring uniqueness isn't without its issues however (... can you really be a programmer without this attribute?). Here's the reference that I am modeling, a visualizer I made a few weeks ago in After Effects. https://youtu.be/cHweVjmBmP4

In the "limitations" of Javascript and Wallpaper Engine, is there anyway that I can replicate these sharps bends and curves in my output? I at first believed that a variable employing the arcTo() method would help out here.. but it's unclear to me what coordinates would be used for my tangents. And what formula would help explain the affected data.

Here's the code as it stands. Thanks to Michael Fedora for writing such an accessible code. I have learned so much about algorithms from reading and even more by testing things on my own. I'll keep trying to figure this out but any help is endlessly appreciated!

    let i, x = 0, y = center + scale*data[0]*0.33;   
    ctx.beginPath();
    ctx.moveTo(x, y);
    for(i = 0; i < 63; i++) {
        x += width;
        y = center + scale * data[i];
        ctx.lineTo(x, y);
    }

    x += width;
    y = center + scale * (data[63] + data[127]) * 0.5;
    ctx.lineTo(x, y);
    x += width;
    y = center + scale * data[126];
    ctx.lineTo(x, y);

    x = 128*width, y = center + scale*data[64]*0.33;
    ctx.moveTo(x, y);
    for(i = 64;i < 127; i++) {
        x -= width;
        y = center + scale * data[i];
        ctx.lineTo(x, y);




    }
}

function renderLine(ctx, color) {
    ctx.lineWidth = 1;
    ctx.strokeStyle = color;
    if(glob.bloom) {
        ctx.shadowBlur = glob.bloomRadius;
        ctx.shadowColor = color;
    }
    ctx.stroke();
}
AKX :

I don't see curves in your AE example, but a long polyline with the join style set to round (so angles get round corners).

I don't know about Wallpaper Engine in particular, but that looks like regular Canvas stuff, in which you can do

ctx.lineJoin = "round";

The examples in the linked MDN page do better at explaining the join styles than I ever could.

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=30051&siteId=1