# PImage alpha color problems P2D

**URL:** <https://discourse.processing.org/t/pimage-alpha-color-problems-p2d/16648>\
**Category:** Processing\
**Created:** [December 27, 2019, 6:23am UTC](https://discourse.processing.org/t/pimage-alpha-color-problems-p2d/16648 "2019-12-27T06:23:13Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [December 27, 2019, 6:23am UTC](https://discourse.processing.org/t/pimage-alpha-color-problems-p2d/16648/1 "2019-12-27T06:23:13Z")

</div>

There is a problem amending the alpha channel in pixel arrays in P2D, under FX2D alpha can be adjusted like so

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/c/c338374a4991c8b9c4ff07a6c17281b1e27b9240.png)

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/dd8bacdb220c62779c8f2ef4b625db26884459f3.png)

however the same code in P2D.

![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/4ba3d0bc5dd71863e4e6e558a74692f0bbd689a9.jpeg)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 27, 2019, 8:43am UTC](https://discourse.processing.org/t/pimage-alpha-color-problems-p2d/16648/2 "2019-12-27T08:43:49Z")

</div>

confirm, P2D this alpha mask not work ( win 10 / processing 3.5.3 )  
JAVA2D and FX2D ok

> **testcode**
>
> ```auto
> //https://discourse.processing.org/t/pimage-alpha-color-problems-p2d/16648
> 
> String frogfile = "data/frog.jpeg";
> PImage frog,img;
> int w,h;
> 
> void setup() {
> size(500, 500);//P2D,FX2D);
> frog = loadImage(frogfile);
> w =frog.width;
> h =frog.height;
> println(w," * ",h);
> }
> 
> void draw(){
> background(200,200,0);
> mouse_mask();
> fill(0,0,0);
> rect(0,0,w,h);
> image(img,0,0);
> }
> 
> void mouse_mask() {
> img=frog.copy();
> img.loadPixels();
> for ( int i = 0; i < w*h ; i++ ) {
> color c = img.pixels[i];
> float d = constrain(dist(i%w,floor(i/w),mouseX,mouseY),0,100);
> int alpha = (int)map(d,0,100,255,1);
> img.pixels[i] = color (red(c),green(c),blue(c), alpha );
> }
> img.updatePixels();
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [December 27, 2019, 12:30pm UTC](https://discourse.processing.org/t/pimage-alpha-color-problems-p2d/16648/3 "2019-12-27T12:30:33Z")

</div>

Confirmed, above code writing to the alpha channel of an PImage doesn’t work here either. However, this workaround does give the desired result using P2D:

```auto
PImage frog;
PGraphics mask;

void setup() {
  size(330, 280, P2D);
  frog = loadImage("data/frog.jpg");
  mask = createGraphics(width, height);
}

void draw() {
  background(0);
  frog.mask(mouseMask(mask));
  image(frog, 0, 0);
}

PGraphics mouseMask(PGraphics pg) {
  
  pg.beginDraw();
  pg.loadPixels();
  for ( int i = 0; i < pg.pixels.length; i++ ) {
    float d = constrain(dist(i%pg.width, floor(i/pg.width), mouseX, mouseY), 0, 100);
    int alpha = (int) map(d, 0, 100, 255, 1);
    pg.pixels[i] = color(alpha);
  }
  pg.updatePixels();
  pg.endDraw();
  return pg;
}

```

---

<div class="post-metadata">

**Author:** ![rapatski](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/rapatski/32/5164_2.png) [@rapatski](https://discourse.processing.org/u/rapatski)\
**Post date:** [January 3, 2020, 11:40pm UTC](https://discourse.processing.org/t/pimage-alpha-color-problems-p2d/16648/4 "2020-01-03T23:40:34Z")

</div>

Also, don’t need to redraw the radial gradient every frame:

```auto
PImage frog;
PGraphics mask, gradient;

void setup() {
  size(330, 280, P2D);
  
  frog = loadImage("data/frog.jpg");
  mask = createGraphics(frog.width, frog.height);
  gradient = createGradient(100);
  
}

void draw() {
  background(0);
  
  frog.mask(mouseMask(mask, gradient));
  image(frog, 0, 0);
}

PGraphics mouseMask(PGraphics pg, PGraphics mask) {
  
  pg.beginDraw();
  pg.background(0);
  pg.imageMode(CENTER);
  pg.image(mask, mouseX, mouseY);
  pg.endDraw();
  return pg;
}

PGraphics createGradient(int rad) {
  PGraphics pg = createGraphics(rad*2, rad*2);
  pg.beginDraw();
  pg.loadPixels();
  for ( int i = 0; i < pg.pixels.length; i++ ) {
    float d = constrain(dist(i%pg.width, floor(i/pg.width), pg.width/2, pg.height/2), 0, rad);
    int alpha = (int) map(d, 0, rad, 255, 0);
    pg.pixels[i] = color(alpha);
  }
  pg.updatePixels();
  pg.endDraw();
  return pg;
}

```