Code:

public void setup() 
{

PImage image1 = loadImage("a1.jpg");

size(900, 300);

image(image1,0,0);

noStroke();

noLoop();
}

public void draw()
{

  
  while(opacity<255)
  {
     opacity = opacity + 3;
     tint(255,opacity);
     image(image1,0,0);
     noTint();
//     delay(30);
    }
}

public void mousePressed()
{

background(210);

opacity = 0;

redraw();
}
 

Here in the above code I want an image to appear gradually by increasing its opacity, whenever mouse is clicked.

But when I run it and click the mouse, image appears suddenly rather than appearing gradually.I have tried
delay() also,but it also did not worked.

Plz help

Thanks,

Problem #1:

You need to define PImage image1; outside of setup(), or it'll not be available inside draw().

Problems #2:

What your code is doing, is drawing the image about 80 times before actually putting the result onto screen. The screen doesn't update whenever you call image(), but when draw() has finished a cycle. What you want to do is not possible with noLoop() you have to loop through draw multiple times.

Code:

PImage image1;
int opacity;

void setup()
{
  size(900,300);
  image1=loadImage("a1.jpg");
  noStroke();
  opacity=0;
}

void draw()
{
  background(0);
  if(opacity<255)
  {
    opacity=opacity+3;
  }
  tint(255,opacity);
  image(image1,0,0);
  noTint();
}