MovingCircles

[Adri]

All,

The idea for this short application is to create an effect like the one which can be seen at "https://atom.io/":
   - Rotating circles of different width having 'gaps' and different color.
   - Having also an 'atom sign' in the centre would be a nice addition....

   ToDo:
   - Clearly separated segments to each circle.
   - Rotation speed of every circle INDEPENDANT to others.
   - Rotation clock- and anti-clockwise by choice.
   - Finalize DrawAtom procedure.                                                         

This application is absolutely a non-urgent issue and just a little exercise I started; a demo if you wish. Currently the circles are not all showing as if they are (with independant speed) rotating and also not if they are rotating clock- and counter-clock wise.
If anyone having any spare time could have a look and some suggestion on these issues than you are welcome to comment.

Many thanks in advance,     Adri

[lainz]

If you look at the HTML there are several SVG images that are being rotated.
So better instead of drawing circles with the canvas, you can use images, and then just rotate them.

The atom in the center is just another image placed in the center.

Is hard to draw that stuff with only code, so in my opinion let the graphic design to dedicated programs 

[circular]

Interesting.

Some remarks:
- in the OnPaint, the bmp is created. That does not make sense. You can create it in the FormCreate for example. In the OnPaint event, you are supposed to do the drawing.
- the drawing is done in the OnTimer, though you cannot do that on MacOS. So that won't display anything on this platform. As mentioned before, the drawing I supposed to be in the OnPaint (at least bmp.Draw(Canvas,0,0) because in theory you can draw inside a bitmap whenever you want)
- DrawAtom and MakeImg use Canvas. That's not recommended because that doesn't handle antialiasing or transparency. Also in your code you intent to rotate in Canvas2d, so you need to use Canvas2d to draw.

[lainz]

I will try to code this since it looks good, but using PNG images, based on the SVG ones.

[lainz]

Here it is:
https://github.com/bgrabitmap/demo/tree/master/atom

[lainz]

I'm not sure on how to optimize it, it's a bit slow on my PC.

Edit: Maybe following the original idea of using canvas to draw the paths will be faster than rotating images.

Or even using the SVG images instead of png, and rotate the SVG code directly?

[circular]

Yep you can rotate the SVG. When you draw on Canvas2d, the transformation will be applied.

[lainz]

Can't do this sorry, too hard for me to understand Canvas2D and SVG.

Attached how far I can get.

Plus there is some exception drawing the SVG's.

[circular]

Ok. The exception was raised because there are some odd number of values in dash arrays. I've added support for that on dev-bgrabitmap.

Here is then how to draw rotated and scaled:

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

1. procedure TAtoms.Draw(const aBitmap: TBGRABitmap; ADPI: single);
2. var
3.   i: integer;
4. begin
5.   for i := 0 to FAtoms.Count-1 do
6.     try
7.       aBitmap.Canvas2D.resetTransform;
8.       aBitmap.Canvas2D.translate(aBitmap.Width/2, aBitmap.Height/2);
9.       aBitmap.Canvas2D.rotate(FAtoms[i].Angle*Pi/180);
10.       FAtoms[i].Image.Draw(aBitmap.Canvas2D,taCenter, tlCenter, 0, 0, ADPI);
11.     except
12.     end;
13. end;

Note: transformations are applied in reverse order. So first the image is drawn with at (0,0), then it is rotated (which is always done with center around (0,0) ) and then it is translated. If for example the center would be at (x,y) then one would need to do translate(-x, -y) for the rotation to be done around the such center.

And to call it with the adequate DPI:

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

1. procedure TfrmMain.BGRAVirtualScreen1Redraw(Sender: TObject; Bitmap: TBGRABitmap
2.   );
3. var dpi: single;
4. begin
5.   dpi := Screen.PixelsPerInch;
6.   if not BGRAVirtualScreen1.BitmapAutoScale then
7.     dpi *= BGRAVirtualScreen1.GetCanvasScaleFactor;
8.   Atoms.Draw(Bitmap, dpi);
9. end;  

The default DPI is 96 both for the LCL and for the SVG. So we can basically tell the SVG to be drawn at the DPI of the LCL. With Retina the scaling factor needs to be applied as well, because the LCL coordinates corresponds to double pixels.

[lainz]

Works really fast =) As well the quality of the image is better.

I keep both demos since both can be usefull, this is the svg version
https://github.com/bgrabitmap/demo/tree/master/atom_svg

[circular]

Yeah. Using the SVG is a good idea, it allows to prepare the design without having to write lots of code.

[winni]

Hello!

I created a different version of the MovingCircles.

Nearly all values are random values:
radius, direction, bright color, dark color, line width,
length of segments, speed of circle

Atom sign in the middle is also rotating.

Only Arc is used. And for the Atom polylines.
No SVG and no Canvas2D

Only ~ 300 lines of code.

Winni

Screenshot + Poject in the attachment.

[circular]

Interesting. 

In fact, to make the code even shorter, you could use ComputeArc functions for the atom and for rotatePoly you could use affine transformations of BGRATransform.

Or even just the Arc function.

[winni]

Hi!

@circular:

Bug or feature?
I have noticed this a long time ago, but with the circles it came again to my mind:

Talking about the Arc:

If StartangleRad  and EndAngleRad  have the same value then Arc draws a circle.
With a mini gap at the related angle.

Try:

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

1. var s1,s2 : single;
2. ....
3. s1 := 1.5;
4. s2 := s1;
5.  img.Arc(center.x,center.y,200,200,s1,s2,cssRed,3,false,BGRAPixelTransparent);
6.  
7.  

Is this a bug?
Or do you want to show that a circle has a beginning and and end? Despite other opinions?

I think somewhere in the code is a >= where only a > should be. Wild shot in the dark

Winni

[lainz]

Looking really good. This will be a nice addition to the music visualizer @fred vs is doing. Maybe zooming it and out to show the beats.