# Tint function not working on image

**URL:** <https://discourse.processing.org/t/tint-function-not-working-on-image/45763>\
**Category:** Coding Questions\
**Created:** [February 14, 2025, 9:35pm UTC](https://discourse.processing.org/t/tint-function-not-working-on-image/45763 "2025-02-14T21:35:09Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![crendon](https://avatars.discourse-cdn.com/v4/letter/c/b5a626/32.png) [@crendon](https://discourse.processing.org/u/crendon)\
**Post date:** [February 14, 2025, 9:35pm UTC](https://discourse.processing.org/t/tint-function-not-working-on-image/45763/1 "2025-02-14T21:35:09Z")

</div>

Hello everyone! Brand new here. 🙂 I am doing the DVD Logo bounce on screen. Everything works except the changing of the color of the image.

The image is a PNG. No matter what I try it just stays black. This is what I have so far. What am I missing ? Thanks for the help.

```auto
// initialize variables 

float x;
float y;
float xspeed;
float yspeed;
PImage logo;
float r, g, b; //variables for when logo hits edge 

// END initialize variables 

void setup() {
  size(800, 600);
  logo = loadImage("DVD_logo.svg.png");
  // set variables
  x = random(width);
  y = random(height);
  xspeed = 5;
  yspeed = 5;
  r = random(255);
  g = random(255);
  b = random(255);
  // END set variables
  
}

void draw() {
  background(0);
  logo.resize(200, 0); //resize logo. having 0 in a spot contrains image to its proportions
  tint(r, g, b);
  image(logo, x, y);
  x = x + xspeed; //move across 
  y = y + yspeed; // move down
  // END circle
  
  
//bounce on corners
if(x + logo.width >= width) {
  xspeed = -xspeed;
  x = width - logo.width;
 } else if (x <=0) {
   xspeed = -xspeed;
   x = 0;
 }
 
 if(y + logo.height >= height) {
  yspeed = -yspeed;
  y = height - logo.height;
 } else if (y <=0) {
   yspeed = -yspeed;
   y = 0;
 }
   
} // closes the DRAW function

```

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [February 14, 2025, 10:27pm UTC](https://discourse.processing.org/t/tint-function-not-working-on-image/45763/2 "2025-02-14T22:27:35Z")

</div>

`"DVD_logo.svg.png"`

Try changing the fileName to ‘DVD\_logo.png’ (drop the .svg). That seems to work on my system.

---

<div class="post-metadata">

**Author:** ![crendon](https://avatars.discourse-cdn.com/v4/letter/c/b5a626/32.png) [@crendon](https://discourse.processing.org/u/crendon)\
**Post date:** [February 15, 2025, 1:02am UTC](https://discourse.processing.org/t/tint-function-not-working-on-image/45763/3 "2025-02-15T01:02:53Z")

</div>

thanks for the tip, but sadly that didn’t work on my end. I am not sure what is happening 😢

---

<div class="post-metadata">

**Author:** ![crendon](https://avatars.discourse-cdn.com/v4/letter/c/b5a626/32.png) [@crendon](https://discourse.processing.org/u/crendon)\
**Post date:** [February 15, 2025, 1:26am UTC](https://discourse.processing.org/t/tint-function-not-working-on-image/45763/4 "2025-02-15T01:26:24Z")

</div>

I have found the solution.

The image mode for that PNG file was set to greyscale. I went in Photoshop, changed the image mode to RGB, and colored it, and it worked.

Thank you for all those who took the time to try to help me.

-Carlos

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 15, 2025, 8:14am UTC](https://discourse.processing.org/t/tint-function-not-working-on-image/45763/5 "2025-02-15T08:14:33Z")

</div>

Well done!

> [@crendon](#):
>
> ` logo.resize(200, 0);`

this line is fairly costly (time consuming) for the CPU. I recommend to move it into setup(): then it runs only once.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 15, 2025, 8:20am UTC](https://discourse.processing.org/t/tint-function-not-working-on-image/45763/6 "2025-02-15T08:20:12Z")

</div>

> [@crendon](#):
>
> ```auto
> if (x <=0) {
> xspeed = -xspeed;
> x = 0;
> }
> 
> ```

This can be discussed.

You set `x=0` here which is good, but your `if`-clause checks for `<=0` so the “0” is still in the area where we change the direction. This can lead to a dead lock at the screen border (x==0) or stuttering. Better test for `if(x<0)` then x==0 is not in the range.

Also you can say `xspeed = abs(xspeed);` which makes it always positive, whereas `xspeed = -xspeed;` can switch back and forth between negative and positive.

(In theory this applies for all 4 screen borders in your code. Here you could say `xspeed = -1*abs(xspeed);` which gives also a constant result and can not switch back and forth between negative and positive. )

---

<div class="post-metadata">

**Author:** ![crendon](https://avatars.discourse-cdn.com/v4/letter/c/b5a626/32.png) [@crendon](https://discourse.processing.org/u/crendon)\
**Post date:** [February 15, 2025, 9:07pm UTC](https://discourse.processing.org/t/tint-function-not-working-on-image/45763/7 "2025-02-15T21:07:49Z")

</div>

Thank you. I have done this. Makes sense.

I am a beginner… just doing this to help teach my students (principal made me the robotics/coding teacher, because old one retired, and my knowledge is not much) … on that note , what is java vs javascript?

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [February 15, 2025, 10:08pm UTC](https://discourse.processing.org/t/tint-function-not-working-on-image/45763/8 "2025-02-15T22:08:14Z")

</div>

Hello @crendon,

I also teach young programmers and bouncing balls come up often.

Example on website:

> **[Bounce / Examples](https://processing.org/examples/bounce.html)**
>
> When the shape hits the edge of the window, it reverses its direction.

I will often write code that is longer for clarity and readability.

I expanded and modified the test for boundary conditions (original in code linked above) here:

```auto
  // Test to see if the shape exceeds the boundaries of the screen
  // And set direction explicitly
  
  if (xpos > width-rad)
    xdirection = -1;
  else if (xpos < rad) 
    xdirection = 1;
    
  if (ypos > height-rad)
    ydirection = -1;
  else if (ypos < rad)
    ydirection = 1;

```

Readability, optimization and correctness is another topic (but may be going off topic):  
_[Should a developer aim for readability or performance first? - Stack Overflow](https://stackoverflow.com/questions/183201/should-a-developer-aim-for-readability-or-performance-first)_

Have fun!

`:)`