Creating a seismograph animation

[barrard]

Hey all,

I'm working on making a seisomgraph animation, I have the needle animating with random data every second so far.
But I'm not sure how to approach the line drawing animation part.

I am using GSAP to animate the needle, and was thinking I could read the x, y value at the end of the needle.
Then.. save into an array and create a path, clear and draw for every needle animation update.

Is this efficient?

Is there a better/different way to do this?

 

Thanks for the help!!

 

this.needleGfx.lineStyle(4, 0xffff, 1);

this.needleGfx.moveTo(this.xScale(this.maxTime), this.yScale(0));
this.needleGfx.lineTo(this.xScale(this.maxTime) - (this.yScale(0) - this.yScale(this.highValue)), this.yScale(0));

this.needleLen = this.yScale(0) - this.yScale(this.highValue);

this.animateLineTest();

animateLineTest() {
    const x1 = 0;

    this.y1 = 0;

    this.y2 = 0;
    this.x2 = Math.sqrt(this.needleLen ** 2 - this.y2 ** 2);
    this.prevY2 = this.y2;

    this.updateTimer = setTimeout(this.updateNeedle.bind(this), 1000);
}


updateNeedle() {
    const timeline = gsap.timeline();
    const newY2 = { y2: this.prevY2 };

    timeline.to(newY2, {
        duration: 1,
        y2: this.y2,
        onUpdate: () => {
            this.needleGfx.clear();

            this.x2 = Math.sqrt(this.needleLen ** 2 - (this.yScale(0) - this.yScale(newY2.y2)) ** 2);
            this.needleGfx.lineStyle(4, 0xffff, 1);

            this.needleGfx.moveTo(this.xScale(this.maxTime), this.yScale(this.y1));
            this.needleGfx.lineTo(this.xScale(this.maxTime) - this.x2, this.yScale(newY2.y2));
        },
        onComplete: () => {
            function randomBetween(min, max) {
                if (min < 0) {
                    return min + Math.random() * (Math.abs(min) + max);
                } else {
                    return min + Math.random() * max;
                }
            }
            console.log("Animation completed.");
            this.prevY2 = this.y2;
            this.y2 = randomBetween(-10, 10);
            this.updateNeedle();
        },
    });
}

 

 

 

Edited September 2, 2023 by barrard
wrong video

[barrard]

So that does seem to work well.

I kept my data array small too.
 

`this.pathPoints = this.pathPoints.slice(-100);`