Mathematics, Waves, Sin, Cos, Angles and HTML5

Hi Everybody,

I ask for the communty help, especially to those stronger in mathematics to solve a problem:

I've making tests in a program that should be able to represent in real time a sinus wave depending on a slider value. The idea is to have something similar to a Osciloscope made with a canvas plugin.

https://dl.dropboxusercontent.com/u/87172782/test.JPG

So that I try to do so and, as you can see in the example, I'm just near to pick up a solution, but not completely. The line represented in the canvas is not responding to the changes made on the slider. It only takes the initial values of X and Y.

The aim would be to make possible to represent a y=cos(x) for example, where X is given by the slider.

Here you would find an image and a example.

https://dl.dropboxusercontent.com/u/87172782/test.capx

Any idea or comment? Is my approach to the solution a good one? Perhaps it is not possible to be done with a canvas plugin?

If you try to do something similar to this, it is totally possible and relatively easy as well. The link leads to an app I once made with CC, but the graphic representation was done with the canvas plugin, and nothing else was used than "line to". Both is also available in C2 using ROJOhound's Canvas plugin for C2.

The basic approach of drawing a waveform (be it a sinus or anything else) is to split it into segments, tiny parts of the complete wave. Those segments represent the resolution, the wave is drawn at.

If you are not afraid of installing CC, I could give you the source the the link above. But maybe somebody else already working on a demo for C2

You are setting Y to a constant: 4*cos(3.141516)^2

It needs to be a function of X, something like: 4*cos(X * _yourfrequencyvalue_)^2

wouldn't using the curve feature in the canvas plugin be easier?

I haven't loaded your example but if blackhornet copied from your event:??Doesn't Construct 2 use degree instead of radian in sin()???Also better use pi instead of 3.141516

Wow! That too much of course. But this is the kind of control of the waves that I seek in my app.

What I do is

            Every tick

                  -----> Loop For 1 to BoxBound : Drawing the points.

The problem is this only represents the first values, no changes.

Y is a constant in the example.

Oh, I'm going to change this inmediately

wouldn't using the curve feature in the canvas plugin be easier?

I have never used it before, I'll check it out

Here you can find the project in it's last state:

https://dl.dropboxusercontent.com/u/87172782/test.capx ]

As you can see, the problem is that it seems no way to represent the changes in real time

easy with the canvas plugin:

<img src="http://i.imgur.com/3MvPTqe.png" border="0" />

<img src="http://i.imgur.com/fNVeCj6.png" border="0" />

Thank you mindfaQ

That is exactly what I was talking about.

Heptagono

mindfaQ's example might need some explanation for your understanding. 'Amplitude' is Y and 'Period' (or Frequency) is what you called 'distance pp' in your graphic.

Wonderful solution!

Now I can see that the appoach that I was using was not the best way to pick up a proper result. I'm goint to test It and tell you how it has been.

Thanks and cheers!

I probably use too many points with rising new_period. I think canvas.width*newperiod/4 or even /8 will be enough and stay fast enough if the new_period number gets large. Also what I called period in my example is the frequency instead of period in (sinwaves/360 pixel) as unit.

and instead of adding sin to y, substract it, as it should point upwards when sin is 1, not downwards

mindfaQ, there is something that I want to ask you.

Can I use an Amplitude and a Period value to draw a wave with the code you have showed me?

Not sure what you mean with that. The code already does that, no? The slider is not a necessity.