Mystify with Blazor

Author: swharden

examples/2021-01-09-blazor-mystify/MystifyBlazor/App.razor

@@ -0,0 +1,10 @@
+<Router AppAssembly="@typeof(Program).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
+    </Found>
+    <NotFound>
+        <LayoutView Layout="@typeof(MainLayout)">
+            <p>Sorry, there's nothing at this address.</p>
+        </LayoutView>
+    </NotFound>
+</Router>

examples/2021-01-09-blazor-mystify/MystifyBlazor/Models/Color.cs

@@ -0,0 +1,49 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace MystifyBlazor.Models
+{
+    public class Color
+    {
+        public double Hue;
+
+        public Color(double hueFrac = .5) =>
+            Hue = hueFrac;
+
+        public override string ToString() =>
+            ColorFromHSV(Hue * 360);
+
+        /// <summary>
+        /// Convert a hue (on 360º scale) to RGB hex string
+        /// </summary>
+        private static string ColorFromHSV(double hue, double saturation = 1, double value = 1)
+        {
+            hue %= 360;
+            int hi = Convert.ToInt32(Math.Floor(hue / 60)) % 6;
+            double f = hue / 60 - Math.Floor(hue / 60);
+
+            value *= 255;
+            int v = Convert.ToInt32(value);
+            int p = Convert.ToInt32(value * (1 - saturation));
+            int q = Convert.ToInt32(value * (1 - f * saturation));
+            int t = Convert.ToInt32(value * (1 - (1 - f) * saturation));
+
+            static string Hex(int r, int g, int b) => $"#{r:X2}{g:X2}{b:X2}";
+
+            if (hi == 0)
+                return Hex(v, t, p);
+            else if (hi == 1)
+                return Hex(q, v, p);
+            else if (hi == 2)
+                return Hex(p, v, t);
+            else if (hi == 3)
+                return Hex(p, q, v);
+            else if (hi == 4)
+                return Hex(t, p, v);
+            else
+                return Hex(v, p, q);
+        }
+    }
+}

examples/2021-01-09-blazor-mystify/MystifyBlazor/Models/Corner.cs

@@ -0,0 +1,57 @@
+using System;
+
+namespace MystifyBlazor.Models
+{
+    /// <summary>
+    /// A moving corner has a position and velocity
+    /// </summary>
+    public class Corner
+    {
+        public double X;
+        public double Y;
+        public double XVel;
+        public double YVel;
+
+        public Corner() { }
+
+        public static Corner RandomPoint(Random rand, double width, double height) =>
+            new Corner()
+            {
+                X = width * rand.NextDouble(),
+                Y = height * rand.NextDouble(),
+                XVel = rand.NextDouble() - .5,
+                YVel = rand.NextDouble() - .5,
+            };
+
+        public Corner(double x, double y, double xVel, double yVel) =>
+            (X, Y, XVel, YVel) = (x, y, xVel, yVel);
+
+        public Corner NextPoint(double delta, double width, double height)
+        {
+            Corner pt = new Corner(X, Y, XVel, YVel);
+            pt.Advance(delta, width, height);
+            return pt;
+        }
+
+        public void Advance(double delta, double width, double height)
+        {
+            X += XVel * delta;
+            Y += YVel * delta;
+
+            if (X < 0 || X > width)
+                XVel *= -1;
+            if (Y < 0 || Y > height)
+                YVel *= -1;
+
+            if (X < 0)
+                X += 0 - X;
+            else if (X > width)
+                X -= X - width;
+
+            if (Y < 0)
+                Y += 0 - Y;
+            if (Y > height)
+                Y -= Y - height;
+        }
+    }
+}

examples/2021-01-09-blazor-mystify/MystifyBlazor/Models/Field.cs

@@ -0,0 +1,49 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace MystifyBlazor.Models
+{
+    /// <summary>
+    /// This class manages shapes (which are historical records of polygons)
+    /// </summary>
+    public class Field
+    {
+        private readonly Random rand = new Random();
+        private List<Shape> Shapes = new List<Shape>();
+        public int ShapeCount = 2;
+        public int CornerCount = 4;
+        public int HistoryCount = 5;
+        public bool Rainbow = false;
+        public double Speed = 20;
+
+        public void Advance(double width, double height)
+        {
+            // delete shapes with incorrect number of corners
+            Shapes = Shapes.Where(x => x.Polygons[0].CornerCount == CornerCount).ToList();
+
+            // ensure correct number of shapes
+            while (Shapes.Count < ShapeCount)
+                Shapes.Add(new Shape(rand, CornerCount, width, height, null));
+            while (Shapes.Count > ShapeCount)
+                Shapes.RemoveAt(0);
+
+            // advance each shape
+            foreach (var shape in Shapes)
+                shape.Advance(Speed, width, height, HistoryCount, Rainbow);
+        }
+
+        public void RandomizeColors()
+        {
+            for (int i = 0; i < Shapes.Count; i++)
+                Shapes[i].Polygons.Last().Color.Hue = rand.NextDouble();
+        }
+
+        public string GetJSON()
+        {
+            var polyJsonStrings = Shapes.SelectMany(x => x.Polygons).Select(x => x.GetJSON());
+            return "[" + string.Join(',', polyJsonStrings) + "]";
+        }
+    }
+}

examples/2021-01-09-blazor-mystify/MystifyBlazor/Models/Polygon.cs

@@ -0,0 +1,42 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Text;
+
+namespace MystifyBlazor.Models
+{
+    /// <summary>
+    /// A Polygon describes a shape at one instance in time.
+    /// It has a list of corners and a color.
+    /// </summary>
+    public class Polygon
+    {
+        public int CornerCount => Corners.Count;
+        private readonly List<Corner> Corners = new List<Corner>();
+        public readonly Color Color;
+
+        public Polygon(Color color, List<Corner> corners) => (Color, Corners) = (color, corners);
+
+        public static Polygon RandomPolygon(Random rand, int cornerCount, double width, double height, Color color) =>
+            new Polygon(
+                color: color ?? new Color(rand.NextDouble()),
+                corners: Enumerable.Range(0, cornerCount).Select(x => Corner.RandomPoint(rand, width, height)).ToList()
+            );
+
+        public Polygon NextPolygon(double delta, double width, double height, bool rainbow)
+        {
+            var newCorners = Corners.Select(x => x.NextPoint(delta, width, height)).ToList();
+            var newColor = rainbow ? new Color(Color.Hue + .01) : Color;
+            return new Polygon(newColor, newCorners);
+        }
+
+        public string GetJSON()
+        {
+            StringBuilder sb = new StringBuilder($"[\"{Color}\"");
+            foreach (Corner point in Corners)
+                sb.Append($",[{point.X:0.00},{point.Y:0.00}]");
+            sb.Append(']');
+            return sb.ToString();
+        }
+    }
+}

examples/2021-01-09-blazor-mystify/MystifyBlazor/Models/Shape.cs

@@ -0,0 +1,28 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+
+namespace MystifyBlazor.Models
+{
+    /// <summary>
+    /// A shape stores a collection of polygons.
+    /// Polygons early in the list are historical polygons.
+    /// The last polygon in the list is the most recent.
+    /// </summary>
+    public class Shape
+    {
+        public List<Polygon> Polygons = new List<Polygon>();
+
+        public Shape(Random rand, int cornerCount, double width, double height, Color color) =>
+            Polygons.Add(Polygon.RandomPolygon(rand, cornerCount, width, height, color));
+
+        public void Advance(double delta, double width, double height, int historyCount, bool rainbow)
+        {
+            Polygon nextPolygon = Polygons.Last().NextPolygon(delta, width, height, rainbow);
+            Polygons.Add(nextPolygon);
+            while (Polygons.Count > historyCount)
+                Polygons.RemoveAt(0);
+        }
+    }
+}

examples/2021-01-09-blazor-mystify/MystifyBlazor/MystifyBlazor.csproj

@@ -0,0 +1,14 @@
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+
+  <PropertyGroup>
+    <TargetFramework>net5.0</TargetFramework>
+  </PropertyGroup>
+
+  <ItemGroup>
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="5.0.1" />
+    <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="5.0.1" PrivateAssets="all" />
+    <PackageReference Include="Microsoft.AspNetCore.WebUtilities" Version="2.2.0" />
+    <PackageReference Include="System.Net.Http.Json" Version="5.0.0" />
+  </ItemGroup>
+
+</Project>

examples/2021-01-09-blazor-mystify/MystifyBlazor/MystifyBlazor.sln

@@ -0,0 +1,25 @@
+
+Microsoft Visual Studio Solution File, Format Version 12.00
+# Visual Studio Version 16
+VisualStudioVersion = 16.0.30804.86
+MinimumVisualStudioVersion = 10.0.40219.1
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MystifyBlazor", "MystifyBlazor.csproj", "{92A1A4F7-1B26-4F7C-95D2-10DFFA70EEDD}"
+EndProject
+Global
+	GlobalSection(SolutionConfigurationPlatforms) = preSolution
+		Debug|Any CPU = Debug|Any CPU
+		Release|Any CPU = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(ProjectConfigurationPlatforms) = postSolution
+		{92A1A4F7-1B26-4F7C-95D2-10DFFA70EEDD}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{92A1A4F7-1B26-4F7C-95D2-10DFFA70EEDD}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{92A1A4F7-1B26-4F7C-95D2-10DFFA70EEDD}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{92A1A4F7-1B26-4F7C-95D2-10DFFA70EEDD}.Release|Any CPU.Build.0 = Release|Any CPU
+	EndGlobalSection
+	GlobalSection(SolutionProperties) = preSolution
+		HideSolutionNode = FALSE
+	EndGlobalSection
+	GlobalSection(ExtensibilityGlobals) = postSolution
+		SolutionGuid = {98A3307D-1B7D-49E9-876B-3B95BD969747}
+	EndGlobalSection
+EndGlobal

examples/2021-01-09-blazor-mystify/MystifyBlazor/Pages/Index.razor

@@ -0,0 +1,92 @@
+@page "/"
+@using System.Text;
+@inject IJSRuntime JsRuntime
+@inject NavigationManager NavManager
+@using Microsoft.AspNetCore.WebUtilities
+
+<div class="container mt-3">
+    <div class="display-4">Mystify your Browser with Blazor</div>
+
+    <div>
+        <div class="bg-white shadow mt-3" id="myCanvasHolder">
+            <canvas id="myCanvas" style="background-color: black;"></canvas>
+        </div>
+
+        <div class="display-5 mt-5">
+            Configuration
+        </div>
+
+        <div class="d-inline-block m-4">
+            <label for="Speed">Speed: @MystifyField.Speed</label>
+            <input type="range" class="form-range" id="Speed"
+                   @bind="MystifyField.Speed" @bind:event="oninput">
+        </div>
+
+        <div class="d-inline-block m-4">
+            <label for="ShapeCount">Shapes: @MystifyField.ShapeCount</label>
+            <input type="range" class="form-range" id="ShapeCount"
+                   @bind="MystifyField.ShapeCount" @bind:event="oninput" min="1" max="20">
+        </div>
+
+        <div class="d-inline-block m-4">
+            <label for="CornerCount">Corners: @MystifyField.CornerCount</label>
+            <input type="range" class="form-range" id="CornerCount"
+                   @bind="MystifyField.CornerCount" @bind:event="oninput" min="3" max="20">
+        </div>
+
+        <div class="d-inline-block m-4">
+            <label for="historyCount">History: @MystifyField.HistoryCount</label>
+            <input type="range" class="form-range" id="historyCount"
+                   @bind="MystifyField.HistoryCount" @bind:event="oninput" min="1" max="50">
+        </div>
+    </div>
+
+    <div>
+        <div class="d-inline-block m-4">
+            <button class="btn btn-primary" @onclick="MystifyField.RandomizeColors">Random Colors</button>
+        </div>
+
+        <div class="d-inline-block m-4">
+            <input class="form-check-input" type="checkbox" value="" id="rainbow" @bind="MystifyField.Rainbow">
+            <label class="form-check-label" for="rainbow">
+                Rainbow
+            </label>
+        </div>
+    </div>
+
+
+
+
+
+
+
+
+    <div class="display-5 mt-3">
+        Source Code
+    </div>
+    <div>
+        <ul class="py-2">
+            <li class="my-2">GitHub</li>
+            <li class="my-2">Blog Post</li>
+        </ul>
+    </div>
+
+    <div class="text-muted"><small>Running on .NET @Environment.Version</small></div>
+</div>
+
+@code
+{
+    Models.Field MystifyField = new Models.Field();
+
+    protected override void OnInitialized()
+    {
+        JsRuntime.InvokeAsync<object>("initRenderJS", DotNetObjectReference.Create(this));
+    }
+
+    [JSInvokable]
+    public string UpdateModel(double width, double height)
+    {
+        MystifyField.Advance(width, height);
+        return MystifyField.GetJSON();
+    }
+}