spiralIcon

JSGS Shapes

TNTSinusoid

Your browser does not support HTML5 Canvas
Notes:

If you saw TNTSine or TNTCosine, you noticed they look basically the same. They are. Together they are known as 'sinusoids' (sine-like) and this is a generalization of that concept. Note that the image may be rotated too. We are modeling the equation below from trigonometry: 

y = a*sin(b*(x-d)) + c in [x0, xf]
b = 2π/period
TNTSinusoid Features and Usage:
Primary Attributes:

8 Parameters:

  • a, amplitude: a real number
  • p, period: a positive real number - the distance between 'peaks' in the wave
  • c, the 'vertical shift': also known as the average value of the wave; the midline between a peak and valley. It's a real number
  • d, the 'horzontal shift': determines where a basic cycle of the wave begins relative to the x-axis. It's a real number
  • x0: the starting value of x for the wave (a real number)
  • xf: the ending value of x for the wave (a real number)
  • borderStroke: a TNTStroke: sets the color and thickness of the wavy line
  • rotationDeg: a 'double' that rotates the image about its center.
    rotn > 0 ==> counter-clockwise; rotn < 0 ==> clockwise
To Create:

The examples above were created by:

var a = 4;
var p = 8;
var c = 0;
var d = 0;
var x0 = 0;
var xf = 16;
var rotn = 0;

//TCAGraphic Objects
var mySinusoid = new TNTSinusoid(a, p, c, d, x0, xf, navyStroke, rotn);
mySinusoid.drawTNTSinusoid(context);

var blueWave = new TNTSinusoid(a, p / 2, c, d, 0, 16, blueStroke, 150);
blueWave.drawTNTSinusoid(context);
To Draw: mySectorPetal.drawTNTSectorPetal(context);