Swirly graphics

Just did a small 10 minute experiment in Smart Pascal. Essentially what I want is to be able to pre-calculate a nice soft path between X number of points. Which is essentially what is known as a bezier curve. This can be used in many situations from plotting pixels, moving sprites or indeed – animating elements with CSS.

Here is my 10 minute experiment:

function bezier(p1,p2,p3,p4:TPoint;t:float):TPoint;
begin
  var mum1 := 1- t;
  var mum13 := mum1 * mum1 * mum1;
  var mu3 := t * t * t;

  result:=TPoint.Create(
    round(mum13 * p1.x + 3*t * mum1*mum1 * p2.x+3*t*t * mum1*p3.x + mu3*p4.x),
    round(mum13 * p1.y + 3*t * mum1*mum1 * p2.y+3*t*t * mum1*p3.y + mu3*p4.y) );
end;

procedure TForm1.W3Button1Click(Sender: TObject);
var
  mBitmap:  TBitmap;
  x:  Integer;
  p1,p2,p3,p4:  TPoint;
begin
  mBitmap:=TBitmap.create;
  try
    mBitmap.Allocate(400,400);

    p1:=TPoint.Create(10,60);
    p2:=Tpoint.create(100,40);
    p3:=Tpoint.create(180,60);
    p4:=Tpoint.create(200,180);

    mBitmap.canvas.pen.color:=clRed;
    mBitmap.canvas.MoveTo(p1);
    mBitmap.canvas.lineTo(p2);
    mBitmap.canvas.lineto(p3);
    mBitmap.Canvas.lineto(p4);

    var f :=0.0;
    for x:=0 to 100 do
    begin
      f:=x / 100;
      var mpt := bezier(p1,p2,p3,p4,f);
      writeln(mpt.toString());
      mBitmap.canvas.Pixels[mpt.x,mpt.y]:=clBlue;
    end;

    w3panel1.Background.FromURL(mBitmap.Canvas.ToDataURL('png'));

  finally
    mBitmap.free;
  end;
end;

Lo and behold the mighty swirley path!

Oh its so nice and soft and swirley

Oh its so nice and soft and swirley

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: