Tint function not working on image

Processing Coding Questions
1

Hello everyone! Brand new here. :slight_smile: 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.

// 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
1 Like
2

"DVD_logo.svg.png"

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

3

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

4

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

2 Likes
5

Well done!

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

1 Like
6

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. )

2 Likes
7

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?

1 Like
8

Hello @crendon,

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

Example on website:

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:

  // 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

Have fun!

:)

1 Like