Adjust Javascript Code to Modify Speed of Sine Wave Live

Feeling a bit lost here, but I need some assistance with a simple task.

I'm trying to adjust the speed of a sine wave from 2 to 10 when a button is clicked. It seems like a small change, but for some reason, I can't quite figure it out.

If you'd like to take a look at the SineWave.js file on Github, you can find it here: Sinewave.js

Here's the code snippet:

var waves = new SineWaves({
  el: document.getElementById('waves'),
  speed: 2,
  ease: 'SineInOut',
  wavesWidth: '75%',
  waves: [
    {
      timeModifier: 4,
      lineWidth: 1,
      amplitude: -25,
      wavelength: 25
    },
    {
      timeModifier: 2,
      lineWidth: 1,
      amplitude: -10,
      wavelength: 30
    },
    {
      timeModifier: 1,
      lineWidth: 1,
      amplitude: -30,
      wavelength: 30
    },
        {
      timeModifier: 3,
      lineWidth: 1,
      amplitude: 40,
      wavelength: 40
    },
    {
      timeModifier: 0.5,
      lineWidth: 1,
      amplitude: -60,
      wavelength: 60
    },
    {
      timeModifier: 1.3,
      lineWidth: 1,
      amplitude: -40,
      wavelength: 40
    }
  ],

  resizeEvent: function() {
    var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
    gradient.addColorStop(0,"rgba(25, 255, 255, 0)");
    gradient.addColorStop(0.5,"rgba(255, 25, 255, 0.75)");
    gradient.addColorStop(1,"rgba(255, 255, 25, 0");

    var index = -1;
    var length = this.waves.length;
      while(++index < length){
      this.waves[index].strokeStyle = gradient;
    }

    index = void 0;
    length = void 0;
    gradient = void 0;
  }
});

You can also check out a Codepen example showcasing this code here: 

https://codepen.io/anon/pen/GxEKJZ?editors=1010

I would greatly appreciate any help in solving this dilemma, as it's been driving me crazy...

javascriptjqueryhtmlcsscanvas

Answer №1

Here is an example showcasing the use of jQuery:

var waves = new SineWaves({
  el: document.getElementById('waves'),
  speed: 2,
  ease: 'SineInOut',
  wavesWidth: '75%',
  waves: [
    {
      timeModifier: 4,
      lineWidth: 1,
      amplitude: -25,
      wavelength: 25
    },
    {
      timeModifier: 2,
      lineWidth: 1,
      amplitude: -10,
      wavelength: 30
    },
    {
      timeModifier: 1,
      lineWidth: 1,
      amplitude: -30,
      wavelength: 30
    },
{
      timeModifier: 3,
      lineWidth: 1,
      amplitude: 40,
      wavelength: 40
    },
    {
      timeModifier: 0.5,
      lineWidth: 1,
      amplitude: -60,
      wavelength: 60
    },
    {
      timeModifier: 1.3,
      lineWidth: 1,
      amplitude: -40,
      wavelength: 40
    }
  ],
 
  resizeEvent: function() {
    var gradient = this.ctx.createLinearGradient(0, 0, this.width, 0);
    gradient.addColorStop(0,"rgba(25, 255, 255, 0)");
    gradient.addColorStop(0.5,"rgba(255, 25, 255, 0.75)");
    gradient.addColorStop(1,"rgba(255, 255, 25, 0");
    
    var index = -1;
    var length = this.waves.length;
  while(++index < length){
      this.waves[index].strokeStyle = gradient;
    }
    
    index = void 0;
    length = void 0;
    gradient = void 0;
  }
});

$("#change_speed").click(function(){
waves.options.speed = 10;
});
<script src="https://isuttell.github.io/sine-waves/javascripts/sine-waves.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="waves" width="300" height="180"></canvas>
<button id='change_speed'>Change Speed</button>

UPDATE:

Here's a different approach to changing colors without relying on the resizeEvent function:

var waves = new SineWaves({
  el: document.getElementById('waves'),
  speed: 2,
  ease: 'SineInOut',
  wavesWidth: '75%',
  waves: [{
      timeModifier: 4,
      lineWidth: 1,
      amplitude: -25,
      wavelength: 25,
      strokeStyle: 'rgba(0, 0, 255, 0.1)'
    },
    {
      timeModifier: 2,
      lineWidth: 1,
      amplitude: -10,
      wavelength: 30,
      strokeStyle: 'rgba(0, 0, 255, 0.1)'
    },
    {
      timeModifier: 1,
      lineWidth: 1,
      amplitude: -30,
      wavelength: 30,
      strokeStyle: 'rgba(0, 0, 255, 0.1)'
    },
    {
      timeModifier: 3,
      lineWidth: 1,
      amplitude: 40,
      wavelength: 40,
      strokeStyle: 'rgba(0, 0, 255, 0.1)'
    },
    {
      timeModifier: 0.5,
      lineWidth: 1,
      amplitude: -60,
      wavelength: 60,
      strokeStyle: 'rgba(0, 0, 255, 0.1)'
    },
    {
      timeModifier: 1.3,
      lineWidth: 1,
      amplitude: -40,
      wavelength: 40,
      strokeStyle: 'rgba(0, 0, 255, 0.1)'
    }
  ]
});

$("#change_color").click(function() {
  waves.waves[0].strokeStyle = 'rgba(0, 0, 255, 0.9)';
  waves.waves[1].strokeStyle = 'rgba(255, 0, 255, 0.9)';
  waves.waves[2].strokeStyle = 'rgba(255, 0, 0, 0.9)';
  waves.waves[3].strokeStyle = 'rgba(0, 255, 0, 0.9)';
  waves.waves[4].strokeStyle = 'rgba(0, 255, 225, 0.9)';
  waves.waves[5].strokeStyle = 'rgba(255, 255, 0, 0.9)';
});
<script src="https://isuttell.github.io/sine-waves/javascripts/sine-waves.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="waves" width="300" height="180"></canvas>
<button id='change_color'>Change Color</button>

Answer №2

Upon examining the waves object, you will notice a speed parameter located within the options. This allows for adjusting the speed in the following manner:

<button onclick="waves.options.speed = 10;">adjusting speed</button>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Providing Arguments to a Named Function Using Dependency Injection

I am currently working on an Angular app where I am passing a named function into a controller. The issue arises when I try to inject a provider into that controller for use, as I receive a TypeError: object is not a function in the console. My question i ...

javascriptangularjsdependency-injection

Is the popup successfully closed when the button is tested?

I am currently working on testing a simple pop-up to see if the clicked button closes the popup using testing-library/react. The approach in the documentation doesn't seem to be working for me, as I can successfully console log the button but fireEven ...

javascriptreactjstestingreact-testing-library

Aligning a child div within a parent div by using absolute positioning for both

When creating my components dynamically using JS, I utilize position: absolute for both the parent and children elements to achieve the desired placement. But I've encountered an issue with centering a div within another div. Most solutions suggest m ...

javascriptcss

Will refreshing a browser's software automatically delete the cache?

When the browser's software is updated, what happens to the cache? For instance, let's say I have some code hosted on a third-party website that includes an embedded logo image. If the host updates the logo and I clear the cache, the new logo wi ...

htmlcsscaching

Experimenting with nested dual dynamic routing within the app's directory

Currently working with NextJS 13 and executing the following operations within the app directory. I am attempting to utilize the generateStaticParams function to generate static pages during build time. The route structure is: subpage/[categoryName]/[gif ...

javascripttypescriptnext.js

Python struggles to find HTML elements when gathering information from a website through

I attempted to extract data from a website by utilizing the following code snippet: import requests requests.get("myurl.com").content Unfortunately, certain crucial components of the website were not retrieved. Is there a way for me to access th ...

pythonhtmlweb

Is there a way to retrieve the value of a dropped file in a file input using jQuery?

Can the data from a dropped file be set in a file upload input field? Or does a dropped file need to be instantly uploaded to the server? Here is an example code snippet: <input type="file" id="drop-box" /> $("#drop-box").on('drop', fun ...

javascriptjqueryhtmlfileinput

Display the menu upon activating the hover event icon using only CSS

Assistance Needed - Unable to activate hover and display the rest of the div I want to activate the hover effect where early levels are visible, and when hovering over the first level, the subsequent levels appear List item body { margin: 3%; } div.ti ...

htmlcss

``Only Firefox supports jQuery animations, all other browsers fail to render them properly

This particular issue is a bit complex to articulate, so I'll begin by providing the code and then proceed to elaborate on the problem as best as I can. I'm assuming that you've already compared the results in Firefox and other browsers. He ...

jquerycssjquery-animate

Issue with Selectric plugin not working properly after being dynamically added via jQuery

After clicking a button, I tried to clone form elements and append them to the target using this code. $('#addChild').on('click', function () { var num = $('.clonedInput').length, newNu ...

javascriptjqueryhtmlcssjquery-selectric

What is a way to transfer an Object from one Vue.js component to another without relying on vuex?

Using vue-router in app.vue, I defined the two components as shown below: <div class='app'> <div class='nav'> <router-link to='/a'>to A component</router-link> <router-link to= ...

javascriptvue.jsvue-componentvue-router

HTML when contenteditable attribute is set to "true" doesn't have a fixed width

I was looking to create a textarea with HTML elements inside it and came across this informative article. My approach involved creating a div element with the attribute contenteditable="true". #call-text-form { height: calc(100vh - 350px); width: ...

htmlcsstextareacontenteditable

The tab content refuses to show up in its designated fixed location

I've been working on creating a responsive tab system that functions as an accordion on smaller mobile devices, inspired by this example. I've made great progress and I'm almost where I want to be, but for some reason, the active tab content ...

htmlcsstabsaccordion

How to style multiple tags using CSS

Is there a way to style specific tags in CSS? <style type="text/css"> [attribute*="test"] { background-color: red; } </style> However, this method does not seem to work for the following tags: <test-1> </test-1> <t ...

htmlcsscss-selectors

A simple way to add a value from a select option into a textarea when there are several dropdown menus and select elements sharing the same

I have several divs with the same class names where I need to input a value from a dropdown menu into the textarea that belongs to the div where the select element is located. I want this function to work smoothly even with more than 10 divs, which is why ...

javascripthtmljquery

Struggling to retrieve the header in Angular 6

When setting headers from an Express server written in NodeJS, I use the following code: app.use('/routes', function(req, res, next) { res.setHeader('test', 'test'); next(); ); The headers are successfully sent to th ...

javascriptnode.jsangularexpress

Is React-Apollo encountering a 404 network error?

I am currently exploring React-apollo and attempting to implement Server-side rendering with apollo, but I keep encountering a 404 error. Despite confirming that my graphQL endpoint is functional. Here is the specific error message: { Error: Network erro ...

javascriptreactjsexpressreduxapollo

Generating interactive sound using Node.js

Issue My current application, a morse code translator, is experiencing difficulties in playing multiple sounds for user input. It seems that only a single sound is played even when the method is called multiple times. Additionally, the sound is being play ...

javascriptnode.jsaudio

Tips for extracting only a portion of the JavaScript timestamp

I have a JavaScript timestamp that reads Tue Sep 30 2014 12:02:50 GMT-0400 (EDT). When I use the .getTime() method, I get 1412092970.768 Typically, this timestamp represents a specific time of today. My question is whether it's possible to extract o ...

javascriptdatedatetimeunix-timestamp

Having issues with the jQuery toggle functionality

var resultsList = $("#test"); resultsList.text("Hello. This is jQuery!"); var tB = jQuery("#toggleButton"); tB.on("click", function() { resultsList.toggle(400); }); The syntax appears to be correct as there are no errors reported in the browser cons ...

javascriptjquery