Archive

Archive for April 9, 2015

Swirly graphics

April 9, 2015 Leave a comment

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