Draw sine wave bordered with parallel lines then animate the lines

[HappyCamper2]

Hi, I would like to draw a sine wave, bordered at the top and bottom by parallel lines, and then animate the whole thing by having the parallel lines come together and move apart (move up and down) squashing and unsquashing the sine wave.  

Does anyone have any idea how I can do that?

Many thanks

[JoãoCésar]

Hi.

Is this AS3 or HTML5 Canvas?

Regards,

JC

[HappyCamper2]

I have no idea. Which canvas should I pick? Sent from my Galaxy

[JoãoCésar]

If you intend to use it on the web, then the HTML5 Canvas document will be better for now.

[HappyCamper2]

Thank you. I do intend to post on a website. Thank you for your advice Sent from my Galaxy

[JoãoCésar]

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

[HappyCamper2]

Yes, that gives the idea. Thank you so much for showing me such a great piece of movement 😊



What program would be best for me to use?



I just want the parallel lines to move closer and further apart on the same plane; kind of just up and down as it were. Closer and further apart.

In the meantime, the sine wave gets squashed – if the boundary lines are closer together – and eased if the boundary/parallel lines are further apart.

Everything would be on a single place, no spinning or rocking, or moving in a 2nd or 3rd plane. Just up and down.

And I want the animation to be loaded onto the web.



Thank you

[JoãoCésar]

This was done in Adobe Animate software (this is Adobe Animate's forum).

And what's happening in the sample provided isn't exactly what you want? If not, can you provide a visual reference?

[HappyCamper2]

I want the parallel lines to move wider and narrower.

When they are wider, the sine curve is bigger.

When the parallel lines are narrower, the sine curve in smaller.

I had not realized that Adobe Animate could be as sophisticated as you
showed me.

I hope my visual helps.

[JoãoCésar]

I think the example provided is doing exactly what you want.

Also, thinking about it, you can create this animation using the design tools and the timeline. There's no need for code.

[HappyCamper2]

Oh, thank you very much for letting me know.  Much appreciated.  I will look at Animation and timeline.  Thank you for letting me know I don't need to learn code as well. That is a relief.  

The example you sent, is good.  The thing is, red and the blue lines keep rotating, and I just want a simple situation where e.g. the red line always stays on top, and the blue line always stays on the bottom. There is no movement other than the red line and the blue line get closer together and then get further apart.  Like a window opening and closing; like breathing in and breathing out; like an accordian moving in and out.  Thank you very much for your help; much appreciated.

[HappyCamper2]

Oh, thank you very much for letting me know. Much appreciated. I will look
at Animation and timeline. Thank you for letting me know I don't need to
learn code as well. That is a relief.

The example you sent, is good. The thing is, red and the blue lines keep
rotating, and I just want a simple situation where e.g. the red line always
stays on top, and the blue line always stays on the bottom. There is no
movement other than the red line and the blue line get closer together and
then get further apart. Like a window opening and closing; like breathing
in and breathing out; like an accordian moving in and out. Thank you very
much for your help; much appreciated.