Demo Scene Blitter Objects
lazarus / 39-Graphics

----------------------------------------------------------------------
Gigatron · 2024-05-28 21:21

Hi,
On the same idea to display blitter object BOBs , made a little
program coded faster than light , using BGRA Component to play with
formula;

I think I would die in front of my PC before exploiting the full
potential of the BGRA component..

Have fun ;

https://www.youtube.com/watch?v=VFs2qnfrHO8&t=534s

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i unit
Unit1; {$mode objfpc}{$H+} interface uses  Classes, SysUtils, Forms,
Controls, Graphics, Dialogs, ExtCtrls, Spin,  StdCtrls,
BGRAVirtualScreen, BGRABitmap, BGRABitmapTypes; type   { TForm1 }  
TForm1 = class(TForm)    BGRAVirtualScreen1: TBGRAVirtualScreen;   
FloatSpinEdit1: TFloatSpinEdit;    FloatSpinEdit2: TFloatSpinEdit;   
FloatSpinEdit3: TFloatSpinEdit;    GroupBox1: TGroupBox;    SpinEdit1:
TSpinEdit;    Timer1: TTimer;    procedure
BGRAVirtualScreen1Redraw(Sender: TObject; Bitmap: TBGRABitmap);   
procedure FormCreate(Sender: TObject);    procedure
Timer1Timer(Sender: TObject);  private   star  : TBGRABitmap; 
public   end; var  Form1: TForm1;  size  : integer;  fc,fs,t :
single; implementation {$R *.lfm} { TForm1 } procedure
TForm1.FormCreate(Sender: TObject);begin   size :=160;   fc  := 2.0; 
 fs  := 8.0 ;   t := 0;   star :=
TBGRABitmap.Create('ball.png'); end; procedure
TForm1.Timer1Timer(Sender: TObject);begin       t    := t +
FloatSpinEdit3.value;       fc   := FloatSpinEdit1.value;       fs  
:= FloatSpinEdit2.value;       size := SpinEdit1.value;     
 BGRAVirtualScreen1.RedrawBitmap;end; procedure
TForm1.BGRAVirtualScreen1Redraw(Sender: TObject; Bitmap:
TBGRABitmap);var  i: integer;begin       for i:=0 to 79 do     
 begin       Bitmap.PutImage(320+round(size*sin(i*fc+t)),220+round(siz
e*cos(i*fs+t)),star,dmDrawWithTransparency);        end;end; end.

----------------------------------------------------------------------
circular · 2024-05-28 21:40

Quote from: Gigatron on May 28, 2024, 11:21:51 pmI think I would die
in front of my PC before exploiting the full potential of the BGRA
component..
Haha at least that's dying doing something you like

----------------------------------------------------------------------
TRon · 2024-05-29 04:22

Again a nice one Gigatron.

Quote* ball.png (1.42 kB, 32x32 - viewed 31 times.)
what a shame....  all this bgra treasures and then leaving us with
some ugly ball 

Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i ..uses 
BGRAGradients;.. procedure TForm1.createstar;var  ps:
TPhongShading;begin  ps := TPhongShading.Create;  ps.LightPositionZ :=
180;  ps.SpecularIndex := 7;  ps.AmbientFactor := 0.5; 
ps.LightSourceIntensity := 350;  ps.LightSourceDistanceTerm := 200; 
ps.LightPosition := point(200,120);   star :=
TBGRABitmap.Create(32,32, BGRAPixelTransparent); 
ps.DrawSphere(star,rect(0,0,32,32), 8,BGRA(255,255,0));  ps.Free;end; 
I fully admit to have no idea how all the phongshading settings work
but it's fun to play with nonetheless

----------------------------------------------------------------------
circular · 2024-05-29 09:02

Here are some explanations on the settings. 

Overview
The TPhongShading component is designed to simulate realistic shading
on 3D shapes standing on a plane at Z = 0. The shapes, such as a half-
sphere, occupy a square in the X and Y coordinates with its top left
corner at the origin (0, 0), with the sphere rising in altitude at the
center of the square, giving its points a positive Z coordinate.

Light Position and Color
Light X and Y coordinates: by default, the light source is positioned
at (-100, -100), to the top-left of the square.LightPositionZ: this is
the Z coordinate of the light source. Increasing this value changes
the angle of the light. To achieve visually appealing shapes, the
altitude should be sufficient for reflections but not too
high.LightColor: typically white as human perception adjusts gray
objects to appear consistent under different lighting conditions, for
example daylight blueness changes during the day. Altering it can
introduce an unrealistic look.LightSourceDistanceTerm: adds an extra
distance between the light source and the object, reducing contrast
due to the object's size.The shading considers three main phenomena:
ambiant light, diffuse light and specular highlight.

Ambiant light
AmbientFactor: determines the base illumination of the object,
independent of the light's position.

Diffuse light
DiffuseFactor: controls how much light is diffused by the object based
on the angle of the light. This creates brighter and darker areas on
the sphere, depending on the light's angle of
incidence.NegativeDiffusionFactor: Darkens the side opposite to the
light source, accounting for the limited travel of light around the
object (considering the light source contributes to ambiant
light).Specular highlight
SpecularFactor: indicates how shiny the object is, simulating light
bouncing off like a mirror. The position of the highlight depends on
the relative positions of the light source and the
observer.SpecularIndex: defines the narrowness of the reflection. The
specular reflection matches the light source color, which can differ
from the object's color.

----------------------------------------------------------------------
Gigatron · 2024-05-29 14:02

@Tron
Of course the ball.png is not perfect but you can replace it with
better image..

----------------------------------------------------------------------
TRon · 2024-05-29 23:54

Quote from: circular on May 29, 2024, 11:02:41 amHere are some
explanations on the settings. 
Thank you very much for the extensive explanation(s) circular. That is
very much appreciated.

Pardon my ignorance but instead of what seems to be you repeating
documentation is there something I can read about such details of the
different effects that BGRA contains/support ? Right now I just try
and dive into the examples, sources and wiki to get myself acquainted
by playing with them but it is not always enough to get a good
understanding of some of details of the effects.

For lolz I modified Gigatron's example to draw phong shaded spheres
that have a light source originating from the middle of the screen at
a certain distance (which would have taken me days to figure out
without your splendid explanation). It could just as well be an
animated point to make it appear even more dynamic.

Quote from: Gigatron on May 29, 2024, 04:02:57 pmOf course the
ball.png is not perfect but you can replace it with better image..
Yes, I know 

I understand that it is easy enough to add other graphics for the bob
routine but that is imho a bit besides the point.

My point is that BGRA contains so many nice features that it almost
feels like a shame that the code you present looks like it does not
make full use of BGRA. That is not meant to criticize the code itself
but in all honestly for most of the effects you showed there is no
need to use BGRA et all. For instance all effects shown so far are
pretty easy to implement using f.e. PTC and/or normal bitmap graphics.

I look at BGRA as the tool that can be used to create such images and
color-schemes as attached in your post, and not (only) for displaying
them 

edit: for some colourful addition:
Code: Pascal  [Select][+][-]window.onload = function(){var x1 =
document.getElementById("main_content_section"); if (x1) { var x =
document.getElementsByClassName("geshi");for (var i = 0; i procedure
TForm1.BGRAVirtualScreen1Redraw(Sender: TObject; Bitmap:
TBGRABitmap);const  h: byte = 0;         // hue valuevar  i,x,y :
integer;     // index, xcoord and ycoord of bob  box   : TRect;      
// boxed position of bob  r,g,b : byte;        // red, green and blue
color values  cd    : integer = 2; // color distance between bobs  cs
  : integer = 1; // color cycling speedbegin  for i:=0 to 39 do 
begin    FShading.LightPosition := point(320, 220);    x :=
320+round(size*sin(i*fc+t));    y := 220+round(size*cos(i*fs+t));   
box := bounds(x, y, 32, 32);    HLStoRGB((h + i * cd) mod 255, 255 shr
1, 255, r,g,b);    FShading.DrawSphere(bitmap,box,8,BGRA(r,g,b)); 
end;   h := (h + cs) mod 255;end;

----------------------------------------------------------------------
Gigatron · 2024-05-30 14:02

Awesome @Tron thanks for the Phong effect..