CODEWITHSUNDEEP
javascriptmathgraph
Wip
Wip

Reputation: 131

How can I accomplish this sine-like function?

In order to accomplish a smooth alternating animation, I would like to use a sine-like function in javascript, which should look like one of the red graphs.

The blue graph represents a regular sine-function:

var blueY = Math.sin(x);

raw graph

In the end, I would like to modify the graph to look similar to the following blue graph:

// scaled and translated sine-graph
var blueY = (1 - Math.sin(x * Math.PI / 2)) / 2;

final graph

How can I accomplish one of the red graphs? I do only need a one-liner that returns the y-value when given an x-value. The graph shouldn't have corners to achieve a smooth animation.

Additional info: the absolute value should be lower than from a sine-function at most points (except near the extreme points), to result in a sharper animation.

fiddle

Upvotes: 0

Views: 601

Answers (1)

M_F
M_F

Reputation: 406

You could use the following function: y = 0.5*Math.sign(x) * Math.sign( Math.abs(x)%4-2)*(1-Math.pow(Math.abs(Math.abs(x)%2-1), 1.5) )+0.5 (instead of 1.5, other values are also possible)

Comparison with the sine function (in blue):

enter image description here

Upvotes: 2

Related Questions