https://infinity-souls.com/assets/js/infinity-souls.particle.js

1'use strict';
2var particleSystem = null;
3var stage = null;
4
5var canvasWidth = innerWidth * 1.2;
6var canvasHeight = innerHeight;
7
8var $canvas = $('#js-particle');
9
10$canvas.attr({
11  width: canvasWidth,
12  height: canvasHeight,
13});
14
15stage = new createjs.Stage('js-particle');
16
17particleSystem = new particlejs.ParticleSystem();
18
19stage.addChild(particleSystem.container);
20
21particleSystem.importFromJson({
22  bgColor: '#00000',
23  width: canvasWidth,
24  height: canvasHeight,
25  emitFrequency: pcFlg ? 70 : 24,
26  startX: canvasWidth / 2,
27  startXVariance: canvasWidth,
28  startY: canvasHeight * 0.98,
29  startYVariance: '148',
30  initialDirection: 36,
31  initialDirectionVariance: 360,
32  initialSpeed: '3.8',
33  initialSpeedVariance: '13',
34  friction: 0.0325,
35  accelerationSpeed: 0.164,
36  accelerationDirection: 287.1,
37  startScale: pcFlg ? 0.05 : 0.02,
38  startScaleVariance: 0.32,
39  finishScale: 0.03,
40  finishScaleVariance: 0.22,
41  lifeSpan: 86,
42  lifeSpanVariance: 500,
43  startAlpha: '1',
44  startAlphaVariance: '0',
45  finishAlpha: 0.95,
46  finishAlphaVariance: 0.41,
47  shapeIdList: ['blur_circle'],
48
49  startColor: {
50    hue: 32,
51    hueVariance: '32',
52    saturation: 100,
53    saturationVariance: 0,
54    luminance: 54,
55    luminanceVariance: 24,
56  },
57
58  blendMode: false,
59  alphaCurveType: '0',
60  VERSION: '1.0.0',
61});
62
63// フレームレートの設定
64createjs.Ticker.framerate = 50;
65// 定期的に呼ばれる関数を登録
66createjs.Ticker.addEventListener('tick', handleTick);
67
68function handleTick() {
69  // パーティクルの発生・更新
70  particleSystem.update();
71
72  // 描画を更新する
73  stage.update();
74}
75
76var onResizeParticle = function onResizeParticle() {
77  canvasWidth = innerWidth * 1.2;
78  canvasHeight = innerHeight;
79
80  $canvas.attr({
81    width: canvasWidth,
82    height: canvasHeight,
83  });
84
85  particleSystem.width = canvasWidth;
86  particleSystem.startX = canvasWidth / 2;
87  particleSystem.height = canvasHeight;
88  particleSystem.startXVariance = canvasWidth;
89  particleSystem.startY = canvasHeight * 0.98;
90  particleSystem.emitFrequency = pcFlg ? 70 : 27;
91  particleSystem.startScale = pcFlg ? 0.05 : 0.02;
92};
93
94$(window).on('resize', function () {
95  onResizeParticle();
96});