Draw sine wave bordered with parallel lines then animate the lines

Here is an example using the HTML5 Canvas document. It's just an idea to help you to get started. You can probably adapt to AS3 - if needed - without many problems.

Preview:

https://bit.ly/44v7LnG

JavaScript code (main timeline):

var wave;

function main()
{
	wave = new createjs.Shape();
	wave.counter = 0;
	wave.step = 0.1;
	wave.period = 100;
	wave.amplitude = 60;
	wave.width = lib.properties.width;
	wave.color = "black";
	wave.resolution = 0.1;
	wave.y = lib.properties.height * 0.5;
	root.addChild(wave);
	
	createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
	createjs.Ticker.on("tick", onTick);
}

function onTick()
{
	wave.height = Math.sin(wave.counter) * wave.amplitude;
	wave.counter += wave.step;
	wave.graphics.clear();
	
	renderSineWave
	({
		shape: wave,
		period: wave.period,
		width: wave.width,
		height: wave.height,
		resolution: wave.resolution,
		color: wave.color
	});

	renderLine
	({
		shape: wave,
		x0: 0,
		y0: -wave.height,
		x1: wave.width,
		y1: -wave.height,
		color: "red"
	});

	renderLine
	({
		shape: wave,
		x0: 0,
		y0: wave.height,
		x1: wave.width,
		y1: wave.height,
		color: "blue"
	});
}

function renderSineWave(props)
{
	var angle;
	
	props.shape.graphics.beginStroke(props.color);
	
	for (angle = 0; angle < props.width; angle += props.resolution)
	{
		var x = angle * props.period;
		var y = Math.sin(angle) * props.height;
		
		props.shape.graphics.lineTo(x, y);
	}
}

function renderLine(props)
{
	props.shape.graphics.beginStroke(props.color);
	props.shape.graphics.moveTo(props.x0, props.y0);
	props.shape.graphics.lineTo(props.x1, props.y1);
}

window.root = this;
main();

Download / Code / FLA / source:

https://bit.ly/4blp9gL

I hope this helps.

Regards,

JC

Hi.

Is this AS3 or HTML5 Canvas?

Regards,

JC