# How do I tint at 2D shape?

**URL:** <https://discourse.processing.org/t/how-do-i-tint-at-2d-shape/25727>\
**Category:** Beginners\
**Created:** [November 26, 2020, 1:26pm UTC](https://discourse.processing.org/t/how-do-i-tint-at-2d-shape/25727 "2020-11-26T13:26:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Post date:** [November 26, 2020, 1:26pm UTC](https://discourse.processing.org/t/how-do-i-tint-at-2d-shape/25727/1 "2020-11-26T13:26:00Z")

</div>

I tried tinting with tint(); but that only works with images, what should I do?

---

<div class="post-metadata">

**Author:** ![noel](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/noel/32/213_2.png) [@noel](https://discourse.processing.org/u/noel)\
**Post date:** [November 26, 2020, 3:41pm UTC](https://discourse.processing.org/t/how-do-i-tint-at-2d-shape/25727/2 "2020-11-26T15:41:32Z")

</div>

Do you mean just the color, not an image?

```auto
let fade_index = 255;

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
  fill(255, 0, 0, fade_index);
  circle(width/2, height/2, 100);
  fade_index--;
  if(fade_index == 0) fade_index = 255;
}

```

---

<div class="post-metadata">

**Author:** ![olaf000olaf](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/olaf000olaf/32/11295_2.png) [@olaf000olaf](https://discourse.processing.org/u/olaf000olaf)\
**Post date:** [November 26, 2020, 5:11pm UTC](https://discourse.processing.org/t/how-do-i-tint-at-2d-shape/25727/3 "2020-11-26T17:11:08Z")

</div>

[quote=“noel, post:2, topic:25727”]  
`fill(255, 0, 0, fade_index);`  
[/quote  
Thank you so much, I’ve been sitting at this problem for some time. On the p5 website it doesn’t explain what alpha changes, I should have tried. I’m still new to this \<3