Hi meateverlasting I'm sorry to say I wont be able to provide much help with your question!

I've been looking for a way to retain transparency in my png output files, would you mind sharing your process?

Many Thanks

mycelial.docomo, you just have to make a transparent PGraphics (no background) and save it to file.

Thank you again for your feedback phi.lho. I was perhaps operating under the false impression that there was a more sophisticated method of retaining transparency in png's based on meateverlasting's statement of it being "really nice" that his/her sketch is currently capable of doing so. I'm not certain if it would be more appropriate to begin a new thread in regards to this, but as I would still appreciate an insight into meateverlasting's really nice approach I'll post some code here that I'm currently working on where simply removing the line relating to background does not produce a transparent output png. I have slightly adapted Daniel Hawkes' OpenProcessing sketch Deep Image to load an image array. The resulting output png's retain a grey background, which as far as I can gather denotes the absence of a defined background colour. My guess is that this is something to do with the P3D matrix and/or my chosen method of frame capture..?

1. import processing.video.*;
2. MovieMaker mm;
3. public int pn=0;
4. public String savename ="jen_and_sarah_colourama_blur_deep_painting_";
5. void saveget() {
6.      pn++;
7.      save(savename+str(pn)+".png");
8. }
9. void loop() {     
10.   //  saveget();  //  toggle comment this to save video or run as normal
11. }
12. 
    
13. import java.awt.event.*;
14. import codeanticode.gsvideo.GSMovie;
15. //DeepImage d;
16. DeepImage []seq;
17. private String fileName = "pic.jpg";
18. GSMovie myMovie;
19. // camera / matrix stuff
20. float zoom;
21. float lastZoom;
22. // mouse tracking / keys
23. float newXmag, newYmag; // target image rotation (when it catches up with mouse)
24. float xMag, yMag; // actual image rotation, for this frame
25. float mouseXHistorical;
26. float mouseYHistorical;
27. boolean rotationDisabled; // used to inhibit image rotation when click-dragging
28. float lastDepthScalar; // used to store current depth scalar
29. long lastClickTime; // time of last mouse click
30. long lastKeyPressTime; // as above
31. int currentFrame;
32. int numberOfFrames;
33. 
    
34. // rendering options
35. boolean strokeEnabled;
36. boolean antialiasingEnabled;
37. 
    
38. public void setup() {
39.   size(1920, 1080, P3D);
40.  // background(0);
41.   currentFrame = 0;
42.   numberOfFrames = 10;
43.  
44.   noStroke();
45.   noFill();
46.   this.addMouseWheelListener(new MouseWheelListener() {
47.     public void mouseWheelMoved(MouseWheelEvent e) {
48.       float step = e.getWheelRotation();
49.       e.consume();
50.     }
51.   }
52.   );
53.  seq = new DeepImage[numberOfFrames];
54.  
55.   for(int i=0; i<numberOfFrames; ++i) {
56.     seq[i] = new DeepImage(this, loadImage("jen_and_sarah_colourama_blur_" + i + ".png"), 40, 30, 0.0f);
57.     println("Frame " + i + " loaded");
58.   }
59. calcMouseRotation();
60. }
61. 
    
62. void draw() {
63. loop();
64.   pushMatrix();
65.   // zoom in / out
66.   if (seq[currentFrame].mImage.width > seq[currentFrame].mImage.height) {
67.     translate(0, 0, -((seq[currentFrame].mImage.width) / (width) * 500));
68.   }
69.   else {
70.     translate(0, 0, -((seq[currentFrame].mImage.height) / (height) * 500));
71.   }
72.   translate(0, 0, -zoom);
73.   // to screen centre
74.   translate(width / 2, height / 2);
75.   // offset for mouse to be centred and the picture be face on
76.   if (!rotationDisabled) calcMouseRotation();
77.   rotateX(PI / 2 - yMag);
78.   rotateY(xMag - PI / 2);
79.   seq[currentFrame].draw();
80.  
81.   currentFrame = (currentFrame+1)%numberOfFrames;
82.   popMatrix();
83. }
84. // called on receipt of a new frame
85. void movieEvent(GSMovie myMovie) {
86.   myMovie.read();
87.   seq[currentFrame] = new DeepImage(this, myMovie, seq[currentFrame].getGrain(), seq[currentFrame].getMatrixSize(), seq[currentFrame].mDepthScalar);
88. }
89. public void keyPressed(KeyEvent key) {
90.   long t = key.getWhen();
91.   // used to limit repeat rate when key is held
92.   if ((t - lastKeyPressTime) > 300) {
93.     lastKeyPressTime = t;
94.     int code = key.getKeyCode();
95.     if (code == KeyEvent.VK_UP) {
96.       seq[currentFrame].setSmoothing(seq[currentFrame].getMatrixSize() + 5);
97.     }
98.     else if (code == KeyEvent.VK_DOWN) {
99.       seq[currentFrame].setSmoothing(seq[currentFrame].getMatrixSize() - 5);
100.     }
101.     else if ((code >= KeyEvent.VK_1) && (code <= KeyEvent.VK_9)) {
102.       int newGrain = 5 * (10 - (code - 48));
103.       seq[currentFrame] = new DeepImage(this, seq[currentFrame].mImage, newGrain, seq[currentFrame].getMatrixSize(), seq[currentFrame].mDepthScalar);
104.     }
105.     else if ((code == KeyEvent.VK_PLUS) || (code == KeyEvent.VK_ADD)) {
106.       seq[currentFrame] = new DeepImage(this, seq[currentFrame].mImage, seq[currentFrame].getGrain() - 1, seq[currentFrame].getMatrixSize(), seq[currentFrame].mDepthScalar);
107.     }
108.     else if ((code == KeyEvent.VK_MINUS) || (code == KeyEvent.VK_SUBTRACT)) {
109.       seq[currentFrame] = new DeepImage(this, seq[currentFrame].mImage, seq[currentFrame].getGrain() + 1, seq[currentFrame].getMatrixSize(), seq[currentFrame].mDepthScalar);
110.     }
111.     else if (code == KeyEvent.VK_E) {
112.       strokeEnabled = !strokeEnabled;
113.       if (strokeEnabled) {
114.         stroke(240);
115.         strokeWeight(2.0f);
116.       }
117.       else noStroke();
118.     }
119.     else if (code == KeyEvent.VK_A) {
120.       antialiasingEnabled = !antialiasingEnabled;
121.       if (antialiasingEnabled) smooth();
122.       else noSmooth();
123.     }
124. //
125. // else if (code == KeyEvent.VK_X) {
126. //    // Finish the movie if space bar is pressed
127. // mm.finish();
128. //     // Quit running the sketch once the file is written
129. //  exit();
130. //
131. //  }
132. }
133. }
134. public void mousePressed() {
135.   mouseXHistorical = mouseX;
136.   mouseYHistorical = mouseY;
137.   lastDepthScalar = seq[currentFrame].mDepthScalar;
138.   lastZoom = zoom;
139. }
140. public void mouseDragged() {
141.   // disable image rotation
142.   rotationDisabled = true;
143.   // get distance from starting point
144.   float x = mouseX - mouseXHistorical;
145.   float y = mouseY - mouseYHistorical;
146.   float mag = sqrt(x * x + y * y) / ((width + height) / 4);
147.   // invert direction if dragging downwards
148.   if (mouseY < mouseYHistorical) mag = -mag;
149.   // set depth scalar
150.   if (mouseButton == LEFT) seq[currentFrame].mDepthScalar = lastDepthScalar + (3 * mag);
151.   // set zoom
152.   if (mouseButton == RIGHT) zoom = lastZoom + 500 * mag;
153. }
154. public void mouseReleased() {
155.   rotationDisabled = false;
156. }
157. public void mouseClicked(MouseEvent e) {
158.   // used to detect double clicks
159.   long t = e.getWhen();
160.   if (t - lastClickTime < 500) {
161.     new Thread(new GetImageRunnable(this)).start();
162.   }
163.   lastClickTime = t;
164. }
165. // calculates target rotation for this frame, based on mouse position
166. public void calcMouseRotation() {
167.   newXmag = mouseX / (float) width * PI;
168.   newYmag = mouseY / (float) height * PI;
169.   float diff = xMag - newXmag;
170.   if (abs(diff) > 0.01) xMag -= diff / 5.0;
171.   diff = yMag - newYmag;
172.   if (abs(diff) > 0.01) yMag -= diff / 5.0;
173. }
174. // Replaces current deepimage with one from a file chooser.
175. class GetImageRunnable implements Runnable {
176.   PApplet p;
177.   public GetImageRunnable(PApplet applet) {
178.     p = applet;
179.   }
180.   public void run() {
181.     String loadPath = selectInput();
182.     if (loadPath != null) {
183.       if (myMovie != null) myMovie.stop();
184.       fileName = loadPath;
185.       String s = fileName.toLowerCase();
186.       if ((s.endsWith("jpg")) || (s.endsWith("bmp")) || (s.endsWith("png"))) {
187.         //d = new DeepImage(p, loadImage(fileName), d.getGrain(), d.getMatrixSize(), d.mDepthScalar);
188.       }
189.       else {
190.         // Load and play the video in a loop
191.         try {
192.           myMovie = new GSMovie(p, fileName);
193.           myMovie.loop();
194.         }
195.         catch (Exception e) {
196.           // some videos continue 'playing' without the decoder supplying any frames. This should
197.           // hopefully stop the video, and save CPU time.
198.           if (myMovie != null) myMovie.stop();
199.           e.printStackTrace();
200.         }
201.       }
202.       zoom = 0;
203.     }
204.   }
205. };
206. 
     
207. public class DeepImage {
208.   private PApplet p;
209.   public PImage mImage;
210.   public float mDepthScalar = 0.0f; // this is a rendering option
211.   private int mMatrixSize;
212.   private PVector[][] mDepthValues;
213.   private int mGrain;
214.   private int mDepthValuesWidth;
215.   private int mDepthValuesHeight;
216.   private float mDepthMidpoint;
217.   DeepImage(PApplet applet, PImage image, int grain, int matrixSize, float depth) {
218.     p = applet;
219.     mImage = image;
220.     mImage.loadPixels();
221.     mGrain = (grain >= 3) ? grain : 3;
222.     mDepthScalar = depth;
223.     mMatrixSize = (matrixSize >= 3) ? matrixSize : 3;
224.     initDepthArray();
225.     calcDepth();
226.   }
227.   private void initDepthArray() {
228.     mDepthValuesWidth = (mImage.width / mGrain);
229.     mDepthValuesHeight = (mImage.height / mGrain);
230.     mDepthValues = new PVector[mDepthValuesWidth][mDepthValuesHeight];
231.     for (int i = 0; i < mDepthValuesWidth; i++) {
232.       for (int j = 0; j < mDepthValuesHeight; j++) {
233.         mDepthValues[i][j] = new PVector();
234.       }
235.     }
236.   }
237.   private void calcDepth() {
238.     int i = 0;
239.     int j = 0;
240.     float maxDepth = 0;
241.     float minDepth = 255;
242.     for (int y = 0; y < (mDepthValuesHeight * mGrain); y++) {
243.       for (int x = 0; x < (mDepthValuesWidth * mGrain); x++) {
244.         // for every Nth pixel, save the depth to the depth array
245.         if ((x % mGrain == 0) && (y % mGrain == 0)) {
246.           float depth = getAveragePixelIntensity(x, y, mMatrixSize, mImage);
247.           if (depth > maxDepth) maxDepth = depth;
248.           else if (depth < minDepth) minDepth = depth;
249.           mDepthValues[i][j].x = x;
250.           mDepthValues[i][j].y = y;
251.           mDepthValues[i][j].z = depth;
252.           i++;
253.         }
254.       }
255.       // increment and reset depth array counters
256.       if (y % mGrain == 0) {
257.         i = 0;
258.         j++;
259.       }
260.     }
261.     mDepthMidpoint = minDepth + ((maxDepth - minDepth) / 2);
262.   }
263.   public void draw() {
264.     // moves view to look at middle of image (so adjusting depth does not 'zoom')
265.     p.translate(0, 0, -mDepthScalar * mDepthMidpoint);
266.     // to top left corner of where image will be
267.     p.translate(-mImage.width / 2, -mImage.height / 2);
268.     for (int j = 0; j < mDepthValuesHeight - 1; j++) {
269.       p.beginShape(p.QUAD_STRIP);
270.       p.texture(mImage);
271.       for (int i = 0; i < mDepthValuesWidth; i++) {
272.         p.vertex(mDepthValues[i][j].x, mDepthValues[i][j].y, mDepthScalar * mDepthValues[i][j].z,
273.         mDepthValues[i][j].x, mDepthValues[i][j].y);
274.         p.vertex(mDepthValues[i][j + 1].x, mDepthValues[i][j + 1].y, mDepthScalar * mDepthValues[i][j + 1].z,
275.         mDepthValues[i][j + 1].x, mDepthValues[i][j + 1].y);
276.       }
277.       p.endShape();
278.     }
279.   }
280.   public float getAveragePixelIntensity(int x, int y, int matrixsize, PImage img) {
281.     int offset = matrixsize / 2;
282.     float scalar = 1.0f / (matrixsize * matrixsize);
283.     float sum = 0;
284.     int pixelsTested = 0;
285.     int xloc;
286.     int yloc;
287.     int loc;
288.     // Loop through convolution matrix
289.     for (int i = 0; i < matrixsize; i++) {
290.       for (int j = 0; j < matrixsize; j++) {
291.         // What pixel are we testing?
292.         xloc = x + i - offset;
293.         yloc = y + j - offset;
294.         loc = xloc + (img.width * yloc);
295.         // catch edge cases
296.         if ((xloc>=0)&&(xloc<img.width)&&(yloc>=0)&&(yloc<img.height)) {
297.           sum += (p.brightness(img.pixels[loc]));
298.           pixelsTested++;
299.         }
300.       }
301.     }
302.     // divide sum by number of successfully tested pixels in matrix
303.     sum /= pixelsTested;
304.     // Make sure intensity is within range
305.     sum = p.constrain(sum, 0, 255);
306.     return sum;
307.   }
308.   public int getGrain() {
309.     return this.mGrain;
310.   }
311.   public int getMatrixSize() {
312.     return this.mMatrixSize;
313.   }
314.   public void setSmoothing(int smoothing) {
315.     smoothing = (smoothing >= 3) ? smoothing : 3;
316.     mMatrixSize = smoothing;
317.     calcDepth();
318.   }
319. }

What adaptations will I need to make to this sketch in order to retain transparency in my output png's, and would anyone mind shedding light on why the technique I am currently using is ineffective?

Many Thanks.

I don't know if P3D retains transparency. In a time, you had to draw on a JAVA2D PGraphics to have transparency, but in recent versions of Processing, it also worked with P2D. Try with a simple sketch, perhaps.

Yes, in certain sketches it is possible to retain transparency. However I'll need to look through the sketches I am working with to find out if any retain transparency when using P3D. I have no idea if there is a consistent, catch-all approach to retaining png transparency (I'd love to hear about it if there is!) but if anyone is able to identify why the transparency is not retained in the sketch above I'd be most grateful for an explanation and/or an alternative method to achieve this.

Many Thanks.

If you use the PGraphics to save the image data, you can preserve the transparency.

1. void pgsave(PImage img,String where){
     PGraphics s= createGraphics(img.width,img.height,P3D);
     s.loadPixels();
     arraycopy(img.pixels,s.pixels);
     s.updatePixels();
     s.save(where);
    
   }

Just use

1. pgsave(src,"c:\\data\\retval.png");

If you use:

1. void saveget() {
2.      pn++;
3.      save(savename+str(pn)+".png");
4. }

to save your image, no wonder it doesn't work. A PApplet is always opaque. As I wrote repeatedly, you have to draw in a PGraphics (a separate buffer) to have transparency.

Thank you owaunz and phi.lho

phi.lho I'm extremely grateful for your repeated assistance. Thank you for taking the time to further clarify where I was going wrong.

>>As I wrote repeatedly, you have to draw in a PGraphics (a separate buffer) to have transparency.<<

Might I just point out that, unless there is a post from you on this thread that I am not able to view, prior to the post you have made directly above, you had only previously wrote on one occasion of the necessary use of PGraphics, I have quoted that post below:

>>you just have to make a transparent PGraphics (no background) and save it to file.<<

As I'm sure you will be aware by now, I'm not particularly knowledgeable about the workings of Processing yet, which is why I am here on the forum asking questions! To someone more experienced with the subject, I'm sure your original reply would have sufficed to point out their oversight.

I'm trying my very best to learn as quickly and as independently as I can, and I've sought out the majority of the answers I've required to various problems without resorting to asking questions on the forums that I expect some of you must encounter time and time again. I'm sure there are many other more interesting questions for you to give your time over to, but please try to remember that whereas you clearly understand the intimate details of different aspects of the language, I have very little experience, I don't yet have a solid mental model of how many aspects of programming in general works, let alone how the qualities of the PApplet and PGraphics classes differ! I'm still struggling to make sense of the class descriptions as many of the words used relate to concepts that I am only just discovering and beginning to comprehend.

The point I'm trying to make is that to you it is of course no wonder that my approach, the only one I was aware of til now, wasn't working. To me it's a revelation to understand why it wasn't working! I've been stumbling around in the dark for months trying to figure that out on my own, and through the information provided in the previous two posts by yourself and owaunz, I have gained greater insight into how these classes behave. Far more so than trying and mostly failing to interpret the many screens worth of ideas and terminologies I had read through while looking for an answer, prior to posting my question here.

Anyway I'll just finish up by thanking you both again for your generous assistance. It is always truly appreciated.

Yes, sorry for my tone, you analyzed accurately why I make sometime too terse answers. Just for the sake of discussion, not for arguing, I also mentioned " you had to draw on a JAVA2D PGraphics to have transparency". Hence the repeatedly...
Another difficulty: it is hard sometime to estimate if a forum user is knowledgeable or not. When I see a long listing like you shown, I suppose you know Processing quite a bit, although I see you adapted existing code.
And since you found this thread, I suppose you searched and found other examples of saving images with transparency, thus my guessing you knew more or less all this.

To the point, basically, it means you have to make all your drawings in an off-screen buffer, a PGraphics. Something like:
PGraphics pg = createGraphics( ... ); // Real parameters here!
pg.beginDraw()
pg.line( ... ); // All drawing orders prefixed with pg.
pg.endDraw();

There are some shortcuts/tricks to avoid this prefix stuff, but it can be more confusing.

My sincere and humble apologies phi.lho, I think that second mention of PGraphics must have been wearing a cloaking device last night, my eyes completely failed to acknowledge it!

Indeed I am perhaps too adventurous with the sketches I am playing with for my level of experience. I should really get back to basics for a while as there are still quite a few holes in my comprehension of the fundamentals. I haven't yet reached the threshold of understanding I have heard more experienced programmers talk about when things just begin to click into place. I'm more of an artist than a programmer so I have to admit I get quite frustrated searching through the vast and detailed Javadoc class descriptions where frequently the information just goes way over my head. Clearly I'll need to become more accepting of this if I really want to achieve the kind of results I'm looking for.

Again I will do my best to integrate the code you have shared, and I'll certainly be looking out some sketch examples where PGraphics is used now I know this is the solution rather than take up any more of your time on the subject. I have (hopefully) far more interesting questions in mind which I'll be asking in the near future.

Once again, many thanks for your help.

No problem at all. And there are no uninteresting questions, just, sometime, confusing ones (not knowing what is asked!), which is not the case of your.
And, indeed, when you struggle with a little problem (inside a larger problem, err, program), I often advise to try and make a much simpler, barebones sketch, to isolate the issue. Beside, it provides something people can try: I cannot run your code, as I don't have the GSMovie library, nor the image files.

If you do that, I suggest to open a new thread, we have hijacked this one enough!