# Gradients on p5.js?

**URL:** <https://discourse.processing.org/t/gradients-on-p5-js/7555>\
**Category:** Coding Questions\
**Created:** [January 16, 2019, 2:45am UTC](https://discourse.processing.org/t/gradients-on-p5-js/7555 "2019-01-16T02:45:45Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![davidjj](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@davidjj](https://discourse.processing.org/u/davidjj)\
**Post date:** [January 16, 2019, 2:45am UTC](https://discourse.processing.org/t/gradients-on-p5-js/7555/1 "2019-01-16T02:45:45Z")

</div>

Gradients are a pretty standard feature of HTML5 canvas: [https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/createLinearGradient)

And using straight javascript (actually this example is typescript)/canvas I can create a gradient line like this:

```auto
export class GradientLine extends DrawableObject {

	cp1: ColorPoint; 
	cp2: ColorPoint;
	size: number; 

	constructor(cp1 : ColorPoint, cp2 : ColorPoint, size = 1) {
		super();
		this.cp1 = cp1;
		this.cp2= cp2;

		this.size = size;
	}

	draw(context : CanvasRenderingContext2D){

		let p1 = adjustPosition(context, this.cp1.position);
		let p2 = adjustPosition(context, this.cp2.position);

		var gradient = context.createLinearGradient(p1.x,p1.y,p2.x,p2.y);

		gradient.addColorStop(0, this.cp1.color.toString());
		gradient.addColorStop(1, this.cp2.color.toString());

		context.strokeStyle = gradient;
		context.lineWidth = this.size;

		context.beginPath();
		context.moveTo(p1.x, p1.y);
		context.lineTo(p2.x, p2.y);
		context.stroke();

	}

}

```

I’ve looked and the only thing similar is `lerpColor` - ([example here](https://p5js.org/examples/color-linear-gradient.html))but that would, in the instance that I’m doing, require me to write a function that presumably draws an individual point for every point along the line.

Am I right in understanding this? Or is there a way to apply a generic gradient?

---

<div class="post-metadata">

**Author:** ![figraham](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/figraham/32/4161_2.png) [@figraham](https://discourse.processing.org/u/figraham)\
**Post date:** [January 16, 2019, 6:46am UTC](https://discourse.processing.org/t/gradients-on-p5-js/7555/2 "2019-01-16T06:46:10Z")

</div>

Yeah pretty much the simplest way to get a gradient is `lerpColor()`. There’s no built in function for creating gradients but there’s plenty of [examples on how to write a function that does it](https://www.google.com/search?ei=pc8-XK6vA-zA0PEP1_eW8AM&q=gradient+site%3Ap5js.org&oq=gradient+site%3Ap5js.org&gs_l=psy-ab.3...4324.7296..7947...0.0..0.196.1166.7j4......0....1..gws-wiz.UphuLzGMM04).

Also check out [`rotate()`](https://p5js.org/reference/#/p5/rotate) as it makes diagonal gradients easier to create.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [January 19, 2019, 5:17am UTC](https://discourse.processing.org/t/gradients-on-p5-js/7555/3 "2019-01-19T05:17:01Z")

</div>

In addition to linear and radiant examples

- [https://p5js.org/examples/color-linear-gradient.html](https://p5js.org/examples/color-linear-gradient.html)
- [https://p5js.org/examples/color-radial-gradient.html](https://p5js.org/examples/color-radial-gradient.html)

…you might be interested in per-vertex coloring:

> <https://github.com/processing/p5.js/issues/2750#issuecomment-377291020>

---

<div class="post-metadata">

**Author:** ![davidjj](https://avatars.discourse-cdn.com/v4/letter/d/97f17d/32.png) [@davidjj](https://discourse.processing.org/u/davidjj)\
**Post date:** [January 26, 2019, 3:58am UTC](https://discourse.processing.org/t/gradients-on-p5-js/7555/4 "2019-01-26T03:58:13Z")

</div>

Here’s my solution for doing gradient lines. Pretty simple:

[https://editor.p5js.org/dwjohnston/sketches/JWwYv5fuI](https://editor.p5js.org/dwjohnston/sketches/JWwYv5fuI)