king-addons / includes / features / Particles_Background / Particles_Background.php

Particles_Background.php in King Addons for Elementor – 80+ Elementor Widgets, 4 000+ Elementor Templates, WooCommerce, Mega Menu, Popup Builder 51.1.81, at includes/features/Particles_Background/Particles_Background.php

1,144 lines 38.3 KB

Raw Download Zip

1	<?php /** @noinspection PhpUnused, DuplicatedCode,SpellCheckingInspection */
2
3	namespace King_Addons;
4
5	use Elementor\Controls_Manager;
6	use Elementor\Element_Base;
7
8	if (!defined('ABSPATH')) {
9	exit; // Exit if accessed directly.
10	}
11
12	class Particles_Background
13	{
14	private static ?Particles_Background $_instance = null;
15
16	public static function instance(): Particles_Background
17	{
18	if (is_null(self::$_instance)) {
19	self::$_instance = new self();
20	}
21	return self::$_instance;
22	}
23
24	public function __construct()
25	{
26	add_action('elementor/preview/enqueue_scripts', [__CLASS__, 'enqueueScripts'], 1);
27	add_action('elementor/element/section/section_advanced/after_section_end', [__CLASS__, 'addControls'], 1);
28	add_action('elementor/frontend/section/after_render', [__CLASS__, 'renderAnimation'], 1);
29	add_action('elementor/element/container/section_layout/after_section_end', array($this, 'addControls'), 10);
30	add_action('elementor/frontend/container/after_render', array($this, 'renderAnimation'), 10);
31	}
32
33	public static function enqueueScripts(): void
34	{
35	if (!wp_script_is(KING_ADDONS_ASSETS_UNIQUE_KEY . '-' . 'particles' . '-' . 'particles')) {
36	wp_enqueue_script(KING_ADDONS_ASSETS_UNIQUE_KEY . '-' . 'particles' . '-' . 'particles', '', array('jquery'), KING_ADDONS_VERSION);
37	}
38
39	if (!wp_script_is(KING_ADDONS_ASSETS_UNIQUE_KEY . '-' . 'particles-background' . '-' . 'preview-handler')) {
40	wp_enqueue_script(KING_ADDONS_ASSETS_UNIQUE_KEY . '-' . 'particles-background' . '-' . 'preview-handler', '', array('jquery'), KING_ADDONS_VERSION);
41	}
42	}
43
44	public static function addControls(Element_Base $element): void
45	{
46	$element->start_controls_section(
47	'kng_particles_bg_section',
48	[
49	'label' => KING_ADDONS_ELEMENTOR_ICON . esc_html__('Particles Background', 'king-addons'),
50	'tab' => Controls_Manager::TAB_ADVANCED
51	]
52	);
53
54	$element->add_control(
55	'kng_particles_bg_switch',
56	[
57	'label' => esc_html__('Enable Particles', 'king-addons'),
58	'type' => Controls_Manager::SWITCHER,
59	'prefix_class' => 'kng-particles-bg-',
60	'frontend_available' => true
61	]
62	);
63
64	$element->add_control(
65	'kng_particles_bg_apply_changes',
66	[
67	'type' => Controls_Manager::RAW_HTML,
68	'raw' => '<div class="elementor-update-preview king-addons-editor-preview-update"><span>' . esc_html__('After a few edits, the browser can slow down the animation to save resources. This is normal. To clean it up, just click on the Refresh button. It will refresh the Preview, so the animation will run smoothly again.', 'king-addons') . '</span><button class="elementor-button elementor-button-success" onclick="elementor.reloadPreview();">' . esc_html__('Refresh', 'king-addons') . '</button>',
69	'separator' => 'before',
70	'condition' => [
71	'kng_particles_bg_switch!' => ''
72	],
73	]
74	);
75
76	$element->add_control('kng_particles_bg_type',
77	[
78	'label' => esc_html__('Type', 'king-addons'),
79	'type' => Controls_Manager::SELECT,
80	'options' => [
81	'default' => esc_html__('Default', 'king-addons'),
82	'nasa' => esc_html__('NASA', 'king-addons'),
83	'bubble' => esc_html__('Bubble', 'king-addons'),
84	'snow' => esc_html__('Snow', 'king-addons'),
85	'nyan_cat' => esc_html__('Nyan Cat', 'king-addons'),
86	'custom_code' => esc_html__('Custom Code (JSON)', 'king-addons')
87	],
88	'default' => 'default',
89	'frontend_available' => true,
90	'label_block' => 'true',
91	'separator' => 'before',
92	'condition' => [
93	'kng_particles_bg_switch!' => ''
94	],
95	]
96	);
97
98	$element->add_control(
99	'kng_particles_bg_color',
100	[
101	'label' => esc_html__('Color', 'king-addons'),
102	'type' => Controls_Manager::COLOR,
103	'frontend_available' => true,
104	'default' => '#0027FF',
105	'condition' => [
106	'kng_particles_bg_switch!' => '',
107	'kng_particles_bg_type' => ['default', 'nasa', 'bubble', 'snow', 'nyan_cat']
108	],
109	]
110	);
111
112	$element->add_control(
113	'kng_particles_bg_anim_speed_default',
114	[
115	'label' => esc_html__('Animation Speed', 'king-addons'),
116	'type' => Controls_Manager::NUMBER,
117	'frontend_available' => true,
118	'min' => 0,
119	'step' => 0.1,
120	'default' => 6,
121	'condition' => [
122	'kng_particles_bg_switch!' => '',
123	'kng_particles_bg_type' => 'default'
124	]
125	]
126	);
127
128	$element->add_control(
129	'kng_particles_bg_anim_speed_nasa',
130	[
131	'label' => esc_html__('Animation Speed', 'king-addons'),
132	'type' => Controls_Manager::NUMBER,
133	'frontend_available' => true,
134	'min' => 0,
135	'step' => 0.1,
136	'default' => 1,
137	'condition' => [
138	'kng_particles_bg_switch!' => '',
139	'kng_particles_bg_type' => 'nasa'
140	]
141	]
142	);
143
144	$element->add_control(
145	'kng_particles_bg_anim_speed_bubble',
146	[
147	'label' => esc_html__('Animation Speed', 'king-addons'),
148	'type' => Controls_Manager::NUMBER,
149	'frontend_available' => true,
150	'min' => 0,
151	'step' => 0.1,
152	'default' => 8,
153	'condition' => [
154	'kng_particles_bg_switch!' => '',
155	'kng_particles_bg_type' => 'bubble'
156	]
157	]
158	);
159
160	$element->add_control(
161	'kng_particles_bg_anim_speed_snow',
162	[
163	'label' => esc_html__('Animation Speed', 'king-addons'),
164	'type' => Controls_Manager::NUMBER,
165	'frontend_available' => true,
166	'min' => 0,
167	'step' => 0.1,
168	'default' => 6,
169	'condition' => [
170	'kng_particles_bg_switch!' => '',
171	'kng_particles_bg_type' => 'snow'
172	]
173	]
174	);
175
176	$element->add_control(
177	'kng_particles_bg_anim_speed_nyan_cat',
178	[
179	'label' => esc_html__('Animation Speed', 'king-addons'),
180	'type' => Controls_Manager::NUMBER,
181	'frontend_available' => true,
182	'min' => 0,
183	'step' => 0.1,
184	'default' => 14,
185	'condition' => [
186	'kng_particles_bg_switch!' => '',
187	'kng_particles_bg_type' => 'nyan_cat'
188	]
189	]
190	);
191
192	$element->add_control(
193	'kng_particles_bg_number_default',
194	[
195	'label' => esc_html__('Number of particles', 'king-addons'),
196	'type' => Controls_Manager::NUMBER,
197	'frontend_available' => true,
198	'min' => 0,
199	'step' => 0.1,
200	'default' => 160,
201	'condition' => [
202	'kng_particles_bg_switch!' => '',
203	'kng_particles_bg_type' => 'default'
204	]
205	]
206	);
207
208	$element->add_control(
209	'kng_particles_bg_number_nasa',
210	[
211	'label' => esc_html__('Number of particles', 'king-addons'),
212	'type' => Controls_Manager::NUMBER,
213	'frontend_available' => true,
214	'min' => 0,
215	'step' => 0.1,
216	'default' => 250,
217	'condition' => [
218	'kng_particles_bg_switch!' => '',
219	'kng_particles_bg_type' => 'nasa'
220	]
221	]
222	);
223
224	$element->add_control(
225	'kng_particles_bg_number_bubble',
226	[
227	'label' => esc_html__('Number of particles', 'king-addons'),
228	'type' => Controls_Manager::NUMBER,
229	'frontend_available' => true,
230	'min' => 0,
231	'step' => 0.1,
232	'default' => 15,
233	'condition' => [
234	'kng_particles_bg_switch!' => '',
235	'kng_particles_bg_type' => 'bubble'
236	]
237	]
238	);
239
240	$element->add_control(
241	'kng_particles_bg_number_snow',
242	[
243	'label' => esc_html__('Number of particles', 'king-addons'),
244	'type' => Controls_Manager::NUMBER,
245	'frontend_available' => true,
246	'min' => 0,
247	'step' => 0.1,
248	'default' => 450,
249	'condition' => [
250	'kng_particles_bg_switch!' => '',
251	'kng_particles_bg_type' => 'snow'
252	]
253	]
254	);
255
256	$element->add_control(
257	'kng_particles_bg_number_nyan_cat',
258	[
259	'label' => esc_html__('Number of particles', 'king-addons'),
260	'type' => Controls_Manager::NUMBER,
261	'frontend_available' => true,
262	'min' => 0,
263	'step' => 0.1,
264	'default' => 150,
265	'condition' => [
266	'kng_particles_bg_switch!' => '',
267	'kng_particles_bg_type' => 'nyan_cat'
268	]
269	]
270	);
271
272	$element->add_control(
273	'kng_particles_bg_size_default',
274	[
275	'label' => esc_html__('Size of particle', 'king-addons'),
276	'type' => Controls_Manager::NUMBER,
277	'frontend_available' => true,
278	'min' => 0,
279	'step' => 0.1,
280	'default' => 3,
281	'condition' => [
282	'kng_particles_bg_switch!' => '',
283	'kng_particles_bg_type' => 'default'
284	]
285	]
286	);
287
288	$element->add_control(
289	'kng_particles_bg_size_nasa',
290	[
291	'label' => esc_html__('Size of particle', 'king-addons'),
292	'type' => Controls_Manager::NUMBER,
293	'frontend_available' => true,
294	'min' => 0,
295	'step' => 0.1,
296	'default' => 3,
297	'condition' => [
298	'kng_particles_bg_switch!' => '',
299	'kng_particles_bg_type' => 'nasa'
300	]
301	]
302	);
303
304	$element->add_control(
305	'kng_particles_bg_size_bubble',
306	[
307	'label' => esc_html__('Size of particle', 'king-addons'),
308	'type' => Controls_Manager::NUMBER,
309	'frontend_available' => true,
310	'min' => 0,
311	'step' => 0.1,
312	'default' => 50,
313	'condition' => [
314	'kng_particles_bg_switch!' => '',
315	'kng_particles_bg_type' => 'bubble'
316	]
317	]
318	);
319
320	$element->add_control(
321	'kng_particles_bg_size_snow',
322	[
323	'label' => esc_html__('Size of particle', 'king-addons'),
324	'type' => Controls_Manager::NUMBER,
325	'frontend_available' => true,
326	'min' => 0,
327	'step' => 0.1,
328	'default' => 5,
329	'condition' => [
330	'kng_particles_bg_switch!' => '',
331	'kng_particles_bg_type' => 'snow'
332	]
333	]
334	);
335
336	$element->add_control(
337	'kng_particles_bg_size_nyan_cat',
338	[
339	'label' => esc_html__('Size of particle', 'king-addons'),
340	'type' => Controls_Manager::NUMBER,
341	'frontend_available' => true,
342	'min' => 0,
343	'step' => 0.1,
344	'default' => 4,
345	'condition' => [
346	'kng_particles_bg_switch!' => '',
347	'kng_particles_bg_type' => 'nyan_cat'
348	]
349	]
350	);
351
352	$element->add_control(
353	'kng_particles_bg_z_index',
354	[
355	'label' => esc_html__('Z-Index (optional)', 'king-addons'),
356	'type' => Controls_Manager::NUMBER,
357	'frontend_available' => true,
358	'step' => 1,
359	'default' => 0,
360	'condition' => [
361	'kng_particles_bg_switch!' => ''
362	]
363	]
364	);
365
366	$element->add_control('kng_particles_bg_shape_type',
367	[
368	'label' => esc_html__('Shape Type', 'king-addons'),
369	'type' => Controls_Manager::SELECT,
370	'options' => [
371	'circle' => esc_html__('Circle', 'king-addons'),
372	'edge' => esc_html__('Edge', 'king-addons'),
373	'triangle' => esc_html__('Triangle', 'king-addons'),
374	'polygon' => esc_html__('Polygon', 'king-addons'),
375	'star' => esc_html__('Star', 'king-addons')
376	],
377	'default' => 'circle',
378	'frontend_available' => true,
379	'label_block' => 'true',
380	'condition' => [
381	'kng_particles_bg_switch!' => '',
382	'kng_particles_bg_type' => ['default', 'nasa', 'snow']
383	],
384	]
385	);
386
387	$element->add_control('kng_particles_bg_shape_type_bubble',
388	[
389	'label' => esc_html__('Shape Type', 'king-addons'),
390	'type' => Controls_Manager::SELECT,
391	'options' => [
392	'circle' => esc_html__('Circle', 'king-addons'),
393	'edge' => esc_html__('Edge', 'king-addons'),
394	'triangle' => esc_html__('Triangle', 'king-addons'),
395	'polygon' => esc_html__('Polygon', 'king-addons')
396	],
397	'default' => 'circle',
398	'frontend_available' => true,
399	'label_block' => 'true',
400	'condition' => [
401	'kng_particles_bg_switch!' => '',
402	'kng_particles_bg_type' => 'bubble'
403	],
404	]
405	);
406
407	$element->add_control('kng_particles_bg_shape_type_nyan_cat',
408	[
409	'label' => esc_html__('Shape Type', 'king-addons'),
410	'type' => Controls_Manager::SELECT,
411	'options' => [
412	'circle' => esc_html__('Circle', 'king-addons'),
413	'edge' => esc_html__('Edge', 'king-addons'),
414	'triangle' => esc_html__('Triangle', 'king-addons'),
415	'polygon' => esc_html__('Polygon', 'king-addons'),
416	'star' => esc_html__('Star', 'king-addons')
417	],
418	'default' => 'star',
419	'frontend_available' => true,
420	'label_block' => 'true',
421	'condition' => [
422	'kng_particles_bg_switch!' => '',
423	'kng_particles_bg_type' => 'nyan_cat'
424	],
425	]
426	);
427
428	$element->add_control('kng_particles_bg_move_direction',
429	[
430	'label' => esc_html__('Move Direction', 'king-addons'),
431	'type' => Controls_Manager::SELECT,
432	'options' => [
433	'none' => esc_html__('None', 'king-addons'),
434	'top' => esc_html__('Top', 'king-addons'),
435	'top-right' => esc_html__('Top-right', 'king-addons'),
436	'bottom-right' => esc_html__('Bottom-right', 'king-addons'),
437	'bottom' => esc_html__('Bottom', 'king-addons'),
438	'bottom-left' => esc_html__('Bottom-left', 'king-addons'),
439	'left' => esc_html__('Left', 'king-addons'),
440	'top-left' => esc_html__('Top-left', 'king-addons')
441	],
442	'default' => 'none',
443	'frontend_available' => true,
444	'label_block' => 'true',
445	'condition' => [
446	'kng_particles_bg_switch!' => '',
447	'kng_particles_bg_type' => ['default', 'nasa', 'bubble']
448	],
449	]
450	);
451
452	$element->add_control('kng_particles_bg_move_direction_snow',
453	[
454	'label' => esc_html__('Move Direction', 'king-addons'),
455	'type' => Controls_Manager::SELECT,
456	'options' => [
457	'none' => esc_html__('None', 'king-addons'),
458	'top' => esc_html__('Top', 'king-addons'),
459	'top-right' => esc_html__('Top-right', 'king-addons'),
460	'bottom-right' => esc_html__('Bottom-right', 'king-addons'),
461	'bottom' => esc_html__('Bottom', 'king-addons'),
462	'bottom-left' => esc_html__('Bottom-left', 'king-addons'),
463	'left' => esc_html__('Left', 'king-addons'),
464	'top-left' => esc_html__('Top-left', 'king-addons'),
465	],
466	'default' => 'bottom',
467	'frontend_available' => true,
468	'label_block' => 'true',
469	'condition' => [
470	'kng_particles_bg_switch!' => '',
471	'kng_particles_bg_type' => 'snow'
472	],
473	]
474	);
475
476	$element->add_control('kng_particles_bg_move_direction_nyan_cat',
477	[
478	'label' => esc_html__('Move Direction', 'king-addons'),
479	'type' => Controls_Manager::SELECT,
480	'options' => [
481	'none' => esc_html__('None', 'king-addons'),
482	'top' => esc_html__('Top', 'king-addons'),
483	'top-right' => esc_html__('Top-right', 'king-addons'),
484	'bottom-right' => esc_html__('Bottom-right', 'king-addons'),
485	'bottom' => esc_html__('Bottom', 'king-addons'),
486	'bottom-left' => esc_html__('Bottom-left', 'king-addons'),
487	'left' => esc_html__('Left', 'king-addons'),
488	'top-left' => esc_html__('Top-left', 'king-addons'),
489	],
490	'default' => 'left',
491	'frontend_available' => true,
492	'label_block' => 'true',
493	'condition' => [
494	'kng_particles_bg_switch!' => '',
495	'kng_particles_bg_type' => 'nyan_cat'
496	],
497	]
498	);
499
500	$element->add_control(
501	'kng_particles_bg_custom_code_guide',
502	[
503	'type' => Controls_Manager::RAW_HTML,
504	'raw' => esc_html__('To create a custom animation, go to ', 'king-addons') . '<a href="https://vincentgarreau.com/particles.js/" target="_blank">' . esc_html__('HERE', 'king-addons') . '</a>, ' . esc_html__('then past the generated JSON code in the field (open the downloaded config file in any text editor).', 'king-addons'),
505	'separator' => 'before',
506	'condition' => [
507	'kng_particles_bg_switch!' => '',
508	'kng_particles_bg_type' => 'custom_code'
509	],
510	]
511	);
512
513	$element->add_control('kng_particles_bg_custom_code',
514	[
515	'label' => esc_html__('Custom Code (JSON)', 'king-addons'),
516	'type' => Controls_Manager::CODE,
517	'language' => 'json',
518	'default' => 'CODE_FROM_JSON_FILE',
519	'frontend_available' => true,
520	'label_block' => 'true',
521	'condition' => [
522	'kng_particles_bg_switch!' => '',
523	'kng_particles_bg_type' => 'custom_code'
524	],
525	]
526	);
527
528	$element->end_controls_section();
529	}
530
531	public static function renderAnimation(Element_Base $element): void
532	{
533	if (!empty($element->get_settings_for_display('kng_particles_bg_switch'))) {
534
535	if (!wp_script_is(KING_ADDONS_ASSETS_UNIQUE_KEY . '-' . 'particles' . '-' . 'particles')) {
536	wp_enqueue_script(KING_ADDONS_ASSETS_UNIQUE_KEY . '-' . 'particles' . '-' . 'particles', '', array('jquery'), KING_ADDONS_VERSION);
537	}
538
539	if (('container' === $element->get_type() \|\| 'section' === $element->get_type()) && 'yes' === $element->get_settings('kng_particles_bg_switch')
540	) {
541
542	$settings = $element->get_settings();
543	$element_ID = $element->get_id();
544	$type = esc_js($settings['kng_particles_bg_type']);
545	$color = esc_js($settings['kng_particles_bg_color']);
546	$config = '';
547
548	switch ($type) {
549	case 'default':
550	$speed = esc_js($settings['kng_particles_bg_anim_speed_default']);
551	$shape_type = esc_js($settings['kng_particles_bg_shape_type']);
552	$move_direction = esc_js($settings['kng_particles_bg_move_direction']);
553	$number = esc_js($settings['kng_particles_bg_number_default']);
554	$size = esc_js($settings['kng_particles_bg_size_default']);
555	$config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type];
556	break;
557	case 'nasa':
558	$speed = esc_js($settings['kng_particles_bg_anim_speed_nasa']);
559	$shape_type = esc_js($settings['kng_particles_bg_shape_type']);
560	$move_direction = esc_js($settings['kng_particles_bg_move_direction']);
561	$number = esc_js($settings['kng_particles_bg_number_nasa']);
562	$size = esc_js($settings['kng_particles_bg_size_nasa']);
563	$config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type];
564	break;
565	case 'bubble':
566	$speed = esc_js($settings['kng_particles_bg_anim_speed_bubble']);
567	$shape_type = esc_js($settings['kng_particles_bg_shape_type_bubble']);
568	$move_direction = esc_js($settings['kng_particles_bg_move_direction']);
569	$number = esc_js($settings['kng_particles_bg_number_bubble']);
570	$size = esc_js($settings['kng_particles_bg_size_bubble']);
571	$config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type];
572	break;
573	case 'snow':
574	$speed = esc_js($settings['kng_particles_bg_anim_speed_snow']);
575	$shape_type = esc_js($settings['kng_particles_bg_shape_type']);
576	$move_direction = esc_js($settings['kng_particles_bg_move_direction_snow']);
577	$number = esc_js($settings['kng_particles_bg_number_snow']);
578	$size = esc_js($settings['kng_particles_bg_size_snow']);
579	$config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type];
580	break;
581	case 'nyan_cat':
582	$speed = esc_js($settings['kng_particles_bg_anim_speed_nyan_cat']);
583	$shape_type = esc_js($settings['kng_particles_bg_shape_type_nyan_cat']);
584	$move_direction = esc_js($settings['kng_particles_bg_move_direction_nyan_cat']);
585	$number = esc_js($settings['kng_particles_bg_number_nyan_cat']);
586	$size = esc_js($settings['kng_particles_bg_size_nyan_cat']);
587	$config = self::getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size)[$type];
588	break;
589	case 'custom_code':
590	$config = $settings['kng_particles_bg_custom_code'];
591	break;
592	}
593
594	$inline_js_element = "document.querySelector('.elementor-element-" . esc_js($element_ID) . "').insertAdjacentHTML('afterbegin', '" .
595	'<div id="king-addons-particles-container-' . esc_js($element_ID) . '" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: ' . esc_js($settings['kng_particles_bg_z_index']) . ';"></div>' . "');";
596
597	$inline_js_config = '';
598	if (self::is_json($config)) {
599	$inline_js_config = 'document.addEventListener("DOMContentLoaded", function() {' . "particlesJS('king-addons-particles-container-" . esc_js($element_ID) . "'," . $config . ");" . '});';
600	}
601
602	$inline_js = $inline_js_element . $inline_js_config;
603	wp_print_inline_script_tag($inline_js);
604	}
605	}
606	}
607
608	public static function is_json($string): bool
609	{
610	json_decode($string);
611	return (json_last_error() == JSON_ERROR_NONE);
612	}
613
614	public static function getParticlesConfig($color, $speed, $shape_type, $move_direction, $number, $size): array
615	{
616	return [
617	'default' => '{
618	"particles": {
619	"number": {
620	"value": ' . $number . ',
621	"density": {
622	"enable": true,
623	"value_area": 800
624	}
625	},
626	"color": {
627	"value": "' . $color . '"
628	},
629	"shape": {
630	"type": "' . $shape_type . '",
631	"stroke": {
632	"width": 0,
633	"color": "#000000"
634	},
635	"polygon": {
636	"nb_sides": 5
637	}
638	},
639	"opacity": {
640	"value": 0.5,
641	"random": false,
642	"anim": {
643	"enable": false,
644	"speed": 1,
645	"opacity_min": 0.1,
646	"sync": false
647	}
648	},
649	"size": {
650	"value": ' . $size . ',
651	"random": true,
652	"anim": {
653	"enable": false,
654	"speed": 40,
655	"size_min": 0.1,
656	"sync": false
657	}
658	},
659	"line_linked": {
660	"enable": true,
661	"distance": 150,
662	"color": "' . $color . '",
663	"opacity": 0.4,
664	"width": 1
665	},
666	"move": {
667	"enable": true,
668	"speed": ' . $speed . ',
669	"direction": "' . $move_direction . '",
670	"random": false,
671	"straight": false,
672	"out_mode": "out",
673	"bounce": false,
674	"attract": {
675	"enable": false,
676	"rotateX": 600,
677	"rotateY": 1200
678	}
679	}
680	},
681	"interactivity": {
682	"detect_on": "canvas",
683	"events": {
684	"onhover": {
685	"enable": false,
686	"mode": "repulse"
687	},
688	"onclick": {
689	"enable": false,
690	"mode": "push"
691	},
692	"resize": true
693	},
694	"modes": {
695	"grab": {
696	"distance": 400,
697	"line_linked": {
698	"opacity": 1
699	}
700	},
701	"bubble": {
702	"distance": 400,
703	"size": 40,
704	"duration": 2,
705	"opacity": 8,
706	"speed": 3
707	},
708	"repulse": {
709	"distance": 200,
710	"duration": 0.4
711	},
712	"push": {
713	"particles_nb": 4
714	},
715	"remove": {
716	"particles_nb": 2
717	}
718	}
719	},
720	"retina_detect": true
721	}',
722	'nasa' => '{
723	"particles": {
724	"number": {
725	"value": ' . $number . ',
726	"density": {
727	"enable": true,
728	"value_area": 800
729	}
730	},
731	"color": {
732	"value": "' . $color . '"
733	},
734	"shape": {
735	"type": "' . $shape_type . '",
736	"stroke": {
737	"width": 0,
738	"color": "#000000"
739	},
740	"polygon": {
741	"nb_sides": 5
742	}
743	},
744	"opacity": {
745	"value": 1,
746	"random": true,
747	"anim": {
748	"enable": true,
749	"speed": 1,
750	"opacity_min": 0,
751	"sync": false
752	}
753	},
754	"size": {
755	"value": ' . $size . ',
756	"random": true,
757	"anim": {
758	"enable": false,
759	"speed": 4,
760	"size_min": 0.3,
761	"sync": false
762	}
763	},
764	"line_linked": {
765	"enable": false,
766	"distance": 150,
767	"color": "#ffffff",
768	"opacity": 0.4,
769	"width": 1
770	},
771	"move": {
772	"enable": true,
773	"speed": ' . $speed . ',
774	"direction": "' . $move_direction . '",
775	"random": true,
776	"straight": false,
777	"out_mode": "out",
778	"bounce": false,
779	"attract": {
780	"enable": false,
781	"rotateX": 600,
782	"rotateY": 600
783	}
784	}
785	},
786	"interactivity": {
787	"detect_on": "canvas",
788	"events": {
789	"onhover": {
790	"enable": false,
791	"mode": "bubble"
792	},
793	"onclick": {
794	"enable": false,
795	"mode": "repulse"
796	},
797	"resize": true
798	},
799	"modes": {
800	"grab": {
801	"distance": 400,
802	"line_linked": {
803	"opacity": 1
804	}
805	},
806	"bubble": {
807	"distance": 250,
808	"size": 0,
809	"duration": 2,
810	"opacity": 0,
811	"speed": 3
812	},
813	"repulse": {
814	"distance": 400,
815	"duration": 0.4
816	},
817	"push": {
818	"particles_nb": 4
819	},
820	"remove": {
821	"particles_nb": 2
822	}
823	}
824	},
825	"retina_detect": true
826	}',
827	'bubble' => '{
828	"particles": {
829	"number": {
830	"value": ' . $number . ',
831	"density": {
832	"enable": true,
833	"value_area": 800
834	}
835	},
836	"color": {
837	"value": "' . $color . '"
838	},
839	"shape": {
840	"type": "' . $shape_type . '",
841	"stroke": {
842	"width": 0,
843	"color": "#000"
844	},
845	"polygon": {
846	"nb_sides": 6
847	}
848	},
849	"opacity": {
850	"value": 0.3,
851	"random": true,
852	"anim": {
853	"enable": false,
854	"speed": 1,
855	"opacity_min": 0.1,
856	"sync": false
857	}
858	},
859	"size": {
860	"value": ' . $size . ',
861	"random": false,
862	"anim": {
863	"enable": true,
864	"speed": 10,
865	"size_min": 40,
866	"sync": false
867	}
868	},
869	"line_linked": {
870	"enable": false,
871	"distance": 200,
872	"color": "#ffffff",
873	"opacity": 1,
874	"width": 2
875	},
876	"move": {
877	"enable": true,
878	"speed": ' . $speed . ',
879	"direction": "' . $move_direction . '",
880	"random": false,
881	"straight": false,
882	"out_mode": "out",
883	"bounce": false,
884	"attract": {
885	"enable": false,
886	"rotateX": 600,
887	"rotateY": 1200
888	}
889	}
890	},
891	"interactivity": {
892	"detect_on": "canvas",
893	"events": {
894	"onhover": {
895	"enable": false,
896	"mode": "grab"
897	},
898	"onclick": {
899	"enable": false,
900	"mode": "push"
901	},
902	"resize": true
903	},
904	"modes": {
905	"grab": {
906	"distance": 400,
907	"line_linked": {
908	"opacity": 1
909	}
910	},
911	"bubble": {
912	"distance": 400,
913	"size": 40,
914	"duration": 2,
915	"opacity": 8,
916	"speed": 3
917	},
918	"repulse": {
919	"distance": 200,
920	"duration": 0.4
921	},
922	"push": {
923	"particles_nb": 4
924	},
925	"remove": {
926	"particles_nb": 2
927	}
928	}
929	},
930	"retina_detect": true
931	}',
932	'snow' => '{
933	"particles": {
934	"number": {
935	"value": ' . $number . ',
936	"density": {
937	"enable": true,
938	"value_area": 800
939	}
940	},
941	"color": {
942	"value": "' . $color . '"
943	},
944	"shape": {
945	"type": "' . $shape_type . '",
946	"stroke": {
947	"width": 0,
948	"color": "#000000"
949	},
950	"polygon": {
951	"nb_sides": 5
952	}
953	},
954	"opacity": {
955	"value": 0.5,
956	"random": true,
957	"anim": {
958	"enable": false,
959	"speed": 1,
960	"opacity_min": 0.1,
961	"sync": false
962	}
963	},
964	"size": {
965	"value": ' . $size . ',
966	"random": true,
967	"anim": {
968	"enable": false,
969	"speed": 40,
970	"size_min": 0.1,
971	"sync": false
972	}
973	},
974	"line_linked": {
975	"enable": false,
976	"distance": 500,
977	"color": "#ffffff",
978	"opacity": 0.4,
979	"width": 2
980	},
981	"move": {
982	"enable": true,
983	"speed": ' . $speed . ',
984	"direction": "' . $move_direction . '",
985	"random": false,
986	"straight": false,
987	"out_mode": "out",
988	"bounce": false,
989	"attract": {
990	"enable": false,
991	"rotateX": 600,
992	"rotateY": 1200
993	}
994	}
995	},
996	"interactivity": {
997	"detect_on": "canvas",
998	"events": {
999	"onhover": {
1000	"enable": false,
1001	"mode": "bubble"
1002	},
1003	"onclick": {
1004	"enable": false,
1005	"mode": "repulse"
1006	},
1007	"resize": true
1008	},
1009	"modes": {
1010	"grab": {
1011	"distance": 400,
1012	"line_linked": {
1013	"opacity": 0.5
1014	}
1015	},
1016	"bubble": {
1017	"distance": 400,
1018	"size": 4,
1019	"duration": 0.3,
1020	"opacity": 1,
1021	"speed": 3
1022	},
1023	"repulse": {
1024	"distance": 200,
1025	"duration": 0.4
1026	},
1027	"push": {
1028	"particles_nb": 4
1029	},
1030	"remove": {
1031	"particles_nb": 2
1032	}
1033	}
1034	},
1035	"retina_detect": true
1036	}',
1037	'nyan_cat' => '{
1038	"particles": {
1039	"number": {
1040	"value": ' . $number . ',
1041	"density": {
1042	"enable": false,
1043	"value_area": 800
1044	}
1045	},
1046	"color": {
1047	"value": "' . $color . '"
1048	},
1049	"shape": {
1050	"type": "' . $shape_type . '",
1051	"stroke": {
1052	"width": 0,
1053	"color": "#000000"
1054	},
1055	"polygon": {
1056	"nb_sides": 5
1057	}
1058	},
1059	"opacity": {
1060	"value": 0.5,
1061	"random": false,
1062	"anim": {
1063	"enable": false,
1064	"speed": 1,
1065	"opacity_min": 0.1,
1066	"sync": false
1067	}
1068	},
1069	"size": {
1070	"value": ' . $size . ',
1071	"random": true,
1072	"anim": {
1073	"enable": false,
1074	"speed": 40,
1075	"size_min": 0.1,
1076	"sync": false
1077	}
1078	},
1079	"line_linked": {
1080	"enable": false,
1081	"distance": 150,
1082	"color": "#ffffff",
1083	"opacity": 0.4,
1084	"width": 1
1085	},
1086	"move": {
1087	"enable": true,
1088	"speed": ' . $speed . ',
1089	"direction": "' . $move_direction . '",
1090	"random": false,
1091	"straight": true,
1092	"out_mode": "out",
1093	"bounce": false,
1094	"attract": {
1095	"enable": false,
1096	"rotateX": 600,
1097	"rotateY": 1200
1098	}
1099	}
1100	},
1101	"interactivity": {
1102	"detect_on": "canvas",
1103	"events": {
1104	"onhover": {
1105	"enable": false,
1106	"mode": "grab"
1107	},
1108	"onclick": {
1109	"enable": false,
1110	"mode": "repulse"
1111	},
1112	"resize": true
1113	},
1114	"modes": {
1115	"grab": {
1116	"distance": 200,
1117	"line_linked": {
1118	"opacity": 1
1119	}
1120	},
1121	"bubble": {
1122	"distance": 400,
1123	"size": 40,
1124	"duration": 2,
1125	"opacity": 8,
1126	"speed": 3
1127	},
1128	"repulse": {
1129	"distance": 200,
1130	"duration": 0.4
1131	},
1132	"push": {
1133	"particles_nb": 4
1134	},
1135	"remove": {
1136	"particles_nb": 2
1137	}
1138	}
1139	},
1140	"retina_detect": true
1141	}'
1142	];
1143	}
1144	}