Canvas zu bestimmten Variablen onclick

Question

ändern Ich habe ein Canvas-Element, das gerade Linien animiert. Ich möchte jedoch ein Array von gespeicherten Funktionen erstellen, die die Anzahl und die Farben der Linien ändern, die im Canvas animiert werden.

Wenn ich also auf ein bestimmtes Element klicke, wird eine der Funktionen in einem Array ausgewählt, die die Farben, Geschwindigkeit, Linienbreite, Amplitude usw. zu einer dieser Funktionen ändert.

Also sagen wir, ich habe eine Reihe von Funktionen, Einstellungen = [A, B, C, D]; Dabei sind A bis D Funktionen, die die Zeichenfläche ändern.

Letztlich, ich will es so, dass wenn ich ein Element klicken ich das zufällig Einstellungen des Canvas-Elements wie in A ändern, B, C oder D.

Ich habe den folgenden Code aber Probleme habe Refactoring die Klicken Sie auf die Funktion, um ein Array mit Einstellungen für separate Funktionen hinzuzufügen. Irgendeine Hilfe?

Unten ist der folgende Code, den ich bisher habe:

var c = document.querySelector('.c') /* canvas element */, 
w /* canvas width */, h /* canvas height */, 
ctx = c.getContext('2d') /* canvas context */, 

/* previous & current coordinates */ 
x0, y0, x, y, 
t = 0, t_step = 1/600, 
u = 4, m, 
tmp, 

/* just me being lazy */ 
ceil = Math.ceil, 
exp = Math.exp, pow = Math.pow, sqrt = Math.sqrt, 
PI = Math.PI, sin = Math.sin, cos = Math.cos; 


/* FUNCTIONS */ 
/* a random number between min & max */ 
var rand = function(max, min) { 
var b = (max === 0 || max) ? max : 1, a = min || 0; 

return a + (b - a)*Math.random(); 
}; 

var trimUnit = function(input_str, unit) { 
return parseInt(input_str.split(unit)[0], 10); 
}; 

var initCanvas = function() { 
    var s = getComputedStyle(c); 

    w = c.width = trimUnit(s.width, 'px'); 
    h = c.height = trimUnit(s.height, 'px'); 

    m = ceil(w/(10*u)) + 90; 
}; 

var wave = function() { 
    ctx.clearRect(0, 0, w, h); 
    ctx.lineWidth = 1.75; 

    for(var i = 0; i < m; i++) { 
    x0 = -80; 
    y0 = i*4*u; 

    ctx.beginPath(); 
    ctx.moveTo(x0, y0); 

    for(x = 0; x < w; x++) { 
     y = u*sin(x/4/(10*i/m + 1) - w*(i/m + 2)*t/20) + i*2*u; 

     ctx.lineTo(x, y); 

     x0 = x; 
     y0 = y; 
    } 
    ctx.strokeStyle = 'hsl(' + i*360/m + ', 100%, 70%)'; 
    ctx.stroke(); 
    } 

    t += t_step; 


    requestAnimationFrame(wave); 
}; 


addEventListener('resize', initCanvas, false); 


initCanvas(); 
wave(); 


/*Moods*/ 
var red = function() { 
    ctx.clearRect(0, 0, w, h); 
    ctx.lineWidth = 10; 

    for(var i = 0; i < m; i++) { 
    x0 = -100; 
    y0 = i*8*u; 

    ctx.beginPath(); 
    ctx.moveTo(x0, y0); 

    for(x = 0; x < w; x++) { 
     y = u*sin(x/4/(16*i/m + 1) - w*(i/m + 1)*t/12) + i*2.5*u; 

     ctx.lineTo(x, y); 

     x0 = x; 
     y0 = y; 
    } 

var gradient=ctx.createLinearGradient(0,1000,0,0); 
gradient.addColorStop("0.1","orange"); 
gradient.addColorStop("0.5","red"); 
gradient.addColorStop("1.0","pink"); 

ctx.strokeStyle = gradient; 
ctx.stroke(); 
    } 

    t += t_step; 

    requestAnimationFrame(red); 
}; 

var blue = function() { 
    ctx.clearRect(0, 0, w, h); 
    ctx.lineWidth = 1.5; 

    for(var i = 0; i < m; i++) { 
    x0 = -100; 
    y0 = i*8*u; 

    ctx.beginPath(); 
    ctx.moveTo(x0, y0); 

    for(x = 0; x < w; x++) { 
     y = u*sin(x/4/(16*i/m + 1) - w*(i/m + 1)*t/12) + i*2.5*u; 

     ctx.lineTo(x, y); 

     x0 = x; 
     y0 = y; 
    } 

var gradient=ctx.createLinearGradient(0,1000,0,0); 
gradient.addColorStop("0.1","lightblue"); 
gradient.addColorStop("0.5","blue"); 
gradient.addColorStop("1.0","white"); 

    ctx.strokeStyle = gradient; 
    ctx.stroke(); 
    } 

    t += t_step; 

    requestAnimationFrame(blue); 
}; 

/*Mood Functions Above This Point*/ 

function hundred(min, max) { 
    return Math.random() * (max - min) + min; 
} 

$('#click').on('click',function(){ 

    $(".c").fadeOut('700'); 

    setTimeout(function(){ 
     $(".c").fadeIn('900'); 
    },100); 

    setTimeout(function(){ 
    m = ceil(w/(10*u)) + hundred(0,100);Math.random()*60*9; 
    /*m = ceil(w/(10*u)) + 100;*/ 

    u = hundred(2,6) 
    },100); 

    blue(); 
}); 

Answer 1

Die meisten Ihrer roten() & blau() Code identisch ist so 1 Animation erstellen Schleife mit dem gemeinsamen Code (animate()).

Farbverläufe sind teuer. Erstellen Sie jeden Farbverlauf einmal am Anfang der App und speichern Sie sie in einem Objekt (gradients{}).

Deklarieren Sie eine gradientMix Variable, um zu sagen, animate() welcher Gradient zu verwenden.

Hier ist Code Refactoring:

// gradients are expensive so create them once at the start of the app 
var gradients={}; 
gradients['red']=addGradient('orange','red','pink'); 
gradients['blue']=addGradient('lightblue','blue','white'); 
var gradientMix='blue'; 

// animate function with common code 
function animate(time){ 
    ctx.clearRect(0, 0, w, h); 
    ctx.lineWidth = 1.5; 

    for(var i = 0; i < m; i++) { 
     x0 = -100; 
     y0 = i*8*u; 

     ctx.beginPath(); 
     ctx.moveTo(x0, y0); 

     for(x = 0; x < w; x++) { 
     y = u*sin(x/4/(16*i/m + 1) - w*(i/m + 1)*t/12) + i*2.5*u; 

     ctx.lineTo(x, y); 

     x0 = x; 
     y0 = y; 
     } 

     // set the strokeStyle to the selected gradient mix 
     ctx.strokeStyle = gradients[gradientMix]; 
     ctx.stroke(); 
    } 

    t += t_step; 

    requestAnimationFrame(animate); 
}; 


function addGradient(color,g1,g2,g3){ 
    var gradient=ctx.createLinearGradient(0,1000,0,0); 
    gradient.addColorStop("0.1",g1); 
    gradient.addColorStop("0.5",g2); 
    gradient.addColorStop("1.0",g3); 
}