BGRAbmp Pythagoras Tree: Set Opacity for the Fill

[Boleeman]

Finally got to use BGRAbmp to create the Pythagoras Tree that I originally created on a TPaintbox and then on a TImage..

Got it to auto file name when saving to transparent and white background png.

Just wondered how to use BGRAbmp to get the filled part to be partly see though.
I wanted to be able the see the branch lines though the filled squares (sort of like a window effect).

I tried all sorts of things to have an opacity setting using a TSpinEdit, but seem to not be able to get far.



Attached is what I have achieved so far. Enjoy.

[Dzandaa]

Hi,

BGRABmp I suppose is TBGRABitmap

To choose the color, you have to use a TBGRAPixel instead a TColor
TBGRAPixel have r,g,b,a (a= transparency)

Ex: My Picture := TBGRABitmap.Create(800, 600, BGRAPixelTransparent); 

Try this:

Code: Pascal  [Select][+][-]

1. var
2.   Pt: Array[0..4] of TPointF;
3.   dx, dy, x3, y3, x4, y4, x5, y5: Double;
4.   Col: TBGRAPixel;    
5.   PictOrig : TBGRABitmap;
6.  
7. ....
8.  
9.  
10.    PictOrig := TBGRABitmap.Create(w, h, BGRAPixelTransparent);
11.  
12.   dx := x2 - x1;
13.   dy := y1 - y2;
14.   x3 := x2 - dy;
15.   y3 := y2 - dx;
16.   x4 := x1 - dy;
17.   y4 := y1 - dx;
18.   x5 := x4 + (dx - dy) / 2;
19.   y5 := y4 - (dx + dy) / 2;
20.  
21.   Col.red := 255-((Depth * 25) mod 255);;
22.   Col.green := 0;
23.   Col.blue := (Depth * 25) mod 255;
24.   Col.alpha := 200;                
25.   Pt[0].X := x1;
26.   Pt[0].Y := y1;
27.   Pt[1].X := x2;
28.   Pt[1].Y := y2;
29.   Pt[2].X := x3;
30.   Pt[2].Y := y3;
31.   Pt[3].X := x4;
32.   Pt[3].Y := y4;
33.   Pt[4].X := x1;
34.   Pt[4].Y := y1;
35.  
36.   PictOrig.FillPoly(Pt, Col, dmDrawWithTransparency, True);
37.  
38.  

Hope that help

B->

[Dzandaa]

Hi,
I like you graphic demos

Here is mine, based on your demo , using BGRABitmap, just a quick try.

B->

[Boleeman]

Dzandaa just BRILLIANT You are Truly Amazing.

That was exactly what I was looking for but with the alpha a bit lower. I appreciate that you did that demo, as I needed to actually see it working to try to understand the coding. So the key is TBGRAPixel instead a TColor and dmDrawWithTransparency.

I wanted the branches to appear over the filled squares in a more balanced way, as shown in the screen shot below.


Thank you for your kind words Dzandaa. I also admire your skills with bgrabmp and your great help with the graphics related stuff and the other Lazarus codes. Always very much appreciated.

When trying to do the opacity I was experimenting with fillrect and TBGRAPixel, but was going round in complete circles until eventually I gave up.

I noticed that you save to jpg instead of png. Sort of wondered why? I thought png was better at doing opacity.

Also noticed how your program works faster. I was getting the program to repaint after each TSpinEdit change, which probably makes things more sluggish. With my original code if you select the colorTips checkbox and then the BrowntoGreen checkbox things slow down even more (doing recursions and antialiasing puts on a load). Wondered how to speed things up there.

[lainz]

looking good =)

[Boleeman]

Yes Lainz so great to see things work out.

Was getting frustrated trying to get that opacity effect going round in circles, that I felt it was defeating me.
We certainly have go some talented people on this forum.

I like the blue tips on the attached picture below. Acheived the effect by these settings:
  Col.red := 255-((Depth * 50) mod 255);
  Col.green := 255-((Depth * 50) mod 255);
  Col.blue := (Depth * 13) mod 255;
  Col.alpha := 120;

I think maybe the jpg compression has un-sharpened the non-filled line effect of the tree branches.

Also just realized that it would be nice to have a neon glow effect for the unfilled tree, with bgrabmp ?

[lainz]

Check:
https://wiki.freepascal.org/Sample_Graphics#Text_Shadow

Code: Pascal  [Select][+][-]

1.   // Neon Shadow ''(better with Black background)''
2.   bmp1:= TextShadow(200,40,txt,32,BGRA(255,255,255,200),BGRA(0,255,0,255),0,0,5);
3.   bmp1.Draw(Canvas,0,80,False);
4.   bmp1.Free;

   

As you can see in the demo, a glow effect is just a colored drawing with a bright color, blurred, a "shadow".

[Boleeman]

I had a few other ideas for extending the design.

With the TwinTrees picture it is almost a bit like a jelly fish. It would be nice to animate it so that it compresses and stretches horizontally to imitate a jelly fish swimming.

[lainz]

I've done that before, just check this demo and adapt it to your code:
https://github.com/bgrabitmap/demo/tree/master/fractal_tree_2

As well is animated.

[Boleeman]

Thanks Lainz.

I will Check: https://wiki.freepascal.org/Sample_Graphics#Text_Shadow and https://github.com/bgrabitmap/demo/tree/master/fractal_tree_2

and your demo code.

There was also a glow effect (https://forum.lazarus.freepascal.org/index.php/topic,30839.msg202092.html#msg202092)  in some of the threads and Phong Shading on this forum.

What I wanted was glow effect for the unfilled tree. Also wanted to try to color cycle the colors, starting from the base and going radially to the outside branches. Like a color morph of the tree. Dzandaa did a nice HSL animation of a spiral on bgrabmp a while ago that was so hypnotic to watch.

[Boleeman]

Lainz.
 I also wanted to ask why you used vsCanvas: TBGRAVirtualScreen; for the other fractal tree demo?
Was it to scroll the tree with vsCanvasMouseWheelDown?

[lainz]

Lainz.
 I also wanted to ask why you used vsCanvas: TBGRAVirtualScreen; for the other fractal tree demo?
Was it to scroll the tree with vsCanvasMouseWheelDown?

I use BGRAVirtualScreen because it provides a Bitmap property OnRedraw. (Like OnPaint of TCanvas or form OnPaint).

As well it resizes the bitmap when you resize the window.

[Dzandaa]

Hi,
@Boleeman:
You can save and load pictures in .jpg OR .png, just choose it in the Load/Save Dialog.

You can also Zoom with the mouse wheel and Pan with the mouse button down.

Thank for the compliment.

B->

[Dzandaa]

Hi
@Boleeman

as you like Graphics too, here is a new one: The Dragon Curve.

B->

[Boleeman]

Lainz. thank you for your reply about  vsCanvas and TBGRAVirtualScreen. Been wondering these for a while and will need to play around.


Dzandaa, those Dragons are nice. I ended up making the save to png, instead of jpg.

Using sine and cosine arrays and HSLA for the color palette. Just in time for Chinese New Year. Just joking!

I compared the sizes of the picture files for three different levels and noticed something odd about the sizes:

level 13, dragon1.png , 29 kb
level 14, dragon2.png, 153 kb
level 15, dragon3.png, 76 kb

The higher the level, the more detailed the graphics but for some reason level 14 is double the size of level 15.

I also could see DrawLineAntialias. I used DestBitmap.Canvas.AntialiasingMode:=amON in my Pythagoras Tree code. Did not know of DrawLineAntialias.

I liked your previous Pythagoras Tree interface with mouse wheel Zoom and mouse button down Pan. Also liked the way the scroll bars appeared when the window was resized. Nice resizing effect.

I played around with another way of creating dragon curves that uses recursive axiom rules. Attached are some pictures. I attached the code for the program in the next thread. It can make variations of the dragon curve as well as other curves. Attached are some pictures.

As always, thanks for your help. Very much like playing with graphics related stuff.