How To Draw Moving Sine Wave Java

Describe a Sine Wave in JavaScript

To Do

Add together links to JSFiddle
Visualize with bl.ocks.org.
Vistualize with GistRun.

I am revisiting the Fourier transform so I thought it might be overnice to come with some visualizations. My get-go terminate was to plot a sine wave in JavaScript, then to breathing it. I am using the window.requestAnimationFrame() method. I've documented the steps in reverse society.

Simple Animation

The end issue is an oscillating sine wave. Nothing ground-breaking but it looks pretty cool to me.

Animated Sine Wave

The JavaScript function to plot the sine moving ridge uses the Math.sin() function, which is called repeatedly given a different starting point on the y-centrality. Come across the uncomplicated plot below. In this case, the draw() function makes the repeat calls via window.requestAnimationFrame(draw).

              role              draw              (              )              {              var              canvas              =              certificate              .              getElementById              (              "canvas"              )              ;              var              context              =              sheet              .              getContext              (              "2d"              )              ;              context              .              clearRect              (              0              ,              0              ,              500              ,              500              )              ;              showAxes              (              context              )              ;              context              .              save              (              )              ;              plotSine              (              context              ,              step              ,              50              )              ;              context              .              restore              (              )              ;              step              +=              4              ;              window              .              requestAnimationFrame              (              depict              )              ;              }

Note: The acute observer may discover the animation above isn't really JavaScript but is instead an animated gif. I did this since it is currently not possible to run JavaScript from a gist although information technology is possible using bl.ocks.org.

Superimposed Sine Waves

After I learned to plot a sine wave, I visualized how to depict multiple sine waves in guild to achieve the oscillation issue in the animation. Information technology looked pretty cool, and so I kept it effectually. It reminds me of Spirograph. 😄

Superimposed

The footstep advances the starting point along the y-centrality.

              var              step              =              iv              ;              for              (              var              i              =              -              4              ;              i              <              canvas              .              height              ;              i              +=              step              )              {              plotSine              (              context              ,              i              ,              54              +              i              )              ;              }

Simple Plot

My initial attempt to draw a sine wave on an HTML5 canvas.

Sine Wave

              <              body              onload="init()">              <              h3              >Oscillating Sine Wave</              h3              >              <              canvas              id="canvass"              width="500"              top="100">              </              canvas              >              </              body              >

              function              plotSine              (              ctx              )              {              var              width              =              ctx              .              canvas              .              width              ;              var              height              =              ctx              .              canvas              .              meridian              ;              var              scale              =              20              ;              ctx              .              beginPath              (              )              ;              ctx              .              lineWidth              =              two              ;              ctx              .              strokeStyle              =              "rgb(66,44,255)"              ;              var              x              =              0              ;              var              y              =              0              ;              var              aamplitude              =              40              ;              var              frequency              =              20              ;              //ctx.moveTo(x, y);              while              (              x              <              width              )              {              y              =              height              /              two              +              amplitude              *              Math              .              sin              (              10              /              frequency              )              ;              ctx              .              lineTo              (              x              ,              y              )              ;              10              =              ten              +              1              ;              }              ctx              .              stroke              (              )              ;              }