Skip to content

Commit 9448112

Browse files
matteobrunimatteobruni
committed
feat: added squircle shape
1 parent 35aa461 commit 9448112

26 files changed

Lines changed: 610 additions & 0 deletions

‎bundles/all/package.dist.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@
171171
"@tsparticles/shape-rounded-polygon": "4.0.0-alpha.26",
172172
"@tsparticles/shape-rounded-rect": "4.0.0-alpha.26",
173173
"@tsparticles/shape-spiral": "4.0.0-alpha.26",
174+
"@tsparticles/shape-squircle": "4.0.0-alpha.26",
174175
"@tsparticles/updater-gradient": "4.0.0-alpha.26",
175176
"@tsparticles/updater-orbit": "4.0.0-alpha.26",
176177
"tsparticles": "4.0.0-alpha.26"

‎bundles/all/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,7 @@
179179
"@tsparticles/shape-rounded-polygon": "workspace:4.0.0-alpha.26",
180180
"@tsparticles/shape-rounded-rect": "workspace:4.0.0-alpha.26",
181181
"@tsparticles/shape-spiral": "workspace:4.0.0-alpha.26",
182+
"@tsparticles/shape-squircle": "workspace:4.0.0-alpha.26",
182183
"@tsparticles/updater-gradient": "workspace:4.0.0-alpha.26",
183184
"@tsparticles/updater-orbit": "workspace:4.0.0-alpha.26",
184185
"tsparticles": "workspace:4.0.0-alpha.26"

‎bundles/all/src/index.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,7 @@ export async function loadAll(engine: Engine): Promise<void> {
9595
{ loadRoundedPolygonShape },
9696
{ loadRoundedRectShape },
9797
{ loadSpiralShape },
98+
{ loadSquircleShape },
9899

99100
{ loadEmittersShapeCanvas },
100101
{ loadEmittersShapePath },
@@ -180,6 +181,7 @@ export async function loadAll(engine: Engine): Promise<void> {
180181
import("@tsparticles/shape-rounded-polygon"),
181182
import("@tsparticles/shape-rounded-rect"),
182183
import("@tsparticles/shape-spiral"),
184+
import("@tsparticles/shape-squircle"),
183185

184186
import("@tsparticles/plugin-emitters-shape-canvas"),
185187
import("@tsparticles/plugin-emitters-shape-path"),
@@ -271,6 +273,7 @@ export async function loadAll(engine: Engine): Promise<void> {
271273
loadRoundedPolygonShape(e),
272274
loadRoundedRectShape(e),
273275
loadSpiralShape(e),
276+
loadSquircleShape(e),
274277
]);
275278
});
276279
}

‎demo/vanilla/app.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -196,6 +196,7 @@ app.use("/shape-path", express.static("./node_modules/@tsparticles/shape-path"))
196196
app.use("/shape-rounded-polygon", express.static("./node_modules/@tsparticles/shape-rounded-polygon"));
197197
app.use("/shape-rounded-rect", express.static("./node_modules/@tsparticles/shape-rounded-rect"));
198198
app.use("/shape-spiral", express.static("./node_modules/@tsparticles/shape-spiral"));
199+
app.use("/shape-squircle", express.static("./node_modules/@tsparticles/shape-squircle"));
199200
app.use("/stats.ts", express.static("./node_modules/stats.ts/"));
200201

201202
app.get("/", function (req, res) {

‎demo/vanilla/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -164,6 +164,7 @@
164164
"@tsparticles/shape-rounded-rect": "workspace:4.0.0-alpha.26",
165165
"@tsparticles/shape-spiral": "workspace:4.0.0-alpha.26",
166166
"@tsparticles/shape-square": "workspace:4.0.0-alpha.26",
167+
"@tsparticles/shape-squircle": "workspace:4.0.0-alpha.26",
167168
"@tsparticles/shape-star": "workspace:4.0.0-alpha.26",
168169
"@tsparticles/shape-text": "workspace:4.0.0-alpha.26",
169170
"@tsparticles/simplex-noise": "workspace:4.0.0-alpha.26",

‎demo/vanilla/views/index.pug‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,7 @@ html(lang="en")
228228
script(src="/shape-rounded-polygon/tsparticles.shape.rounded-polygon.min.js")
229229
script(src="/shape-rounded-rect/tsparticles.shape.rounded-rect.min.js")
230230
script(src="/shape-spiral/tsparticles.shape.spiral.min.js")
231+
script(src="/shape-squircle/tsparticles.shape.squircle.min.js")
231232
script(src="/path-branches/tsparticles.path.branches.min.js")
232233
script(src="/path-brownian/tsparticles.path.brownian.min.js")
233234
script(src="/path-curves/tsparticles.path.curves.min.js")

‎pnpm-lock.yaml‎

Lines changed: 13 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎shapes/squircle/.browserslistrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
since 2021
2+
not dead

‎shapes/squircle/LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 Matteo Bruni
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.

‎shapes/squircle/README.md‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
[![banner](https://particles.js.org/images/banner3.png)](https://particles.js.org)
2+
3+
# tsParticles Squircle Shape
4+
5+
[![jsDelivr](https://data.jsdelivr.com/v1/package/npm/@tsparticles/shape-squircle/badge)](https://www.jsdelivr.com/package/npm/@tsparticles/shape-squircle)
6+
[![npmjs](https://badge.fury.io/js/@tsparticles/shape-squircle.svg)](https://www.npmjs.com/package/@tsparticles/shape-squircle)
7+
[![npmjs](https://img.shields.io/npm/dt/@tsparticles/shape-squircle)](https://www.npmjs.com/package/@tsparticles/shape-squircle) [![GitHub Sponsors](https://img.shields.io/github/sponsors/matteobruni)](https://github.com/sponsors/matteobruni)
8+
9+
[tsParticles](https://github.com/tsparticles/tsparticles) additional squircle shape.
10+
11+
## How to use it
12+
13+
### CDN / Vanilla JS / jQuery
14+
15+
The CDN/Vanilla version JS has one required file in vanilla configuration:
16+
17+
Including the `tsparticles.shape.squircle.min.js` file will export the function to load the shape:
18+
19+
```text
20+
loadSquircleShape
21+
```
22+
23+
### Usage
24+
25+
Once the scripts are loaded you can set up `tsParticles` and the shape like this:
26+
27+
```javascript
28+
(async () => {
29+
await loadSquircleShape(tsParticles);
30+
31+
await tsParticles.load({
32+
id: "tsparticles",
33+
options: {
34+
/* options */
35+
/* here you can use particles.shape.type: "squircle" */
36+
},
37+
});
38+
})();
39+
```
40+
41+
### ESM / CommonJS
42+
43+
This package is compatible also with ES or CommonJS modules, firstly this needs to be installed, like this:
44+
45+
```shell
46+
$ npm install @tsparticles/shape-squircle
47+
```
48+
49+
or
50+
51+
```shell
52+
$ yarn add @tsparticles/shape-squircle
53+
```
54+
55+
Then you need to import it in the app, like this:
56+
57+
```javascript
58+
const { tsParticles } = require("@tsparticles/engine");
59+
const { loadSquircleShape } = require("@tsparticles/shape-squircle");
60+
61+
(async () => {
62+
await loadSquircleShape(tsParticles);
63+
})();
64+
```
65+
66+
or
67+
68+
```javascript
69+
import { tsParticles } from "@tsparticles/engine";
70+
import { loadSquircleShape } from "@tsparticles/shape-squircle";
71+
72+
(async () => {
73+
await loadSquircleShape(tsParticles);
74+
})();
75+
```

0 commit comments

Comments
 (0)