Generate Thumbnail

Hex grid in SkiaSharp

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 ...

August 3, 2024 · 3 min · 634 words · PrashantUnity
Generate Thumbnail

Trig tables in SkiaSharp

Trigonometry Table Generation Trignonometry Table Code used to Generate Above Table 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 int width = 1500; 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 }; paint.TextSize = 48f; string backGroundColor ="#fff"; canvas.Clear(SKColor.Parse(backGroundColor)); paint.Style = SKPaintStyle.Fill; string trignometricTable = "Trigonometry Table"; string root = "\u221A"; string theta ="\u03B8"; string degree ="\u00B0"; string inf ="\u221E"; var ls = new List<List<string>>(); ls.Add(["",$"0{degree}",$"30{degree}",$"45{degree}",$"60{degree}",$"90{degree}"]); ls.Add([$"Sin{theta}",$"0",$"1/2",$"1/{root}2",$"({root}3)/2",$"1",]); ls.Add([$"Cos{theta}",$"1",$"({root}3)/2",$"1/{root}2",$"1/2",$"0",]); ls.Add([$"Tan{theta}",$"0",$"1/{root}3",$"1",$"{root}3",$"{inf}",]); ls.Add([$"Cosec{theta}",$"{inf}",$"2",$"{root}2",$"2/{root}3",$"1",]); ls.Add([$"Sec{theta}",$"1",$"2/{root}3",$"{root}2",$"2",$"{inf}",]); ls.Add([$"Cot{theta}",$"{inf}",$"{root}3",$"1",$"1/{root}3",$"0",]); float shifx =150; float shify =120; float verticalMax = 600 + shify; float horizontalMax = 1200 + shifx; for(var i=shify; i<height; i+=100) { canvas.DrawLine(shifx,i,horizontalMax,i,paint); } for(var i=shifx; i<width; i+=200) { canvas.DrawLine(i,shify,i,verticalMax,paint); } paint.TextAlign = SKTextAlign.Center; canvas.DrawText(trignometricTable,width/2,100,paint); float y =200; foreach(var i in ls) { float x =shifx+100; foreach(var j in i) { canvas.DrawText(j,x,y,paint); x+=200; } y+=100; } bmp.Display(); 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 int width = 1500; 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 }; paint.TextSize = 48f; string backGroundColor ="#fff"; canvas.Clear(SKColor.Parse(backGroundColor)); paint.Style = SKPaintStyle.Stroke; var skPath = new SKPath(); float diagonal = 600; float rX = 150; float rXX = rX + diagonal*MathF.Sqrt(3)/2; float rY = 150; float rYY = rY +diagonal/2; SKPoint[] rt = [new SKPoint(rX,rY),new SKPoint(rX,rYY),new SKPoint(rXX,rYY)]; float aX = width/2; float aY = 300; canvas.DrawText("1",rX-30,(rY+rYY)/2 ,paint); canvas.DrawText("2",(rX+rXX)/2,(rY+rYY)/2 -10 ,paint); canvas.DrawText("\u221A3",(rX+rXX)*1/2.5f,rYY +50 ,paint); var skpath = new SKPath(); skpath.AddPoly(rt); canvas.DrawPath(skpath,paint); bmp.Display();

August 3, 2024 · 2 min · 370 words · PrashantUnity
Generate Thumbnail

Circles & lines in SkiaSharp

Setting Up SkiaSharp 1 #r "nuget:SkiaSharp" Importing namespace to use Skia library 1 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) 1 2 3 4 5 6 7 8 9 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 1 2 3 4 5 6 7 8 9 10 11 12 13 14 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 1 2 3 4 5 6 7 8 9 10 11 12 13 14 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 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 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 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 // 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

August 3, 2024 · 2 min · 403 words · PrashantUnity