Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alterebro/p5.fillgradient
Fill shapes in p5.js with Linear, Radial and Conic Gradients.
https://github.com/alterebro/p5.fillgradient
addon conic fill gradient linear p5 p5-js p5js processing radial
Last synced: about 2 months ago
JSON representation
Fill shapes in p5.js with Linear, Radial and Conic Gradients.
- Host: GitHub
- URL: https://github.com/alterebro/p5.fillgradient
- Owner: alterebro
- License: mit
- Created: 2022-03-22T19:50:45.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-31T18:54:58.000Z (2 months ago)
- Last Synced: 2024-10-31T19:27:50.783Z (2 months ago)
- Topics: addon, conic, fill, gradient, linear, p5, p5-js, p5js, processing, radial
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/p5.fillgradient
- Size: 291 KB
- Stars: 7
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# p5.fillGradient
> Fill shapes in [p5.js](http://p5js.org/) with **Linear, Radial and Conic Gradients**.
**p5.fillGradient** enables shape filling with Linear, Radial and Conic Gradients instead of plain colours in your [p5.js](http://p5js.org/) sketch.
## Install
Download the script and add it to your web document along with the p5.js library.
```html
```
They are both available on NPM:
```html
```
## Usage
**p5.fillGradient** exposes the `fillGradient()` function into your p5js sketch and sets the current fill style with the parameters defined by the user once it is called.
### `fillGradient(type, properties, context)`
#### — `type`
`String` with one of these values: *linear*, *radial* or *conic*. It defaults to *linear*. Be aware that browser support for *conic* gradients is still poor and not fully adopted by all major browsers. More info → [Can I use? CanvasRenderingContext2D API: createConicGradient](https://caniuse.com/mdn-api_canvasrenderingcontext2d_createconicgradient)
```js
// i.e:
fillGradient('linear',...
```
#### — `properties`
`Object` (Optional) with the following keys:
* **`from`** : *`Array [x, y, (radius | angle)]`*. Starting x and y point absolute coordinates. Radial and Conic gradients add a third value, `radius` / `angle` (expressed in degrees) respectively.
* **`to`** : *`Array [x, y, (radius)]`*. Ending x and y point coordinates.
* **`steps`** : *`Array`*. Each array item is either an *`Array [p5Color Object, stopAt]`* or a *`p5Color Object`* that will distribute stopping steps equally
```js
// i.e:
('linear', {
'from' : [20, 20], // starting point [x, y] coords
'to' : [580, 580], // ending point [x, y] coords
'steps' : [
[ color(255), 0 ], // p5Color Object, stopAt (0-1)
[ color(0, 96, 164), .25 ],
[ color(0, 128, 196), .75 ],
[ color(0), 1 ]
]
})
```
#### — `context`
`Object (drawingContext)` (Optional)
## Examples:
### Linear Gradient
```js
fillGradient('linear', {
from : [0, 0], // x, y : Coordinates
to : [400, 400], // x, y : Coordinates
steps : [
color(255),
color(0, 96, 164),
color(0)
] // Array of p5.color objects or arrays containing [p5.color Object, Color Stop (0 to 1)]
});
```
### Radial Gradient
```js
fillGradient('radial', {
from : [200, 200, 0], // x, y, radius
to : [200, 200, 200], // x, y, radius
steps : [
color(255),
color(0, 96, 164),
color(0)
] // Array of p5.color objects or arrays containing [p5.color Object, Color Stop (0 to 1)]
});
```
### Conic Gradient
```js
fillGradient('conic', {
from : [200, 200, 0], // x, y, angle(degrees)
steps : [
color(255),
color(0, 96, 164),
color(0)
] // Array of p5.color objects or arrays containing [p5.color Object, Color Stop (0 to 1)]
});
```
---
— [@alterebro](https://twitter.com/alterebro)