Skip to content

Commit

Permalink
add ability to mix shapes/images
Browse files Browse the repository at this point in the history
- refactor a bunch of functions
- fix some performance/loop errors
  • Loading branch information
simeydotme committed Mar 18, 2020
1 parent 44e42d5 commit 197ff5f
Show file tree
Hide file tree
Showing 11 changed files with 671 additions and 621 deletions.
30 changes: 30 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
# Change log
## 1.1.0

- shapes and images can now be used together in an array to mix basic shapes and custom images;
```js
let mySparticles = new Sparticles( el, {

shape: ["circle", "image"],
imageUrl: "./snowflake.png"

})
```

- fixed some performance / looping errors
- refactored/renamed a lot of prototype methods

- added the ability to write custom shapes in the off-chance that's
better/easier than using a custom svg-image
```js
// first make sure the Sparticles is ready in page.
// then you can add a custom offScreenCanvas before initialising.
Sparticles.prototype.offScreenCanvas.doge = function(style, color, canvas) {
// code for custom shape here, access to "this" object
// which is the Sparticles prototype.
};
// then initialise your sparticles instance with the custom shape
let mySparticles = new Sparticles( el, { shape: "doge" });


```
9 changes: 5 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -178,16 +178,16 @@ option | type | default
**[maxAlpha](#maxAlpha)** | `Number` | `1` | maximum alpha value of every particle
**[minSize](#minSize)** | `Number` | `1` | minimum size of every particle
**[maxSize](#maxSize)** | `Number` | `10` | maximum size of every particle
**[style](#style)** | `String` | `fill` | fill style of particles (one of; "fill", "stroke" or "both")
**[bounce](#bounce)** | `Boolean` | `false` | should the particles bounce off edge of canvas
**[drift](#drift)** | `Number` | `1` | the "driftiness" of particles which have a horizontal/vertical direction
**[glow](#glow)** | `Number` | `0` | the glow effect size of each particle
**[twinkle](#twinkle)** | `Boolean` | `false` | particles to exhibit an alternative alpha transition as "twinkling"
**[style](#style)** | `String` | `fill` | fill style of particles (one of; "fill", "stroke" or "both")
**[shape](#shape)** | `String`/`Array` | `circle` | shape of particles (any of; circle, square, triangle, diamond, line, image) or "random"
**[color](#color)** | `String`/`Array` | `random` | css color as string, or array of color strings (can also be "random")
**[randomColor](#randomColor)** | `Function` | `randomHsl()` | function for returning a random color when the color is set as "random"
**[randomColorCount](#randomColorCount)** | `Function` | `randomHsl()` | function for returning a random color when the color is set as "random"
**[shape](#shape)** | `String`/`Array` | `circle` | shape of particles (any of; circle, square, triangle, diamond, line, image) or "random"
**[imageUrl](#imageUrl)** | `String`/`Array` | | if shape is "image", define an image url (can be data-uri, should be square (1:1 ratio))
**[imageUrl](#imageUrl)** | `String`/`Array` | | if shape is "image", define an image url (can be data-uri, **should be square (1:1 ratio)**)

---

Expand Down Expand Up @@ -411,8 +411,9 @@ particle shape from an image when combined with `imageUrl`](#imageUrl).
Determine the custom image to be used for all the particles.
If an array of urls (`[ "http://my.image/shape.png", "http://my.svg/shape.svg" ]`) is given, then each particle
will be assigned a random image as it's shape from the array.
<sup>**This image should be a square (1:1)**</sup>

This only applies [if the `shape` is set to `"image"`](#shape).
`imageUrl` only has an effect [if a `shape` in the array is; `"image"`](#shape).

# methods

Expand Down
Loading

0 comments on commit 197ff5f

Please sign in to comment.