Source code in the lambdatalk programming language

Drawing a cubic bezier curve out of any SVG or CANVAS frame.
1) interpolating 4 points

The Bézier curve is defined as an array of 4 given points, 
each defined as an array of 2 numbers. 
The bezier function returns the point interpolating the 4 points.

{def bezier
 {def bezier.interpol 
  {lambda {:a0 :a1 :a2 :a3 :t :u}
   {round 
    {+ {* :a0 :u :u :u 1} 
       {* :a1 :u :u :t 3} 
       {* :a2 :u :t :t 3}
       {* :a3 :t :t :t 1}}}}}
 {lambda {:bz :t}
  {A.new {bezier.interpol {A.get 0 {A.get 0 :bz}}
                          {A.get 0 {A.get 1 :bz}}
                          {A.get 0 {A.get 2 :bz}}
                          {A.get 0 {A.get 3 :bz}} :t {- 1 :t}} 
         {bezier.interpol {A.get 1 {A.get 0 :bz}}
                          {A.get 1 {A.get 1 :bz}}
                          {A.get 1 {A.get 2 :bz}}
                          {A.get 1 {A.get 3 :bz}} :t {- 1 :t}}} }}
-> bezier

2) plotting a dot

We don't draw in any SVG or CANVAS frame, but directly in the HTML page, 
using div HTML blocks designed as colored circles.

{def dot 
 {lambda {:p :r :col} 
  {div {@ style="position:absolute;
                 left:  {- {A.get 0 :p} {/ :r 2}}px;
                 top:   {- {A.get 1 :p} {/ :r 2}}px;
                 width: :rpx; height: :rpx; 
                 border-radius: :rpx; 
                 border: 1px solid #000;
                 background: :col;"}}}}
-> dot

3) defining 4 control points

{def Q0 {A.new 150 150}} -> Q0
{def Q1 {A.new 500 300}} -> Q1
{def Q2 {A.new 100 500}} -> Q2
{def Q3 {A.new 300 500}} -> Q3

4) defining 2 curves

We use the same control points but in different orders to define two curves

{def BZ1 {A.new {Q0} {Q1} {Q2} {Q3}}}
-> BZ1 
{def BZ2 {A.new {Q0} {Q2} {Q1} {Q3}}}
-> BZ2

5) drawing curves and dots

We map the bezier function on a serie of values in a range [start end step]

{S.map {lambda {:t} {dot {bezier {BZ1} :t} 5 red}} 
       {S.serie -0.1 1.2 0.02}} 
{S.map {lambda {:t} {dot {bezier {BZ2} :t} 5 blue}} 
       {S.serie -0.1 1.2 0.02}} 

{dot {Q0} 20 cyan} 
{dot {Q1} 20 cyan} 
{dot {Q2} 20 cyan} 
{dot {Q3} 20 cyan}

The result can be seen in http://lambdaway.free.fr/lambdawalks/?view=bezier