Skip to content

Commit 99b96da

Browse files
VincentGarreauVincentGarreau
committed
update color value [single hex, array hex or "random"]
1 parent f440a63 commit 99b96da

File tree

1 file changed

+32
-28
lines changed

1 file changed

+32
-28
lines changed

‎particles.js

Lines changed: 32 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@ function launchParticlesJS(tag_id, params){
1818
h: canvas_el.offsetHeight
1919
},
2020
particles: {
21-
color: '#fff',
22-
color_random: false,
21+
color: {
22+
value: '#fff' // "#ffaa44", "['#ffaa44', '#ffffaa', '#445500']" or "random"
23+
},
2324
shape: {
2425
type: 'circle', // "circle", "edge", "triangle", "polygon", "star" or "image"
2526
nb_sides: 5, // 5+
@@ -108,7 +109,7 @@ function launchParticlesJS(tag_id, params){
108109
}
109110

110111
/* convert hex colors to rgb */
111-
pJS.particles.color_rgb = hexToRgb(pJS.particles.color);
112+
//pJS.particles.color.rgb = hexToRgb(pJS.particles.color.value);
112113
pJS.particles.line_linked.color_rgb_line = hexToRgb(pJS.particles.line_linked.color);
113114

114115
/* detect retina */
@@ -214,19 +215,21 @@ function launchParticlesJS(tag_id, params){
214215
if (pJS.retina) this.radius *= pJS.canvas.pxratio;
215216

216217
/* color */
217-
if(pJS.particles.color_random === true){
218-
this.color = {
218+
this.color = {};
219+
if(typeof(color.value) == 'object'){
220+
var color_selected = color.value[Math.floor(Math.random() * pJS.particles.color.value.length)];
221+
this.color.rgb = hexToRgb(color_selected);
222+
}
223+
else if(color.value == 'random'){
224+
this.color.rgb = {
219225
r: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),
220226
g: (Math.floor(Math.random() * (255 - 0 + 1)) + 0),
221227
b: (Math.floor(Math.random() * (255 - 0 + 1)) + 0)
222228
}
223-
}
224-
else if( pJS.particles.color_random instanceof Array){
225-
this.color = pJS.particles.color_random[Math.floor(Math.random() * pJS.particles.color_random.length)];
226-
this.color = hexToRgb(this.color);
227229
}
228230
else{
229231
this.color = color;
232+
this.color.rgb = hexToRgb(this.color.value);
230233
}
231234

232235
/* opacity */
@@ -258,29 +261,31 @@ function launchParticlesJS(tag_id, params){
258261

259262
pJS.fn.particle.prototype.draw = function() {
260263

261-
pJS.canvas.ctx.fillStyle = 'rgba('+this.color.r+','+this.color.g+','+this.color.b+','+this.opacity+')';
264+
var t = this;
265+
266+
pJS.canvas.ctx.fillStyle = 'rgba('+t.color.rgb.r+','+t.color.rgb.g+','+t.color.rgb.b+','+t.opacity+')';
262267
pJS.canvas.ctx.beginPath();
263268

264269
switch(pJS.particles.shape.type){
265270

266271
case 'circle':
267-
pJS.canvas.ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
272+
pJS.canvas.ctx.arc(t.x, t.y, t.radius, 0, Math.PI * 2, false);
268273
break;
269274

270275
case 'edge':
271-
pJS.canvas.ctx.rect(this.x-this.radius, this.y-this.radius, this.radius*2, this.radius*2);
276+
pJS.canvas.ctx.rect(t.x-t.radius, t.y-t.radius, t.radius*2, t.radius*2);
272277
break;
273278

274279
case 'triangle':
275-
pJS.fn.vendors.drawShape(pJS.canvas.ctx, this.x-this.radius, this.y+this.radius / 1.66, this.radius*2, 3, 2);
280+
pJS.fn.vendors.drawShape(pJS.canvas.ctx, t.x-t.radius, t.y+t.radius / 1.66, t.radius*2, 3, 2);
276281
break;
277282

278283
case 'polygon':
279284
pJS.fn.vendors.drawShape(
280285
pJS.canvas.ctx,
281-
this.x - this.radius / (pJS.particles.shape.nb_sides/3.5), // startX
282-
this.y - this.radius / (2.66/3.5), // startY
283-
this.radius*2.66 / (pJS.particles.shape.nb_sides/3), // sideLength
286+
t.x - t.radius / (pJS.particles.shape.nb_sides/3.5), // startX
287+
t.y - t.radius / (2.66/3.5), // startY
288+
t.radius*2.66 / (pJS.particles.shape.nb_sides/3), // sideLength
284289
pJS.particles.shape.nb_sides, // sideCountNumerator
285290
1 // sideCountDenominator
286291
);
@@ -289,18 +294,16 @@ function launchParticlesJS(tag_id, params){
289294
case 'star':
290295
pJS.fn.vendors.drawShape(
291296
pJS.canvas.ctx,
292-
this.x - this.radius*2 / (pJS.particles.shape.nb_sides/4), // startX
293-
this.y - this.radius / (2*2.66/3.5), // startY
294-
this.radius*2*2.66 / (pJS.particles.shape.nb_sides/3), // sideLength
297+
t.x - t.radius*2 / (pJS.particles.shape.nb_sides/4), // startX
298+
t.y - t.radius / (2*2.66/3.5), // startY
299+
t.radius*2*2.66 / (pJS.particles.shape.nb_sides/3), // sideLength
295300
pJS.particles.shape.nb_sides, // sideCountNumerator
296301
2 // sideCountDenominator
297302
);
298303
break;
299304

300305
case 'image':
301306

302-
var t = this;
303-
304307
function createImgObj(img_type){
305308

306309
// SVG
@@ -314,10 +317,10 @@ function launchParticlesJS(tag_id, params){
314317
var svgXml = data.currentTarget.response,
315318
rgbHex = /#([0-9A-F]{3,6})/gi,
316319
coloredSvgXml = svgXml.replace(rgbHex, function (m, r, g, b) {
317-
return 'rgba(' + t.color.r + ','
318-
+ t.color.g + ','
319-
+ t.color.b + ','
320-
+ t.opacity + ')'
320+
return 'rgba(' + t.color.rgb.r + ','
321+
+ t.color.rgb.g + ','
322+
+ t.color.rgb.b + ','
323+
+ t.opacity + ')'
321324
});
322325

323326
var svg = new Blob([coloredSvgXml], {type: 'image/svg+xml;charset=utf-8'}),
@@ -374,7 +377,7 @@ function launchParticlesJS(tag_id, params){
374377

375378
pJS.fn.particlesCreate = function(){
376379
for(var i = 0; i < pJS.particles.nb; i++) {
377-
pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color_rgb, pJS.particles.opacity.opacity));
380+
pJS.particles.array.push(new pJS.fn.particle(pJS.particles.color, pJS.particles.opacity.opacity));
378381
}
379382
};
380383

@@ -450,7 +453,8 @@ function launchParticlesJS(tag_id, params){
450453
/* draw each particle */
451454
for(var i = 0; i < pJS.particles.array.length; i++){
452455
var p = pJS.particles.array[i];
453-
p.draw('rgba('+p.color.r+','+p.color.g+','+p.color.b+','+p.opacity+')');
456+
//console.log(p.color.rgb);
457+
p.draw('rgba('+p.color.rgb.r+','+p.color.rgb.g+','+p.color.rgb.b+','+p.opacity+')');
454458
}
455459

456460
};
@@ -565,7 +569,7 @@ function launchParticlesJS(tag_id, params){
565569
for(var i = 0; i < nb; i++){
566570
pJS.particles.array.push(
567571
new pJS.fn.particle(
568-
pJS.particles.color_rgb,
572+
pJS.particles.color,
569573
pJS.particles.opacity.opacity,
570574
{
571575
'x': pos ? pos.pos_x : Math.random() * pJS.canvas.w,

0 commit comments

Comments
 (0)