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;
}
}
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;
}
}
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);
}