Ändern der Farbwert der Zeichnungen nach der Menge der Zeit mit Leinwand und Javascript

Question

Ich habe einen Versuch gemacht, eine einfache Audio-Visualizer für eine MP3-Spur mit Leinwand zu erstellen/animieren Kreise synchron mit der Audiospur mit dem Web-Audio zu animieren API.

Was habe ich bisher getan.

Was will ich im Grunde jetzt zu tun ist, um die Farben der Kreise in einer gewissen Zeit ändern (zB an einem anderen Teil der Strecke - die Tropfen usw.). Wie würde ich das machen? setTimeout? Ich hatte eine Suche, konnte aber nichts finden (und ich bin noch ziemlich neu in JavaScript).

Hier ist der vollständige Code.

// Estabilish all variables tht analyser will use 
var analyser, canvas, ctx, random = Math.random, circles = []; 


// begins once all the page resources are loaded. 
window.onload = function() { 
canvas = document.createElement('canvas'); 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
document.body.appendChild(canvas); 
ctx = canvas.getContext('2d', {alpha: false}); 

setupWebAudio(); //loads audio track 

for (var i = 0; i < 20; i++) { // loop runs 50 times - creating 49 circles 
    circles[i] = new Circle(); 
    circles[i].draw(); 
} 
draw(); 
}; 

function setupWebAudio() { 
var audio = document.createElement('audio'); 
audio.src = 'rustie.mp3'; 
audio.controls = true; 
document.body.appendChild(audio); 

var audioContext = new AudioContext(); // AudioContext object instance (WEB AUDIO API) 
//contains an audio signal graph representing connections betweens AudioNodes 
analyser = audioContext.createAnalyser(); // Analyser method 
var source = audioContext.createMediaElementSource(audio); 
// Re-route audio playback into the processing graph of the AudioContext 
source.connect(analyser); 
analyser.connect(audioContext.destination); 
audio.play(); 
} 

function draw() { 
requestAnimationFrame(draw); 
var freqByteData = new Uint8Array(analyser.frequencyBinCount); //Array of the frequency data from the audio track (representation of the sound frequency) 
analyser.getByteFrequencyData(freqByteData); //take the analyser variable run it through the getByteFrequencyData method - passing through the array 
ctx.fillStyle = "#ff00ed"; 
ctx.fillRect(0, 0, canvas.width, canvas.height); //fill the canvas with colour 

for (var i = 1; i < circles.length; i++) { 
    circles[i].radius = freqByteData[i] * 1; 
    circles[i].y = circles[i].y > canvas.height ? 0 : circles[i].y + 1; 
    circles[i].draw(); 
} 

} 


function Circle() { 
this.x = random() * canvas.width; // creates random placement of circle on canvas 
this.y = random() * canvas.height; 
this.radius = random() * 20 + 20; //creates random radius of circle 
this.color = 'rgb(6,237,235)'; //colour of circles 
} 

Circle.prototype.draw = function() { //Drawing path 
var that = this; 
ctx.save(); 
ctx.beginPath(); 
ctx.globalAlpha = 0.75; //Transparency level 
ctx.arc(that.x, that.y, that.radius, 0, Math.PI * 2); 
ctx.fillStyle = this.color; 
ctx.fill(); 
ctx.restore(); 
} 

Eine andere Sache, die auch hinzugefügt wird - wo im Code ist es die Bewegung/den Weg der Kreise? Wie sie von oben nach unten auf der Leinwand gehen. Wollte wissen, ob ich das ändern könnte.

Answer 1

Frage 1

Statt harte Kodierung des Kreises Farbe this.color = 'rgb(6,237,235)';, können Sie eine globale Variable verwenden, um den Farbton var hue = 0; zu halten und dann, dass, wie dies in Ihrem Circle.draw() verwenden: ctx.fillStyle = 'hsla(' + hue + ', 50%, 50%, 0.75)';

Anmerkung 1: durch Wenn Sie das Alpha in der Farbe definieren, müssen Sie nicht mehr ctx.globalAlpha einstellen.

Hinweis 2: Sie brauchen nicht mehr this.color.

Wie Sie sagen, können Sie setTimeout verwenden, um die Farbtonvariable zu einem bestimmten Zeitpunkt zu ändern. Oder Sie können die Daten in freqByteData verwenden, um die Farbtonvariable kontinuierlich zu ändern.

Mehr Infos über hsl Farbe: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#hsl()_and_hsla()

Frage 2

Sie aktualisieren die y mit dieser Zeile jeden Kreis koordinieren: circles[i].y = circles[i].y > canvas.height ? 0 : circles[i].y + 1;

Das heißt: wenn aktuelle y-Position größer ist als die Leinwandhöhe: Setzen Sie den neuen Wert auf Null, andernfalls erhöhen Sie ihn um eins.