Hi, How Can I make a photo transparent in this picture in Processing?

edited August 2014 in JavaScript Mode

Hi, How Can I make a photo transparent in this picture in Processing? I need help soon, thanks Here is a program for a transparency picture, but when I substituted the moonwalk.jpg picture for my KeyWest.jpg it did not work, why ? and how can I make my Key west picture transparent? I am sending a photo of my Key West picture I need this for a class in the Monday, any help is greatly appreciated, thanks in advanced. Below is the program given to run the moonwalk sketch in Processing. HadasshM

 * Alpha Mask. 
 * Loads a "mask" for an image to specify the transparency 
 * in different parts of the image. The two images are blended
 * together using the mask() method of PImage. 

// The next line is needed if running in JavaScript Mode with Processing.js
/* @pjs preload="moonwalk.jpg,mask.jpg"; */ 

PImage moonwalk;
PImage imgMask;

void setup() {
  size(640, 360);
  img = loadImage("moonwalk.jpg");
  imgMask = loadImage("mask.jpg");

void draw() {
  background(255, 10, 253);
  image(img, width/2, height/2);
  image(img, mouseX, mouseY);




  • "it did not work"
    I wish I get an € each time I read this. And if I reply "it works for me", are we more advanced?
    Base forum rule: when you report a problem, report as much information as possible. If you get an error message, paste it here. If you expected a result and got something else, explain the difference. Etc.

    Personally, I ran the sketch with your image, and got an error: "The PImage used with mask() must be the same size as the applet."
    All right. So I added the line:

    img.resize(width, height);

    just after the loadImage(), and it worked.

  • Hi PhiLo, thanks for getting back to me, I didn't put an error message before because I got a sort of blank screen but when I put the img.resize(width, height); on the next line below the loadimage where the "moonwalk.jpg" was I got a pink screen. Pink is my background but my picture does not show up at all just a pink screen. I am using a Toshiba laptop with Windows 7 if that makes any difference, but it's javascript mode I'm using for processing. Sorry if I confuse you. HadassahM

  • edited August 2014

    Javascript and Java mode behave very differently so it is important that you say which you are using.

    I suspect the problem is due to the images not being loaded properly. Check out line 10, see if you can find an example of image preloading that works.

    I have moved this to the Javascript forum.

  • When I put this in java mode it says can't find anything name name "img"

  • img? didn't you mean imgMask? :-/

  • no it said "img"

  • When I put it in javascript it's just a pink background

  • edited August 2014

    I see 2 PImage variables declared: moonwalk & imgMask.
    However, variable img is being used before its declaration part!
    And strangely, moonwalk was never used!

  • Thanks can you show me how to write this in java script? I really don't know how or why it's not working.

  • When I wrote "it works", I was meaning about the original Alpha Mask example sketch, modified to use your image. I went back to the original to get the mask image.

    Now, I see you renamed the img variable to moonwalk, but not the places where this variable is used. Rename it back to img (it is no longer a moon walk image, anyway) to get the sketch to work.

Sign In or Register to comment.