Transparency Pixel colour for Sprites on HP Prime

[matalog]

I had a look here:
https://www.omnimaga.org/hp-calculator-p...hp-prime)/

And downloaded the suggested program in the second post, DIMGROB generator.

I generated a sprite, and assumed that the corners of the ball would be transparent, but they are white, on top of the calc screen:

Code:

EXPORT ball()
BEGIN
    LOCAL COORD:={};
    LOCAL J,K,S,J1,K1;
    J:=160;
    K:=120;
    J1:=J;
    K1:=K;
  DIMGROB_P(G1, 22, 22, {#8000800080008000:64h ,#7FFF800080008000:64h ,#529452946318739C:64h ,#80007FFF6B5A5AD6:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#84252947BDD:64h ,#421000000000000:64h ,#800080007BDE318C:64h ,#8000800080008000:64h ,
   #8000800080008000:64h ,#56B55EF667387BDE:64h ,#2D6B35AD42104A51:64h ,#739C5EF756B54A52:64h ,#800080007BDE739C:64h ,#8000800080008000:64h ,#56B45AD57BDE8000:64h ,#77BC739B6B5A6318:64h ,#7FFF7FFF739C77BD:64h ,#6F7B77BD7FFF7FFF:64h ,#800080007FFF7BDE:64h ,#252977BD80008000:64h ,
   #6B5967385F173DEF:64h ,#6F7A739C6F7B6B7A:64h ,#7FFF7FFF7BDE7BDD:64h ,#52943DEF77BD7FFF:64h ,#7FFF800080007FFF:64h ,#5EF74E72000035AD:64h ,#739C6B5A6B596738:64h ,#7BDE7BDE631877BC:64h ,#7FFF7FFF7FFF7FFF:64h ,#80006B5A08424A52:64h ,#108404216B5A8000:64h ,#6B5963185EF656D5:64h ,
   #108325296738739B:64h ,#7BDE7FFF7BDE4E73:64h ,#C636B5A7FFF7BDE:64h ,#3DEF80008000294A:64h ,#5AD55AD525290000:64h ,#84246306B7A6318:64h ,#2D6B000000000000:64h ,#739C77BC7BDE6B59:64h ,#6F7B042104216318:64h ,#463000001CE77BDE:64h ,#29495AD65AD55AD5:64h ,#0:64h ,
   #4E720C6300000000:64h ,#294A739B6B596739:64h ,#4216F7B4E730000:64h ,#5AD556B45AD52108:64h ,#C625EF6:64h ,#0:64h ,#6F7B77BD3DEF0000:64h ,#318C00005F17739B:64h ,#56B4463108626739:64h ,#294A5EF756B456B4:64h ,#0:64h ,#5AD6000000000000:64h ,#6F7B6B596B5A739B:64h ,
   #39CD6F7B25292949:64h ,#56B452B452935293:64h ,#420F5AF6:64h ,#0:64h ,#6B596B5A6B5914A5:64h ,#5EF656B467396739:64h ,#52934E724A5277BD:64h ,#52B456B556B45293:64h ,#842:64h ,#6F7A318C00000000:64h ,#5F17631867386739:64h ,#52937BDE673956B4:64h ,#52935293529352B4:64h ,
   #842294A5AD552B4:64h ,#14A510840C630C62:64h ,#5EF65F1767384E72:64h ,#6F7B4E725AD55AF6:64h ,#5EF656B45EF67FFF:64h ,#529352B456B456B5:64h ,#56B4529452934E72:64h ,#5AD556B45EF65AD5:64h ,#5AF65EF65AD65EF6:64h ,#77BD80007BDE5EF6:64h ,#5EF65AD639CD35AD:64h ,#5AD55AD552935AD5:64h ,
   #5AD55AD55AD55AD5:64h ,#6338673856B456B5:64h ,#7FFF6317318C56B4:64h ,#10843DEF80008000:64h ,#56D556B446302529:64h ,#5AF65AD65AD55AD5:64h ,#56B45EF65EF65EF6:64h ,#294A212935AD4A72:64h ,#8000800080006F7B:64h ,#10840C632529739C:64h ,#56B556D556B42528:64h ,#5AD55AD55AD556D5:64h ,
   #1CE718C642305EF6:64h ,#800080005EF72529:64h ,#6F7B800080008000:64h ,#2108042108422529:64h ,#56B456B456B456B4:64h ,#14A542305AD556B4:64h ,#800056B5252918C6:64h ,#8000800080008000:64h ,#3DEF77BD80008000:64h ,#4E721CE7042114A5:64h ,#3DEE52944E934E93:64h ,#631835AD20E814A5:64h ,
   #8000800080008000:64h ,#8000800080008000:64h ,#4210673980008000:64h ,#4A514A5146302D6B:64h ,#5AD635AD39CE4A51:64h ,#80008000800077BD:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#6F7B7BDD80008000:64h ,#739C6B5A6B596B59:64h ,#8000800080007BDE:64h ,#8000800080008000:64h });

DIMGROB_P(G2, 22, 22, {#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,
   #8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,
   #8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,
   #8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,
   #8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,
   #8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,
   #8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,
   #8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,
   #8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,
   #8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,#8000800080008000:64h ,
   #8000800080008000:64h ,#8000800080008000:64h });


REPEAT

    BLIT_P(G2,J1,K1);       //TRANSPARENT PIXELS THE SAME SIZE AS BALL (ERASE BALL)
    BLIT_P(G1,J,K);        //DRAW BALL
    J1:=J;                  //STORE PREVIOUS LOCATION
    K1:=K;                 //      "            "              "
    WAIT(0.005);        //WAIT A BIT TO LET THE USER APPRECIATE THE SPRITE
 REPEAT
  IF ISKEYDOWN(7) THEN J:=J-1;S:=1; END;                //CURSOR KEY MOVEMENTS
  IF ISKEYDOWN(8) THEN J:=J+1;S:=1; END;
  IF ISKEYDOWN(2) THEN K:=K-1;S:=1; END;
  IF ISKEYDOWN(12) THEN K:=K+1;S:=1; END;
  UNTIL S=1;
  S:=0;
UNTIL 0;
    
END;

Is there another colour code that actually will appear transparent on top of the screen, and is there a way to have the ball not wipe out the screen on G0?

[toml_12953]

What I do is have a background with no objects in one graphics page, then for each movement, I copy the background to a second page, BLIT the objects to the second page then copy that second page to G0. To the user it looks like the objects are moving over the background without disturbing it.

[matalog]

(05-21-2021 12:57 AM)toml_12953 Wrote:  What I do is have a background with no objects in one graphics page, then for each movement, I copy the background to a second page, BLIT the objects to the second page then copy that second page to G0. To the user it looks like the objects are moving over the background without disturbing it.

Do you do that every single time something moves?


How do we go about getting pixels of a GROB to be transparent? The program DIMGROB creator that I used had set some of those pixels to transparent, and they ended up white.

[toml_12953]

(05-21-2021 09:58 AM)matalog Wrote:  

(05-21-2021 12:57 AM)toml_12953 Wrote:  What I do is have a background with no objects in one graphics page, then for each movement, I copy the background to a second page, BLIT the objects to the second page then copy that second page to G0. To the user it looks like the objects are moving over the background without disturbing it.

Do you do that every single time something moves?


How do we go about getting pixels of a GROB to be transparent? The program DIMGROB creator that I used had set some of those pixels to transparent, and they ended up white.

I use a mask with the a silhouette of the object in black on a white rectangle. I AND it onto the background which gives me the background with the black shape on it (looks like a cutout of the object) then XOR the object onto it.

[matalog]

From the chat in this link:

https://www.omnimaga.org/hp-calculator-p...hp-prime)/

It seemed like the 'sprites' can be created and used with transparency colour/pixels, is that not the case?

Most even in-any-way modern programming languages allow some parts of graphics objects to be transparent, are you saying that what you did was to mask them off and there may be another method? Or is there no way to have parts of a GROB transparent apart from using a mask to hide them?

[john gustaf stebbins]

Here is a silly little program I wrote that uses sprites with a transparent background. I use G2 for the sprites by initializing it as a transparent color and then drawing the images on it.

Code:


EXPORT PENDULUMS2()
BEGIN
DIMGROB_P(G1,320,240);
DIMGROB_P(G2,440,25,RGB(255,255,255,255));

// SET UP SPRITES
FOR B FROM 0 TO 19 DO
ARC_P(G2,11+B*22,11,10,
    {#0,RGB(255-B*12,64,B*12)});
ARC_P(G2,14+B*22,14,4,
    {RGB(255-B*12,64,B*12),RGB(MIN(295-B*12,255),104,MIN(B*12,255))});
END;



FOR T FROM 0 TO 1000 STEP .01 DO

RECT_P(G1,RGB(192,192,192));
TEXTOUT_P(T,G1,10,10);

FOR B FROM 0 TO 19 DO
//C:=RGB(255-B*12,64,B*12,64);
//ARC_P(G1,160+150*SIN(T*(1-B/80)),12+B*11,10,{#0,C});
BLIT_P(G1,150+150*SIN(T*(1-B/80)),2+B*11,G2,1+B*22,1,22+B*22,22);
END;

BLIT(G1);

END;



END;

[matalog]

(05-21-2021 07:12 PM)john gustaf stebbins Wrote:  Here is a silly little program I wrote that uses sprites with a transparent background. I use G2 for the sprites by initializing it as a transparent color and then drawing the images on it.

Code:


EXPORT PENDULUMS2()
BEGIN
DIMGROB_P(G1,320,240);
DIMGROB_P(G2,440,25,RGB(255,255,255,255));

// SET UP SPRITES
FOR B FROM 0 TO 19 DO
ARC_P(G2,11+B*22,11,10,
    {#0,RGB(255-B*12,64,B*12)});
ARC_P(G2,14+B*22,14,4,
    {RGB(255-B*12,64,B*12),RGB(MIN(295-B*12,255),104,MIN(B*12,255))});
END;



FOR T FROM 0 TO 1000 STEP .01 DO

RECT_P(G1,RGB(192,192,192));
TEXTOUT_P(T,G1,10,10);

FOR B FROM 0 TO 19 DO
//C:=RGB(255-B*12,64,B*12,64);
//ARC_P(G1,160+150*SIN(T*(1-B/80)),12+B*11,10,{#0,C});
BLIT_P(G1,150+150*SIN(T*(1-B/80)),2+B*11,G2,1+B*22,1,22+B*22,22);
END;

BLIT(G1);

END;



END;

There's nothing silly about that! That's a really good pendulum wave demonstration!

I'll have a good read through it and make sure I understand it. Thanks for sharing that.

[john gustaf stebbins]

(05-21-2021 09:41 PM)matalog Wrote:  There's nothing silly about that! That's a really good pendulum wave demonstration!

I'll have a good read through it and make sure I understand it. Thanks for sharing that.

You're quite kind.

One of the things that took me a while to work out was that if I drew to a transparent graphic, it would become a solid background, where the drawing affected it. I have another version of of this where the balls are drawn using partially transparent colors for each frame, so you can see the balls behind the front ones. I could not figure a way to create partially transparent sprites with the built in drawing commands. The only command that preserved the alpha value for the graphic itself is DIMGROB.

I've not worked with other graphic systems using transparency. I had expected that if I had a color with transparency (alpha 255) and I drew a color with half transparency (alpha 127) I would get a final color with half transparency (alpha 127). I expect there could be some issues with how this would work in G0 (can't let us see the innards of the calculator :^), but it could be very useful for building images in the other graphic variables.

[Tim Wessman]

Take a look at the new ability to embed pictures as data. You should be able to directly use PNG with transparency. Just make sure to unpack it first into a G<N> or other named variable first to avoid PNG decompression each time. That would kill your speed.

[matalog]

(05-22-2021 05:30 AM)Tim Wessman Wrote:  Take a look at the new ability to embed pictures as data. You should be able to directly use PNG with transparency. Just make sure to unpack it first into a G<N> or other named variable first to avoid PNG decompression each time. That would kill your speed.

That sounds great Tim, is it documented somewhere, so I know what I'm attempting to do? I'm quite new to the HP Prime, and still finding my feet using it.

[john gustaf stebbins]

(05-22-2021 05:30 AM)Tim Wessman Wrote:  Take a look at the new ability to embed pictures as data. You should be able to directly use PNG with transparency. Just make sure to unpack it first into a G<N> or other named variable first to avoid PNG decompression each time. That would kill your speed.

I was not able to get that to work, but haven't had time to play with it since the first recent beta. I'll have to try again.

[matalog]

(05-21-2021 07:12 PM)john gustaf stebbins Wrote:  Here is a silly little program I wrote that uses sprites with a transparent background. I use G2 for the sprites by initializing it as a transparent color and then drawing the images on it.

Code:


EXPORT PENDULUMS2()
BEGIN
DIMGROB_P(G1,320,240);
DIMGROB_P(G2,440,25,RGB(255,255,255,255));

// SET UP SPRITES
FOR B FROM 0 TO 19 DO
ARC_P(G2,11+B*22,11,10,
    {#0,RGB(255-B*12,64,B*12)});
ARC_P(G2,14+B*22,14,4,
    {RGB(255-B*12,64,B*12),RGB(MIN(295-B*12,255),104,MIN(B*12,255))});
END;



FOR T FROM 0 TO 1000 STEP .01 DO

RECT_P(G1,RGB(192,192,192));
TEXTOUT_P(T,G1,10,10);

FOR B FROM 0 TO 19 DO
//C:=RGB(255-B*12,64,B*12,64);
//ARC_P(G1,160+150*SIN(T*(1-B/80)),12+B*11,10,{#0,C});
BLIT_P(G1,150+150*SIN(T*(1-B/80)),2+B*11,G2,1+B*22,1,22+B*22,22);
END;

BLIT(G1);

END;



END;

What is it in your program that determines that the pendula will be on a transparent background? Is it the line DIMGROB_P(G2,440,25,RGB(255,255,255,255)); ? Something to do with RGB(255,255,255,255))? Is it only the fourth 255 in that, and the fact that it is greater than 128? And then that you are only drawing pixels of other colours on that layer?

[matalog]

(05-22-2021 05:30 AM)Tim Wessman Wrote:  Take a look at the new ability to embed pictures as data. You should be able to directly use PNG with transparency. Just make sure to unpack it first into a G<N> or other named variable first to avoid PNG decompression each time. That would kill your speed.

Tim, it you looks like you created the program that I used and mentioned in the original post of this thread above. You can find your original post in this old thread: https://www.omnimaga.org/hp-calculator-p...hp-prime)/ With your DIMGROB creator program, how would you then have the output (with relevant pixels coloured your transparency colour in the program) appear transparent?

Also, what is the colour method that your program outputs? This format: #8000800080008000:64h - 64 bit Hex? Would that make it 32768,32768,32768,32768 for R,G,B,A. I'm just trying to understand that. Should the calculator see that as transparent?

[john gustaf stebbins]

(05-22-2021 07:17 PM)matalog Wrote:  What is it in your program that determines that the pendula will be on a transparent background? Is it the line DIMGROB_P(G2,440,25,RGB(255,255,255,255)); ? Something to do with RGB(255,255,255,255))? Is it only the fourth 255 in that, and the fact that it is greater than 128? And then that you are only drawing pixels of other colours on that layer?

Yes, since I'm passing a transparent color to DIMGROB_P it is initializing the graphic as transparent. I'm not sure when the 128 fence is relevant here, it has been a while since I was working this out. RGB takes four inputs, with the fourth being the alpha value for the color (the amount of transparency).

Here is the first version of the program I wrote that uses partially transparent colors to give a glass effect to the balls. I'm using a color with alpha of 64 and get bit of pass through, but the color dominates. The drawing is done with ARC_P.

Code:


EXPORT PENDULUMS()
BEGIN
DIMGROB_P(G1,320,240);

FOR T FROM 0 TO 1000 STEP .01 DO

RECT_P(G1,RGB(192,192,192));
TEXTOUT_P(T,G1,10,10);

FOR B FROM 0 TO 19 DO
C:=RGB(255-B*12,64,B*12,64);
ARC_P(G1,160+150*SIN(T*(1-B/80)),12+B*11,10,{#0,C});

END;

BLIT(G1);

END;



END;

[matalog]

Hey, thanks for the continuous replies, I do appreciate it!

I had a go at getting them moving in front of a background.

EXPORT vispends()
BEGIN
DIMGROB_P(G1,320,240);
DIMGROB_P(G4,320,240);
BLIT_P(G1,0,0,320,240,G0,0,0,320,240);
BLIT_P(G2,0,0,320,240,G0,0,0,320,240);
BLIT_P(G3,0,0,320,240,G0,0,0,320,240);
BLIT_P(G4,0,0,320,240,G0,0,0,320,240);
DIMGROB_P(G1,320,240);
DIMGROB_P(G2,440,25,RGB(255,255,255,255));
FOR T FROM 0 TO 10000 STEP 2 DO
BLIT_P(G1,0,0,320,240,G4,0,0,320,240);
FOR B FROM 1 TO 19 DO
C:=RGB(255-B*12,64,B*12,64);
ARC_P(G1,160+150*SIN(T*(1-B/80)),12+B*22,10,{#0,C});
END;
BLIT(G1);
END;
WAIT()
END;

[matalog]

I finally got what I wanted, by loading a .png image with AFiles and then saving that to a graphics variable, and it works fine.

I assume that is what you were referring to Tim.