@neutrinoparticles/js-v1.0 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md ADDED
@@ -0,0 +1,5 @@
1
+ # Changelog
2
+
3
+ ## [1.0.0] - 2026-03-03
4
+
5
+ - Initial release as `@neutrinoparticles/js-v1.0` (corresponds to `neutrinoparticles` v2.0.3)
package/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License (MIT)
2
+
3
+ Copyright (c) 2016 ymiroshnyk
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md ADDED
@@ -0,0 +1,275 @@
1
+ # neutrinoparticles.js
2
+
3
+ The library allows you to load and simulate particle effects exported from [NeutrinoParticles Editor](https://neutrinoparticles.com/).
4
+
5
+ This is basically a core library which can update particle effect and give you instructions on how to render this effect.
6
+
7
+ ## Available integrations
8
+
9
+ Below is a list of addons for most popular engines/frameworks. These addons provide integrated renderers for `neutrinoparticles.js`.
10
+
11
+ |||
12
+ |-------------|-------------|
13
+ | [![neutrinoparticles.pixi](img/integration_pixijs.png)](https://gitlab.com/neutrinoparticles/neutrinoparticles.pixi.js) | Full integration. Supports PIXI.js v4 and v5. |
14
+ | [![neutrinoparticles.phaser](img/integration_phaser.png)](https://gitlab.com/neutrinoparticles/neutrinoparticles.phaser) | Full integration. Supports Phaser3 only. |
15
+ |||
16
+
17
+ ## Installation
18
+
19
+ You can install the package with `npm`:
20
+ ```
21
+ > npm install neutrinoparticles.js
22
+ ```
23
+ Or download pre-built package at [Releases](https://gitlab.com/neutrinoparticles/neutrinoparticles.js/-/releases) page. There are [UMD](https://www.davidbcalhoun.com/2014/what-is-amd-commonjs-and-umd/) packages which you can use in any environment.
24
+
25
+ ## Introduction
26
+
27
+ [NeutrinoParticles Editor](https://neutrinoparticles.com/) exports effect to `.js` file. This file contains a class of the effect with all algorithms and data necessary to simulate it. This class is a **model** of effect. The model is constant object, and you need only one model to have many instances of this effect in your application.
28
+
29
+ This library contains shared code which exported effects use. In particular, mathematics, turbulence computations etc.
30
+
31
+ To use the library in your application, first of all, you need to get access to it. Depending on your environment:
32
+ * HTML
33
+ ```html
34
+ <script src="path/to/neutrinoparticles.js/dist/neutrinoparticles.umd.js"></script>
35
+ ```
36
+ * node.js
37
+ ```javascript
38
+ var Neutrino = require('neutrinoparticles.js')
39
+ ```
40
+ * ES6
41
+ ```javascript
42
+ import * as Neutrino from 'neutrinoparticles.js'
43
+ ```
44
+
45
+ ## Main Context
46
+ Main context is a main interface of the library and a shared object for all effects in the application.
47
+
48
+ To create it:
49
+ ```javascript
50
+ let neutrino = new Neutrino.Context();
51
+ ```
52
+
53
+ ## Loading effect model
54
+ Files of effects exported by the Editor has to be evaluated to obtain JS objects that can be used in the application.
55
+
56
+ You can load effect model using main context. It will use HTTP request to load effect by path. And in this case it will make all evaluating by itself and return you ready to use object:
57
+ ```javascript
58
+ neutrino.loadEffect('path/to/effect.js', function(effectModel) {
59
+ // on success
60
+ },
61
+ function() {
62
+ // on fail
63
+ });
64
+ ```
65
+
66
+ Or you can somehow load effect file by yourself (or unpack from zip, for example), and when you have a text of the file you can use this simple evaluating function:
67
+ ```javascript
68
+ function evalEffectModel(effectSource) {
69
+ let wrappedScript =
70
+ "(function(context) {\n" +
71
+ effectSource +"\n" +
72
+ "return new NeutrinoEffect(ctx);\n" +
73
+ "})(neutrino);";
74
+ return eval(wrappedScript);
75
+ }
76
+ ```
77
+
78
+ ## Creating effect instances
79
+ When the effect model is loaded, you can create instances of this effect. Each instance is actual entity of effect. It is a state of effect. It has position, rotation and it can be updated (simulated) by time.
80
+
81
+ Depending on what kind of rendering you want to perform, you can create an instance for:
82
+
83
+ Canvas rendering:
84
+ ```javascript
85
+ let effect = effectModel.createCanvas2DInstance(
86
+ position, // Array [x, y, z] for starting position of the effect
87
+ rotation, // Array [x, y, z, w] for quaternion representing starting rotation
88
+ { // options
89
+ paused: false, // Effect paused on start?
90
+ generatorsPaused: false // Generators of the effect paused on start?
91
+ });
92
+ ```
93
+ or WebGL rendering:
94
+ ```javascript
95
+ let effect = effectModel.createWGLInstance(
96
+ position,
97
+ rotation,
98
+ renderBuffer, // Buffer to accept constructed geometry for particles
99
+ options
100
+ );
101
+ ```
102
+
103
+ ## Updating effect
104
+ You would probably want to update the effect on each frame of your application. And on each update you can set up new position and rotation of the effect:
105
+ ```javascript
106
+ effect.update(
107
+ timeInSeconds, // time to simulate
108
+ position, // (optional) new position, if changed
109
+ rotation // (optional) new rotation, if changed
110
+ );
111
+ ```
112
+
113
+ ## Rendering effect
114
+ Rendering of effect is out of scope of this library. This is because any graphical framework or engine requires custom deep integration and there is no any unified solution.
115
+
116
+ However, you can find reference renderers in `/samples` folder of the repository. There are Canvas and WebGL renderers. They are designed for clean HTML5 environment and can be used as standalone renderers on a web site. Or you can refer to them for creating a custom renderer for your graphical framework.
117
+
118
+ > For PIXI.js you can use [neutrinoparticles.pixi.js](https://gitlab.com/neutrinoparticles/neutrinoparticles.pixi.js) renderer.
119
+
120
+ ## Position and Rotation
121
+
122
+ Effects accept position and rotation on creating and update.
123
+
124
+ Position vector is represented by 3D array [x, y, z].
125
+
126
+ Rotation is a quaternion represented by 4D array [x, y, z, w].
127
+
128
+ You can make a rotation quaternion by function:
129
+ ```javascript
130
+ neutrino.axisangle2quat_(
131
+ [x, y, z], // rotation axis
132
+ angle // rotation angle in degrees
133
+ );
134
+ ```
135
+ it will make a quaternion by rotating arout an axis.
136
+
137
+ > To react on rotation, effect has to be correcly prepared in the Editor. See "Apply emitter's rotation" switch in Emitter Guide in the Editor.
138
+
139
+ ## Using turbulence (or noise)
140
+
141
+ You need to initialize noise texture before simulating effects which use it. Otherwise, your effects will be without any noise (or turbulence).
142
+
143
+ You have two options to make that: to generate or to download it.
144
+
145
+ ### Generating noise
146
+
147
+ Generating noise is iterative process and you can spread it for many application frames (to render some progress bar, for example).
148
+
149
+ Below is an example function that generates the noise in one loop:
150
+ ```javascript
151
+ function generateNoise() {
152
+ let noiseGenerator = new neutrino.NoiseGenerator();
153
+ while (!noiseGenerator.step()) { // approx. 5,000 steps
154
+ // you can use 'noiseGenerator.progress' to get generating progress from 0.0 to 1.0
155
+ }
156
+ }
157
+ ```
158
+ Of course, this function will block execution of the script until finished. So, it's up to you how to make it executed over many frames if necessary.
159
+
160
+ On modern devices (and mobile as well) above function will be finished in up to 2 seconds.
161
+
162
+ > Please, pay attention to `NoiseGenerator` object. It has to be out of scope after noise is generated to allow GC to free allocated memory.
163
+
164
+ ### Download noise
165
+
166
+ In case you don't want to generate noise texture for a some reason, you can distribute it pre-computed in a binary file with your application. This file is `/bin/neutrinoparticles.noise.bin` in the repository.
167
+
168
+ Then download and initialize with:
169
+ ```javascript
170
+ neutrino.initializeNoise(
171
+ "/path/to/noise/directory/", // path to a directory where "neutrinoparticles.noise.bin" is located
172
+ function() {}, // success callback
173
+ function() {}, // fail callback
174
+ );
175
+ ```
176
+ HTTP request will be used to download the file. It's size is 768Kb.
177
+
178
+ ## Restart effect
179
+
180
+ To completely restart the effect:
181
+
182
+ ```javascript
183
+ effect.restart(
184
+ [x, y, z], // (optional) new position, if changed
185
+ [x, y, z, w] // (optional) new rotation, if changed
186
+ );
187
+ ```
188
+
189
+ ## Instant effect position change (teleporting)
190
+
191
+ When you move your effect by changing it's position or rotation on each update, the effect is moved linearly. And even if it tightly generates particles, there will be a trail of particles from previous frame position to the new one.
192
+
193
+ In case, you want to change position instantly (teleport it), you need to reset position:
194
+ ```javascript
195
+ effect.resetPosition(
196
+ [x, y, z], // new effect's position (pass null if you don't want to reset position)
197
+ [x, y, z, w] // new effect's rotation quaternion (pass null if you don't want to reset rotation)
198
+ );
199
+ ```
200
+
201
+ ## Number of particles
202
+
203
+ You can request total number of alive particles in topmost emitters (not attached to other emitters):
204
+
205
+ ```javascript
206
+ let numParticles = effect.getNumParticles();
207
+ ```
208
+
209
+ Or request number of particles in a single emitter by name (note underscore before name):
210
+
211
+ ```javascript
212
+ let numEmitterParticles = effect._YourEmitterName.getNumParticles();
213
+ ```
214
+
215
+ ## Using pause
216
+ There are two different kinds of pause for effect:
217
+
218
+ 1. Pause for whole effect. When all particles freeze and nothing else is generated:
219
+
220
+ ```javascript
221
+ effect.pauseAllEmitters();
222
+ ...
223
+ let isPaused = effect.areAllEmittersPaused();
224
+ ...
225
+ effect.unpauseAllEmitters();
226
+ ```
227
+
228
+ 2. Generators pause. When already generated particles continue to live but new particles are not generated:
229
+
230
+ ```javascript
231
+ effect.pauseGeneratorsInAllEmitters();
232
+ ...
233
+ let isGeneratorsPaused = effect.areGeneratorsInAllEmittersPaused();
234
+ ...
235
+ effect.unpauseGeneratorsInAllEmitters();
236
+ ```
237
+
238
+ ## Changing emitter's properties
239
+
240
+ You can control exposed emitter properties from your application. Any emitter property added on Emitter Scheme or Emitter Guide in the Editor is exposed in exported effect.
241
+
242
+ To change properties in a single emitter, you can access them directly from effect instance (note underscores before names):
243
+ ```javascript
244
+ effect._EmitterName._YourFloatPropertyName = 10;
245
+ effect._EmitterName._YourVector2PropertyName = [10, 20];
246
+ effect._EmitterName._YourVector3PropertyName = [10, 20, 30];
247
+ effect._EmitterName._YourRotationPropertyName = neutrino.axisangle2quat_([0, 1, 0], 45);
248
+ ```
249
+
250
+ To change properties with a given names for all topmost emitters:
251
+ ```javascript
252
+ effect.setPropertyInAllEmitters("YourFloatPropertyName", 10);
253
+ effect.setPropertyInAllEmitters("YourVector2PropertyName", [10, 20]);
254
+ effect.setPropertyInAllEmitters("YourVector3PropertyName", [10, 20, 30]);
255
+ effect.setPropertyInAllEmitters("YourRotationPropertyName", neutrino.axisangle2quat_([0, 1, 0], 45));
256
+ ```
257
+
258
+ For example, to control particles generating rate from your application:
259
+ 1. In the Editor, in `Emitter Guide` window, in `Generation` section change type of `Periodic rate` to `Emitter property`
260
+
261
+ ![EmitterProps1](img/emitter_props_eg01.png)
262
+
263
+ 2. Set up property name to `MyParticlesPerSecond`
264
+
265
+ ![EmitterProps2](img/emitter_props_eg02.png)
266
+
267
+ 3. From `Emitters` window remember emitter name to access your property
268
+
269
+ ![EmitterProps3](img/emitter_props_eg03.png)
270
+
271
+ 4. Export effect, and after loading in your application you can change the property:
272
+
273
+ ```javascript
274
+ effect._DefaultEmitter._MyParticlesPerSecond = 100;
275
+ ```
Binary file