tint() PImage Android Mode

noel

Hi.

Code below does exactly what I want; fading picture into almost white. However it does fade always in Java mode it does not in Android mode, better to say I've only one image that does fade in Android mode. I've checked if the pictures have an alpha channel with GIMP and they do. How to generate images that will fade? This is driving me nuts. You can download my fading image here.

Any rescue?

(int i = 255;
boolean flag1;
PImage img;

void setup() {
  size (600, 600);
  background(255);
  img = loadImage("uyf.png");
  tint(255, 255); 
  image(img, 0, 0);
}

void draw() {  
  if (flag1){
  background(255);
  tint(255, i); 
  image(img, 0, 0); 
  i -= 6;
  if(i < 40) flag1 = false;
  }
}

void mousePressed(){
  flag1 = true;
}
)

noel

Well after a lot of head scratching l finaly found the solution. Take the picture to an editor like GIMP, select the whole image and give it a transparency of 5 or 10 %. Then it will fade in Android mode. Don't know if I have to report this as a bug.

jeremydouglass

Just to confirm: are you saying that a PNG image without alpha cannot be tinted with alpha in Android mode -- the file itself must already have alpha values, then it works?

If that is true then that sounds like a bug. I don't see any open issues already reported for tint() or alpha.

• https://github.com/processing/processing-android/issues

kfrajer

@noel I need permission to access your image. Make it available through other means plz.

In the meantime, I tested both JAVA2D and P2D and the tint works. I used two images

https://www.svgimages.com/james-dean-rebel-stencil.html
https://www.svgimages.com/horse-stand.html

Kf

//REFERENCES: https://forum.processing.org/two/discussion/26691/tint-pimage-android-mode#latest

//INSTRUCTIONS:
//         *-- Tap upper half of sketch to reset and start tint effect
//         *-- Tap lower half of sketch to switch images
//         *--
//         *--

//===========================================================================
// IMPORTS:

import android.app.Activity;
import android.content.Context;
import android.widget.FrameLayout;
//import android.app.Fragment;

import android.os.Environment;
import android.graphics.Color;
import android.widget.Toast;
import android.os.Looper;
import android.view.WindowManager;
import android.os.Bundle;
import android.view.ViewParent;
import android.view.ViewGroup;
import android.view.View;
import android.widget.RelativeLayout;
import android.view.LayoutInflater;
import android.R.string;



//===========================================================================
// FINAL FIELDS:


final String FN1="horse-stand-512x512.png";
final String FN2="james-dean-rebel-stencil-256x256.png";

// https://github.com/processing/processing-android/blob/master/core/src/processing/core/PConstants.java#L47
//final String RENDERER_DEF=JAVA2D;
final String RENDERER_DEF=P2D;

//===========================================================================
// GLOBAL VARIABLES:

Activity act;
Context mC;

int tintCtr = 255;
boolean flag1;
PImage img;
int cimg;

//===========================================================================
// PROCESSING DEFAULT FUNCTIONS:

void setup() {
  size (600, 600,RENDERER_DEF);
  orientation(PORTRAIT);

  background(255);
  cimg=0;
  LoadImageNow();
  tint(255, tintCtr); 
  image(img, 0, 0);


  act = this.getActivity();
  Looper.prepare();

  textAlign(CENTER, CENTER);
  rectMode(CENTER);

  fill(255);
  noStroke();
  textSize(14);
}

void draw() {  
  background(255);
  tint(255, tintCtr); 
  image(img, 0, 0);

  if (flag1) {
    if (frameCount%15==0) {
      tintCtr -= 6;     
    }

    if (tintCtr < 40) 
      flag1 = false;
  } 

  fill(250, 155, 20, 100);
  rect(width>>1, height*0.95, 3*width>>2, height*0.1);
  fill(0);
  if (flag1)
    text("Current tint "+tintCtr, width>>2, height*0.95);
  else
    text("Tap upper half to restart\n@"+RENDERER_DEF, width>>1, height*0.95);
}

void mouseReleased() {

  if (mouseY<height>>1) {
    flag1 = !flag1;

    if (flag1) tintCtr=255;
  } else {
    cimg=(cimg+1)%2;
    LoadImageNow();
  }
}

//Assumes cimg is properly set and within range
void LoadImageNow() {
  if (cimg==0)
    img = loadImage(FN1);
  else
    img = loadImage(FN2);

  img.resize(int(width*0.75), 0);
  flag1=false;
  tintCtr=255;
}


//===========================================================================
// OTHER FUNCTIONS:

noel

Confirmed. I just tried again. I googled images/horse and took the first one (horse.jpg). I tried java mode, and it faded perfectly. In Android mode nothing happens. I took it to GIMP and exported it with an alpha channel as horsewa.png. Nothing happend. I then opened the layer dialogbox and gave it 1% transparency and exported again as horsewa1.png. Now it perfectly fades. I tried kfrajer's code (thank you for that) but it crashes because it can't find the images. Trying to open the image link in the browser it really doesn't download. I'll try to substitute the images later, but meanwhile I used the P2D renderer with code above. Now it fades even the horse.jpg, but someting strange happens. It doesn't obey my code anymore, it just fades away in total white!

This time I used dropbox and made it public. Hope it works. https://www.dropbox.com/s/8d6dvqip1lsuo1d/horse.jpg?dl=0 https://www.dropbox.com/s/n2771ucpb4tccfd/horsewa.png?dl=0 https://www.dropbox.com/s/q94pls265cgwvl5/horsewa1.png?dl=0

Here is also a link for the ScrollView topic.

https://www.dropbox.com/s/1jdr2cncw7tmlbi/panorama.jpg?dl=0

jeremydouglass

@noel did you ever report this here? https://github.com/processing/processing-android/issues