大家好，欢迎来到粒子引擎教程第二季。如果你还没读过第一季，请先读上一季。在上一季里我们已经为粒子引擎打下了基础。生活需要多姿多彩，现在就来为引擎添加视觉效果吧。
See the Pen Particle engine tutorial Part 1 by suffick (@suffick) on CodePen.
色彩
到目前为止，我们只有一种颜色，那就是我们定义在配置里的颜色。显然这有点寒掺, 我们希望拥有丰富以及炫目的效果。所以我们要打造一个色彩变换系统。所有的颜色都由四部分组成：红，绿，蓝以及alpha值。我们把颜色值拆分到这些单项里更便于我们进行单独操控。从一种颜色渐变到另一种颜色还不够骚，更骚的是从随机的某一颜色变到另一随机的颜色。
下面我们在setting对象里定义初始颜色和目标颜色数组
|
1 2 3 4 5 6 7 8 |
'start_colours': [ [130, 196, 245, 1], [69, 152, 212, 1] ], 'end_colours': [ [130, 196, 245, 0], [69, 152, 212, 0] ] |
这些数组里的值就是上面提到的颜色值。红，绿，蓝的值域为0到255， alpha值为0到1。我们会从初始颜色数组里随机选择一种颜色，在粒子的生命周期内渐变到另一随机的目标颜色。要实现这个目标首先我们要给粒子的构造函数增加两个变量，start_colour和colour_step， 分别代表每秒钟颜色改变的度量。
|
1 2 3 4 5 6 7 8 9 |
var Particle = function(..., start_colour, colour_step) { ... /* the particle's colour values */ this.colour = start_colour; this.colour_step = colour_step; }; |
现在我们需要修改创建新粒子的代码部分（在喷射器的update方法里）。我们需要获取初始颜色和目标颜色，并计算每秒钟需要改变多少颜色量，以便粒子在生命周期内能够完成颜色转换。为了在数组中随机选择元素，我们可以在0和数组长度之间产生一个随机数，并用Math.floor()进行取整。
我们需要在产生新粒子之前获得初始颜色和目标颜色。
|
1 2 3 4 5 |
var start_colour = this.settings.start_colours[Math.floor(this.settings.start_colours.length * Math.random())]; var end_colour = this.settings.end_colours[Math.floor(this.settings.end_colours.length * Math.random())]; |
或者你可以将初始颜色和目标颜色进行绑定，比如你可以只产生一个随机数，从两个数组里都取这个随机数位置的元素。
接下来要计算每秒钟的颜色转换量。首先我们得知道粒子的生命值，目前这个值是在构造函数里传入的，所以我们需要在创建粒子前将他赋给一个变量。然后通过目标颜色减去初始颜色的值我们可以知道初始颜色和目标颜色的差值， 最后除以生命值就能得到每秒钟需要的颜色转换量。需要特别注意的是这里粒子的颜色值应该是start_colour数组的拷贝而不能是原数组的引用，否则所有采用这个颜色的粒子都会被改变。我们可以用Array.prototype.slice()来实现。
现在我们的创建粒子的代码应该像下面这样：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
var start_colour = this.settings.start_colours[Math.floor(this.settings.start_colours.length * Math.random())]; var end_colour = this.settings.end_colours[Math.floor(this.settings.end_colours.length * Math.random())]; var life = this.settings.min_life + Math.random() * this.settings.life_range; var colour_step = [ (end_colour[0] - start_colour[0]) / life, /* red */ (end_colour[1] - start_colour[1]) / life, /* green */ (end_colour[2] - start_colour[2]) / life, /* blue */ (end_colour[3] - start_colour[3]) / life /* alpha */ ]; this.particles.push( new Particle( 0, 0, this.settings.min_angle + M this.settings.min_angle + M 还没读过第一季，请先读上一季。在上一季里我们已经为粒子引擎打下了基础。生活需要多姿多彩，现在就来为引擎添加视觉效果吧。
See the Pen Particle engine tutorial Part 1 by suffick (@suffick) on CodePen. 色彩 到目前为止，我们只有一种颜色，那就是我们定义在配置里的颜色。显然这有点寒掺, 我们希望拥有丰富以及炫目的效果。所以我们要打造一个色彩变换系统。所有的颜色都由四部分组成：红，绿，蓝以及alpha值。我们把颜色值拆分到这些单项里更便于我们进行单独操控。从一种颜色渐变到另一种颜色还不够骚，更骚的是从随机的某一颜色变到另一随机的颜色。 下面我们在setting对象里定义初始颜色和目标颜色数组
这些数组里的值就是上面提到的颜色值。红，绿，蓝的值域为0到255， alpha值为0到1。我们会从初始颜色数组里随机选择一种颜色，在粒子的生命周期内渐变到另一随机的目标颜色。要实现这个目标首先我们要给粒子的构造函数增加两个变量，start_colour和colour_step， 分别代表每秒钟颜色改变的度量。
现在我们需要修改创建新粒子的代码部分（在喷射器的update方法里）。我们需要获取初始颜色和目标颜色，并计算每秒钟需要改变多少颜色量，以便粒子在生命周期内能够完成颜色转换。为了在数组中随机选择元素，我们可以在0和数组长度之间产生一个随机数，并用Math.floor()进行取整。 我们需要在产生新粒子之前获得初始颜色和目标颜色。
或者你可以将初始颜色和目标颜色进行绑定，比如你可以只产生一个随机数，从两个数组里都取这个随机数位置的元素。 接下来要计算每秒钟的颜色转换量。首先我们得知道粒子的生命值，目前这个值是在构造函数里传入的，所以我们需要在创建粒子前将他赋给一个变量。然后通过目标颜色减去初始颜色的值我们可以知道初始颜色和目标颜色的差值， 最后除以生命值就能得到每秒钟需要的颜色转换量。需要特别注意的是这里粒子的颜色值应该是start_colour数组的拷贝而不能是原数组的引用，否则所有采用这个颜色的粒子都会被改变。我们可以用Array.prototype.slice()来实现。 现在我们的创建粒子的代码应该像下面这样：
|
