Anonymous user
Bitmap/Bézier curves/Cubic: Difference between revisions
adding lambdatalk
Thundergnat (talk | contribs) (→{{header|Raku}}: Fix up some internal links) |
(adding lambdatalk) |
||
Line 764:
}
}</lang>
=={{header|Lambdatalk}}==
<lang scheme>
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
</lang>
=={{header|Mathematica}} / {{header|Wolfram Language}}==
| |||