キャンバスを特定の変数に変更するonclick

Question

現在、アニメーション化しているキャンバス要素があります。しかし、キャンバス内でアニメーション化されている線の数や色を変更する、ストアド・ファンクションの配列を作成したいと考えています。

したがって、特定の要素をクリックすると、色、速度、線幅、振幅などをこれらの関数の1つに変更する配列内の関数の1つが選択されます。

私は、関数の配列、設定= [A、B、C、D]を持っているとしましょう。 ここで、A〜Dはキャンバスを変更する関数です。

私は、次のコードを持っていますが、トラブルリファクタリングを持っています

私はランダムにA、B、Cのものとcanvas要素の設定を変更する要素をクリックしたときになるように、またはD.

最終的に、私はそれをしたいです機能を分離するための一連の設定を含めるには、[クリック]機能を使用します。どんな助け？

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

あなたの赤の大部分を（）&青（）のコードは非常に共通のコード（animate()）で1アニメーションループを作成して、同一である：以下

は、私がこれまで持っている次のコードです。

グラデーションは高価ですので、アプリケーションの開始時に一度グラデーションを作成し、オブジェクトに保存してください（gradients{}）。

gradientMix変数を宣言して、使用するグラジエントをanimate()に伝えます。

ここでは、コードリファクタリングされています。私は赤と青の変数として格納されている2つの設定があり

// 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); 
}