Merge branch 'main' of https://github.com/codefrydev/Updates

Author: abhijeetunreal

README.md

@@ -25,7 +25,8 @@ hideMeta: true
 title: "How To"
 author: "PrashantUnity"
 weight: 1
-date: 2024-06-10T11:57:15+05:30
+date: 2024-08-03
+lastmod: 2024-08-03
 dateString: June 2024  
 description: "Guide of How To Create Blog Post, Categories And Etc"
 #canonicalURL: "https://canonical.url/to/page"
@@ -106,7 +107,8 @@ template
 title: "Name Of Page"
 author: "Codefrydev"
 weight: 100
-date: 2024-06-10T11:57:15+05:30
+date: 2024-08-03
+lastmod: 2024-08-03
 dateString: June 2024
 description: "Description Of Page" 
 keywords: [ "NET", "codefrydev", "C sharp", "CFD", "Skia Sharp","Generate Video","Basic","FFMPEG"]
@@ -120,6 +122,8 @@ keywords: [ "NET", "codefrydev", "C sharp", "CFD", "Skia Sharp","Generate Video"
 title: "Replace Me With Actual Title"
 author: ["Replace Author Name","Another Author Name"]
 weight: 100
+date: 2024-08-03
+lastmod: 2024-08-03
 dateString: June 2024  
 description: "Guide of How TO Create Blog Post, Categories AND Etc"
 #canonicalURL: "https://canonical.url/to/page"

content/blog/SkiaSharp/circleandpoints.md

@@ -0,0 +1,154 @@
+---
+title: "Circle and Points And Lines"
+author: "PrashantUnity"
+weight: 104
+date: 2024-08-03
+lastmod: 2024-08-03
+dateString: August 2024  
+description: "Dynamically Generating Bunch of Circle and line and Points on Canvass"
+#canonicalURL: "https://canonical.url/to/page"
+cover:
+    image: "cover.jpg" # image path/url
+    alt: "Generate Thumbnail" # alt text
+    #caption: "Optical Character Recognition"  display caption under cover 
+
+tags: [  "CSharp", "SkiaSharp","Polygon","Trigonometry"]
+keywords: [ "NET", "codefrydev", "C sharp", "CFD", "SkiaSharp","Trigonometry","Polygon","Math"]
+---
+
+## Importing Skiasharp Library from nuget package
+
+```csharp
+#r "nuget:SkiaSharp"
+```
+
+### Importing namespace to use Skia library
+
+```csharp
+using SkiaSharp;
+```
+
+### Points On circle
+
+- This function will calculate points on circle and return as list of Points
+- I Depends on number of points we wants to find out on circle 
+- Radius of Circle r
+- Center of circle where is it located (x, y)
+
+```csharp
+SKPoint[] CirclePoints(int n,float radius=3,float x=0, float y=0 )
+{ 
+    float  degree = (float)(2*Math.PI/n);  
+    return Enumerable
+        .Range(1,n)
+        .Select(i=>degree*i)
+        .Select(i=>(new SKPoint(x+ radius *(float)Math.Cos(i), y+ radius *(float)Math.Sin(i))))
+        .ToArray();
+}
+```
+
+### Line points
+
+- This Function will first Get all points on circle
+- Then pair the all point with each other  as Line Segment Require two Cordinate points one starting point and other end
+
+```csharp
+List<(SKPoint,SKPoint)> GetAllLinePoints(int n,int radius=3,float x=0, float y=0 )
+{
+    var arr =CirclePoints(n:n,x:x,y:y, radius:radius);
+    var ls = new List<(SKPoint, SKPoint)>();
+
+    for(var i =0; i<arr.Length; i++)
+    {
+        for(var j=i+1; j<arr.Length;j++)
+        {
+            ls.Add((arr[i],arr[j]));
+        }
+    }
+    return ls;
+}
+```
+
+### All Circle
+
+- This Function will give us all circular points
+
+```csharp
+List<(float X,float Y)> GetCenter(int m, int n,int radius=60)
+{
+    var ls =new List<(float X,float Y)>();  
+    int X = radius*3;
+    int Y = radius*3;
+    for(var i=1; i<m;i++)
+    {
+        for(var j=1; j<n;j++)
+        {
+            ls.Add((Y*i,X*j));
+        }
+    }
+    return ls;
+}
+```
+
+### List of random Precalculated hex value
+
+```csharp
+var listOfColor = new List<SKColor>
+{
+    SKColor.Parse("#EEF5FF"),
+    SKColor.Parse("#B4D4FF"),
+    SKColor.Parse("#86B6F6"),
+    SKColor.Parse("#176B87"),
+    SKColor.Parse("#00A9FF"),
+    SKColor.Parse("#89CFF3"),
+    SKColor.Parse("#A0E9FF"),
+    SKColor.Parse("#CDF5FD"),
+    SKColor.Parse("#FF90BC"),
+    SKColor.Parse("#FFC0D9"),
+    SKColor.Parse("#F9F9E0"),
+    SKColor.Parse("#8ACDD7"),
+    SKColor.Parse("#F2AFEF"),
+    SKColor.Parse("#C499F3"),
+    SKColor.Parse("#33186B"),
+    
+};
+```
+
+## Final Code to ustiliase all above function
+```csharp
+// Image size (pixels)
+int WIDTH = 1920; 
+int radius =60;
+ 
+Random random = new Random();
+SKBitmap bmp = new(1280, WIDTH);
+SKCanvas canvas = new(bmp);
+canvas.Clear(SKColor.Parse("#fff")); 
+
+SKPaint paint = new() 
+{ 
+    Color = SKColors.White.WithAlpha(100), 
+    IsAntialias = true ,
+    StrokeWidth = 1,
+    ColorF = SKColor.Parse("#000000"),
+    Style = SKPaintStyle.Stroke
+};   
+
+var ls = GetCenter(10,7,radius);
+for(var n=3;n<=26;n++)
+{
+    float X = ls[n-3].Y;
+    float Y = ls[n-3].X;
+    paint.ColorF =listOfColor[random.Next(0,listOfColor.Count)];
+    foreach(var i in GetAllLinePoints(n:n,x:X,y:Y, radius:radius))
+    { 
+        canvas.DrawLine(i.Item1,i.Item2,paint);
+        canvas.DrawText($"{n} Points",X-20,Y+80,paint);
+    }
+    canvas.DrawCircle(X,Y,60,paint);
+}
+bmp.Display()
+```
+- Image Generated using above Code 
+
+![Result](./result.jpg)

content/blog/SkiaSharp/circleandpoints/cover.jpg

@@ -0,0 +1,194 @@
+---
+title: "Generating a Hexagonal Grid with SkiaSharp in C#"
+author: "PrashantUnity"
+weight: 102
+date: 2024-08-03
+lastmod: 2024-08-03
+dateString: August 2024  
+description: "This guide explains how to generate a hexagonal grid using the SkiaSharp library in C#. It covers the basic concepts of hexagon geometry, provides functions to calculate hexagon points from a single coordinate, and demonstrates how to draw a complete hexagonal grid on a canvas. The tutorial includes code snippets and explanations to ensure the implementation is easily understandable and modifiable by reader."
+#canonicalURL: "https://canonical.url/to/page"
+cover:
+    image: "cover.jpg" # image path/url
+    alt: "Generate Thumbnail" # alt text
+    #caption: "Optical Character Recognition"  display caption under cover 
+
+tags: [  "CSharp", "SkiaSharp","Hexagon","Hexagonal Grid"]
+keywords: [ "NET", "codefrydev", "C sharp", "CFD", "SkiaSharp","Hexagon","Hexagonal Grid","Skia"]
+---
+
+
+## Concept
+
+- A hexagon consists of six vertices.
+- Given one vertex coordinate, we can find all other vertices as the angle between two edges is 120 degrees.
+- Consider a starting point **(x, y)** and the width of an edge **b**.
+- The right neighbor points will be **(x + b, y)**.
+- The right neighbor of the right neighbor will be **(x + b + b * Cos(60), y + b * Sin(60))** and so on.
+
+### Example
+
+![Hexagon Points](./hexagon.png)
+
+## Code Implementation
+
+### SkiaSharp Setup
+
+- Refer to the [SkiaSharp setup guide]({{< relref "blog/skiasharp/basic.md" >}})
+
+### Importing Skiasharp Library
+
+```csharp
+#r "nuget:SkiaSharp"
+```
+
+### Importing name space
+
+```csharp
+using SkiaSharp;
+using System.Collections.Generic;
+
+```
+
+### Function to Get Hexagon Points from a Single Coordinate
+
+```csharp
+SKPoint[] GetPoints(float x, float y,float width)
+{
+    var ls = new List<SKPoint>();
+
+    ls.Add(new SKPoint(x                 ,y));
+    ls.Add(new SKPoint(x + width         ,y));
+    ls.Add(new SKPoint(x + width +width/2,y + width*MathF.Sqrt(3)/2));
+    ls.Add(new SKPoint(x + width         ,y + width*MathF.Sqrt(3))); 
+    ls.Add(new SKPoint(x                 ,y + width*MathF.Sqrt(3))); 
+    ls.Add(new SKPoint(x - width/2       ,y + width*MathF.Sqrt(3)/2)); 
+    ls.Add(new SKPoint(x,y));
+    return ls.ToArray();
+}
+```
+
+## Function to Get Next Starting Point
+
+```csharp
+(float,float) GetNextPoint(float x, float y, float width)
+{
+    return (x + width +width/2,y + width*MathF.Sqrt(3)/2);
+}
+```
+
+- This function calculates the next starting coordinate from **(x, y)**.
+
+![Hexagone points](./nextpoint.png)
+
+- So we will have two starting point
+- both will come alternatively
+- Below Code Generate the possible points
+
+```csharp
+int width = 1200;
+int height = 750;
+int step =60;
+SKBitmap bmp = new(width, height);
+SKCanvas canvas = new(bmp);
+
+canvas.Clear(SKColor.Parse("#fff"));
+
+Random rand = new(0);
+SKPaint paint = new() 
+{ 
+    Color = SKColors.White.WithAlpha(100), 
+    IsAntialias = true ,
+    StrokeWidth = 4,
+    ColorF = SKColor.Parse("#003366"),
+    Style = SKPaintStyle.Stroke
+};  
+ var ls = GetPoints(width/5,height/3,200); 
+var skpath = new SKPath();
+skpath.AddPoly(ls); 
+canvas.DrawPath(skpath,paint);
+
+paint.TextSize = 48f;
+canvas.DrawText($"(x,y)",ls[0],paint);
+canvas.DrawText($"(x + (w)*3/2, y + (w)*sqrt(3)/2)",ls[2],paint);
+
+canvas.DrawText($"(x + (w)*3/2, y + 0)",(ls[0].X +200*(3.0f/2)),ls[0].Y,paint);
+
+bmp.Display();
+
+```
+
+![Hexagone points](./points.jpg)
+
+## final Code
+
+- I am Drawing hexagonal Shape in vertically fashion
+- Line number 22 that is while loop is for width of image Horizontaly
+- Line number 37 for vertically for height
+
+- Line Number 25 to 36 will deside next verticall starting cordinate points.
+
+```csharp
+int width = 1200;
+int height = 750;
+int step = 60;
+SKBitmap bmp = new(width, height);
+SKCanvas canvas = new(bmp);
+
+canvas.Clear(SKColor.Parse("#fff"));
+
+SKPaint paint = new()
+{
+    IsAntialias = true,
+    StrokeWidth = 4,
+    Color = SKColor.Parse("#003366"),
+    Style = SKPaintStyle.Stroke
+};
+
+float incrementY = step * MathF.Sqrt(3);
+bool displaceY = false;
+float i = 0;
+
+while (i < width)
+{
+    float y = 0;
+    if (!displaceY)
+    {
+        var (nextX, nextY) = GetNextPoint(i, 0, step);
+        y = nextY;
+        i = nextX;
+    }
+    else
+    {
+        y = 0;
+        i += step * 1.5f;
+    }
+
+    for (float j = y; j < height; j += incrementY)
+    {
+        var points = GetPoints(i, j, step);
+        var path = new SKPath();
+        path.AddPoly(points);
+        canvas.DrawPath(path, paint);
+    }
+
+    displaceY = !displaceY;
+}
+
+bmp.Display();
+```
+
+### Explanation
+
+1. **Canvas Setup**: Initializes a canvas with a specified width and height, and clears it with a white background.
+2. **Paint Setup**: Configures the paint with desired properties such as color, stroke width, and style.
+3. **Hexagon Generation**:
+    - Calculates the vertical increment (`incrementY`) based on the step size.
+    - Uses a `while` loop to iterate horizontally across the canvas.
+    - Uses a nested `for` loop to iterate vertically and draw hexagons.
+    - Alternates the starting Y-coordinate to create a staggered hexagon grid.
+
+### Result
+
+The above code generates a hexagonal grid pattern as shown in the image below:
+
+![Hexagone points](./grid.jpg)