1

INTRODUCTION i need your help since i am stuck. upfront, i am a graphic artist and not a coder and/or programmer. during the years i learned basic, scheme, logo, processing and python by self-study and trial.

hence, please be understandable & straightforward while instructing me. thanks.

GOAL for my current animation project i am using processing 2.2.1, mainly because of the HSB colorspace-functionality. meanwhile "processing. a programming handbook for visual designers and artist" by fry & reas + "LEARNING PROCESSING" by shifmann ARE my guides.

WHAT? in short i want to create an animation (a gif or .mp4) existing out of 1 + 4 + 16 + 64 frames, which are delivered by processing. therefore i produced 4 separate sub-programmes, which all run quite smoothly, delivering neatly numbered output (frames), et cetera . .

BUT after importing/collecting the stack of frames in Photoshop, while running the animation, AS IT SEEMS only the first frame needs a so called black background. ergo, the background of all other remaining frames needs to be invisible (or rather transparent) to produce one stream of blending squares.

A POSSIBLE SOLUTION? i expected the next code: background(0,0,0,0) [= "transparent" black], or: background(0,0,10,0) [= "transparent" white] to solve the issue, because of the very last number (zero), i.e. [10=opaque while 0=transparent]. but it did not. in fact even the removal of the background-call has no effect what so ever.

from the "How to make completely transparent background?" discussion here, i understand there is no real solution. the "16.6 Background Removal" solution by shifmann (page 293) is much to complicated for me.

anybody aware of a possible (swift) workaround? or, any thoughts?

SAMPLE some code of the third sub, "drawing" 16 squares of 100x100px randomly spread:

// 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 2.2.1 // ANIMATED DYNAMIC SELF ORGANISING REPEAT PATTERNS // - - - - - - - - - - - - - - - - - - - - - - - - - - to prepare // - - - - - - - - - - - - - - - - - - - - - - - - - - 20241231 // A01c_1300x900px_sizE100frameC16_H180a90onK.pde title // extended canvas - - - - - - - - - - - - - - - - - - 1300x900px // art - - - - - - - - - - - - - - - - - - - - - - - - 800x800px // + + + + + + + + + + + + + + + + + + + + + + + + + + DECLARE int x0; int y0=150; int x1; int y1; int x2; int y2; int count=1; int H90; // + + + + + + + + + + + + + + + + + + + + + + + + + + MAIN void setup() { size(1300,900); // extended colorMode(HSB,360,10,10,10); background(0,0,0,0); } // - - - - - - - - - - - - - - - - - - - - - - - - - - LOOP void draw() { colorMode(HSB,360,10,10,10); strokeWeight(100); strokeCap(SQUARE); smooth(); // OR noLoop(); // - - - - - - - - - - - - - - - - - - - - - - - - - - frameCount 16 while (frameCount <= 16) { // - - - - - - - - - - - - - - - - - - - - - - - - - - 8rows8columns for (x0=350; x0 < 1050; x0=x0+200) { squareC16(); what90(); stroke(H90,10,10,10); line(x1,y1,x2,y2); saveFrame("3-##.jpg"); // - - - - - - - - - - - - - - - - - - - - - - - - - - trafficer println(frameCount); println(count); println(); frameCount=frameCount+1; count=count+1; } // - - - - - - - - - - - - - - - - - - - - - - - - - - transport y0=y0+200; } } // + + + + + + + + + + + + + + + + + + + + + + + + + + FUNCTIONS // - - - - - - - - - - - - - - - - - - - - - - - - - - ONE x 16 void squareC16() { // - - - - - - - - - - - - - - - - - - - - - - - - - - dice int dice = int(random(4)+1); // - - - - - - - - - - - - - - - - - - - - - - - - - - 1 top/left if (dice==1) { x1=x0; y1=y0-50; x2=x0-100; y2=y0-50; // - - - - - - - - - - - - - - - - - - - - - - - - - - 2 top/right } else if (dice==2) { x1=x0; y1=y0-50; x2=x0+100; y2=y0-50; // - - - - - - - - - - - - - - - - - - - - - - - - - - 3 bottom/left } else if (dice==3) { x1=x0; y1=y0+50; x2=x0+100; y2=y0+50; // - - - - - - - - - - - - - - - - - - - - - - - - - - 4 bottom/right } else { x1=x0; y1=y0+50; x2=x0-100; y2=y0+50; } }
Improve this question
6
  • This reference may or may not be helpful: processing.org/reference/background_.html I have never seen a transparent black background and usually it only takes one parameter, ie background(0) for a solid black background; there is no alpha (transparency) parameter. You could set the background to an image which is opaque or transparent according to the documentation. In Processing 4.x.x there is an example of GifAnimation. Commented Jan 3 at 5:44
  • From the gifExport example: gifExport.setTransparent(0,0,0); // make black the transparent color. every black pixel in the animation will be transparent // GIF doesn't have alpha values like processing. a pixel can only be totally transparent or totally opaque. // set the processing background and the transparent gif color to the same value as the gifs destination background color Commented Jan 3 at 6:14
  • Thank you, Apodidae! Could you please provide me with the hyperlink of the GIF-transparency example you traced? I would like to read the complete text. Thanks again. Commented Jan 4 at 6:21
  • 1
    ThANK YOU for your kind help! The PGraphics-solution is indeed valid. My HOW TO question is thus CLOSED. Hurray! After some experiments, concerning the order of the nested commands, I was able to generate the much wanted output, namely x-number of frames including a transparent background . . . Alas PGraphics did not accept the "saveFrame" command, but in the end I found an acceptable workaround. If you are interested in the completed code, or a running GIF (or mp4) just let me know, but than please incude an email-adress. Thanks again, S Commented Jan 5 at 20:22
  • 2
    It's ok to answer your own question. To do that post your code in the section below and then check it as the answer. That will help the next user who has the same problem. Thanks. Commented Jan 5 at 22:26

1 Answer 1

Reset to default
2

HURRAY! After some experiments, concerning the order of the nested commands, I was able to generate the much wanted output, namely x-number of frames including a transparent background. Alas PGraphics did not accept the handy "saveFrame" command, but in the end I found an acceptable workaround. As you can see for yourself, because here is the code of subprogram B:

// 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 2.2.1 // ANIMATED DYNAMIC SELF ORGANISING REPEAT PATTERN 20250105 // - - - - - - - - - - - - - - - - - - - - - - - - - - PGraphics // PG0105pBn3g_count4_H225T10a45.pde current // REDUCED SIZE // extended canvas - - - - - - - - - - - - - - - - - - 1300x900px // ART - - - - - - - - - - - - - - - - - - - - - - - - 800x800px // - - - - - - - - - - - - - - - - - - - - - - - - - - TO PREPARE // 4 + 3 + 2 + 1 = A + B + C + D > 4 = last > 1 = top // - - - - - - - - - - - - - - - - - - - - - - - - - - calculus // 1200:3 = 400 A // 900:3 = 300 // 600:3 = 200 > > > B [3] // 300:3 = 100 C // 150:3 = 50 D // 75:3 = 25 E // + + + + + + + + + + + + + + + + + + + + + + + + + + DECLARE int x0; int y0=250; int x1; int y1; int x2; int y2; int count=1; int H225; // + + + + + + + + + + + + + + + + + + + + + + + + + + MAIN // - - - - - - - - - - - - - - - - - - - - - - - - - - call PGraphics pg; // void setup() { size(1300,900); pg=createGraphics(width,height); pg.colorMode(HSB,360,10,10,10); pg.background(0,0,10,0); } // - - - - - - - - - - - - - - - - - - - - - - - - - - NO LOOP void draw() { colorMode(HSB,360,10,10,10); smooth(); noLoop(); // - - - - - - - - - - - - - - - - - - - - - - - - - - start PG pg.beginDraw(); // - - - - - - - - - - - - - - - - - - - - - - - - - - 4x4 frames while (frameCount <= 4) { // - - - - - - - - - - - - - - - - - - - - - - - - - - one row for (x0=450; x0<1050; x0=x0+400) { pg.strokeCap(SQUARE); pg.strokeWeight(200); pg.colorMode(HSB,360,10,10,10); squareC4(); what225(); pg.stroke(H225,10,10,10); pg.line(x1,y1,x2,y2); ///// INSERT since /// saveFrame("B-##.png"); /// is alas not valid! if (frameCount==1) { pg.save("B-01.png"); } else if (frameCount==2) { pg.save("B-02.png"); } else if (frameCount==3) { pg.save("B-03.png"); } else { pg.save("B-04.png"); } // - - - - - - - - - - - - - - - - - - - - - - - - - - trafficer println(frameCount); println(count); println(); frameCount=frameCount+1; count=count+1; } // - - - - - - - - - - - - - - - - - - - - - - - - - - transport y0=y0+400; } // - - - - - - - - - - - - - - - - - - - - - - - - - - END PG pg.endDraw(); // - - - - - - - - - - - - - - - - - - - - - - - - - - on screen image(pg,0,0); } // ::::::::::::::::::::::::::::::::::::::::::::::::::: PROCEDURES // 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 > B [H 225] void squareC4() { // - - - - - - - - - - - - - - - - - - - - - - - - - - dice int dice = int(random(4)+1); // - - - - - - - - - - - - - - - - - - - - - - - - - - 1 top/left if (dice==1) { x1=x0; y1=y0-100; x2=x0-200; y2=y0-100; // - - - - - - - - - - - - - - - - - - - - - - - - - - 2 top/right } else if (dice==2) { x1=x0; y1=y0-100; x2=x0+200; y2=y0-100; // - - - - - - - - - - - - - - - - - - - - - - - - - - 3 bottom/left } else if (dice==3) { x1=x0; y1=y0+100; x2=x0+200; y2=y0+100; // - - - - - - - - - - - - - - - - - - - - - - - - - - 4 bottom/right } else { x1=x0; y1=y0+100; x2=x0-200; y2=y0+100; } } // + + + + + + + + + + + + + + + + + + + + + + + + + + GOSUB void what225(){ H225=int(random(90)+225); }
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Glad that you got it working. In order to run your solution code in Processing 4.3.x I had to move pg.background() from setup() to draw() and insert it as the first line following pg.beginDraw(). Reference is here: processing.org/examples/creategraphics.html

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.