{"id":286,"date":"2016-05-22T07:31:16","date_gmt":"2016-05-22T07:31:16","guid":{"rendered":"http:\/\/www.bverhue.nl\/delphisvg\/?p=286"},"modified":"2024-02-24T06:28:13","modified_gmt":"2024-02-24T06:28:13","slug":"random-svg-star","status":"publish","type":"post","link":"https:\/\/www.bverhue.nl\/delphisvg\/2016\/05\/22\/random-svg-star\/","title":{"rendered":"Random SVG star"},"content":{"rendered":"

Here is small application that morphs between star shapes.<\/p>\n

The VCL project looks like this: The form color is set to “black” and it contains an TSVG2Image aligned “alClient” and a TTimer.<\/p>\n

Also, the “DoubleBuffered” property of the form is set to “True”, otherwise we’ll end up with a lot of unwanted flicker.<\/p>\n

\"RandomStar1\"<\/a><\/p>\n

Then the following code in the unit:<\/p>\n

[code language=\"Delphi\"]\n\nunit Unit1;\n\n\/\/ -----------------------------------------------------------------------------\n\/\/\n\/\/ Random SVG star\n\/\/\n\/\/ B.J.H. Verhue\n\/\/\n\/\/ -----------------------------------------------------------------------------\n\ninterface\n\nuses\n  Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants,\n  System.Classes, Vcl.Graphics, Vcl.Controls, Vcl.Forms, Vcl.Dialogs,\n  Vcl.ExtCtrls,\n  BVE.SVG2Image.VCL;\n\ntype\n  TForm1 = class(TForm)\n    SVG2Image1: TSVG2Image;\n    Timer1: TTimer;\n    procedure Timer1Timer(Sender: TObject);\n    procedure SVG2Image1Click(Sender: TObject);\n  private\n    FTime: integer;\n    function LFO(const f: single): single;\n    function LFO2(const s, f: single): single;\n  public\n    function StarPath(const aEdgeCount: integer; const aRIn, aROut, aOuterEdge: single): string;\n    procedure Update;\n  end;\n\nvar\n  Form1: TForm1;\n\nimplementation\nuses\n  Vcl.Clipbrd,\n  System.Math;\n\n{$R *.dfm}\n\n{ TForm1 }\n\nfunction TForm1.LFO(const f: single): single;\nbegin\n  \/\/ Low frequency oscilator\n\n  Result := Sin(2* PI * f * FTime \/ 1000);\nend;\n\nfunction TForm1.LFO2(const s, f: single): single;\nbegin\n  \/\/ Coupled LFO's to simulate randomness\n\n  Result := LFO(s * LFO(f));\nend;\n\nfunction SVGColor(const aR, aG, aB: single): string;\nbegin\n  Result := '#'\n     + IntToHex(Round(255 * Abs(aR)), 2)\n     + IntToHex(Round(255 * Abs(aG)), 2)\n     + IntToHex(Round(255 * Abs(aB)), 2);\nend;\n\nfunction TForm1.StarPath(const aEdgeCount: integer; const aRIn, aROut,\n  aOuterEdge: single): string;\nvar\n  i: integer;\n  InnerAngle, OuterAngle, X, Y: single;\nbegin\n  \/\/ Create starshaped pathdata\n  \/\/ aEdgeCount : number of edges or points\n  \/\/ aRIn       : radius of star core\n  \/\/ aROuter    : outer radius of star\n  \/\/ aOuterEdge : width of star point\n\n  Result := '';\n\n  InnerAngle := 2 * PI \/ aEdgeCount;\n  OuterAngle := arctan2(aOuterEdge, aROut);\n\n  for i := 0 to aEdgeCount - 1 do\n  begin\n    X := aRIn * Sin(i * InnerAngle);\n    Y := aRIn * Cos(i * InnerAngle);\n\n    if i = 0 then\n      Result := Result + Format('M%0:.2f,%1:.2f', [X, Y])\n    else\n      Result := Result + Format('L%0:.2f,%1:.2f', [X, Y]);\n\n    X := aROut * Sin((i + 0.5 - OuterAngle) * InnerAngle);\n    Y := aROut * Cos((i + 0.5 - OuterAngle) * InnerAngle);\n    Result := Result + Format('L%0:.2f,%1:.2f', [X, Y]);\n\n    X := aROut * Sin((i + 0.5 + OuterAngle) * InnerAngle);\n    Y := aROut * Cos((i + 0.5 + OuterAngle) * InnerAngle);\n    Result := Result + Format('L%0:.2f,%1:.2f', [X, Y]);\n\n  end;\n  Result := Result + 'Z"\/&amp;gt;';\nend;\n\nprocedure TForm1.SVG2Image1Click(Sender: TObject);\nbegin\n  Timer1.Enabled := not Timer1.Enabled;\n\n  \/\/ Put SVG on clipboard if paused\n\n  if not Timer1.Enabled then\n    Clipboard.AsText := SVG2Image1.SVG.Text;\nend;\n\nprocedure TForm1.Timer1Timer(Sender: TObject);\nbegin\n  \/\/ Timer interval is set to 25ms, FPS=40\n\n  Update;\n  Inc(FTime, Timer1.Interval);\nend;\n\nprocedure TForm1.Update;\nbegin\n  \/\/ Create SVG content and assign to SVG2Image\n\n  SVG2Image1.SVG.Text :=\n      '&amp;lt;svg version="1.1" id="star"' + ' viewBox="-100 -100 200 200"' + ' xmlns="http:\/\/www.w3.org\/2000\/svg"&amp;gt;'\n\n  \/\/ Defs section with a random radial gradient\n\n    + ' &amp;lt;defs&amp;gt;'\n      + ' &amp;lt;radialGradient id="radGrad1"&amp;gt;'\n      + ' &amp;lt;stop offset="0%" stop-color="' + SVGColor(LFO2(0.01, 0.02), LFO2(0.015, 0.03), LFO2(0.008, 0.015)) + '" \/&amp;gt;'\n      + ' &amp;lt;stop offset="100%" stop-color="' + SVGColor(LFO2(0.02, 0.01), LFO2(0.025, 0.015), LFO2(0.03, 0.008)) + '" \/&amp;gt;'\n      + ' &amp;lt;\/radialGradient&amp;gt;'\n    + '&amp;lt;\/defs&amp;gt;'\n\n  \/\/ Path element with random starshape\n\n    + '&amp;lt;path stroke="pink" fill="url(#radGrad1)" stroke-width="3" d="' + StarPath( Round(19 + 16 * LFO2(0.01, 0.01)), 50 + 30 * LFO2(0.03, 0.005), 80 + 10 * LFO2(0.008, 0.01), 16 + 16 * LFO2(0.01, 0.002)) + '"\/&amp;gt;'\n\n    + '&amp;lt;\/svg&amp;gt;';\n\n  SVG2Image1.Repaint;\nend;\n\ninitialization\n  \/\/ Set decimal seperator for "Format" function\n  FormatSettings.DecimalSeparator := '.';\n\nend.\n[\/code]<\/pre>\n
Sources can be found on github<\/a>. To compile the examples, you need the demo or the full version of the SVG control package.<\/p>\n","protected":false},"excerpt":{"rendered":"
Here is small application that morphs between star shapes. The VCL project looks like this: The form color is set to “black” and it contains an TSVG2Image aligned “alClient” and a TTimer. Also, the “DoubleBuffered” property of the form is set to “True”, otherwise we’ll end up with a lot of unwanted flicker. Then the … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":289,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-286","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/posts\/286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/comments?post=286"}],"version-history":[{"count":11,"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/posts\/286\/revisions"}],"predecessor-version":[{"id":843,"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/posts\/286\/revisions\/843"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/media\/289"}],"wp:attachment":[{"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/media?parent=286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/categories?post=286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/tags?post=286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}