p5.fillGradient

> Fill shapes in p5.js 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 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.

$3

#### — 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

`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:

$3

`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)]
});
`

$3

`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)]
});
`

$3

`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