α-wwwiki

α-wwwiki :: history/math_curves/20130922-092501.txt

editor : alpha [82.255.186.154] 2013/09/22 09:25:01
_h1 math Curves

_p I begin the study of an interface for defining and drawing simple math curves. A work in progress ! Have a look to [[pForms]] for more complex geometry. Today, three types of curves are shown :

_ul curves defined by a polynomial expression y = Σ a{sub i}.x{sup i}, for instance a segment, a parbola and a cubic,
_ul parametric curves, for instance a circle x=r.cos(t), y=r.sin(t)
_ul poles controlled forms, for instance a parabola, a cubic.
_p The frame at the right can be edited and the result view when clicking the button "draw", but the modifications are not saved when the page is closed, copy/paste your work before.

{div {@ style="position:relative;"}
  {canvas 
    {@ id="mycanvas" 
       width="600" 
       height="600" 
       style="background:#ffe; border:1px dashed black; 
       box-shadow:0 0 8px black;"
} } }

{p First, once {input {@ type="submit" value="include lambda3D" onclick="°°
var js = document.createElement('script');
js.src = 'plugins/lambda3D.js';
document.body.appendChild( js );
this.value = 'OK, lambda3D is included !';
this.disabled='disabled';

°°"}}
then play with the math editor and
{input {@ type="submit" value="draw" onclick="°°

var js = document.createElement('script');
var input = getId('code').value;
js.innerHTML = decode_html_entities(input); // < ,>
document.head.appendChild( js );

°°"}}.}
_p Should you like some explanations ?

{div {@ style="position:absolute; top:10px; left:600px;opacity:0.8"}{drag}{textarea {@ id="code" style="width:500px;height:800px;padding:5px;"}°°

// 1) function form : y = polynom(x)

function seg(k, x) { 
 return k[0]*x + x[1] 
}
function par(k, x) { 
 return k[0]*x*x + k[1]*x +k[2] 
}
function cub(k, x) { 
 return k[0]*x*x*x + k[1]*x*x +k[2]*x + k[3] 
}

// 2) parametric form : x=x(t), y=y(t)

// 3) poles controlled forms : pF = [ p0, p1, p2, ... ]

function pL3 ( N ) { // a parabola using the pForms approach
  var pl3 = [ {x:-0.5, y:-0.0},
              {x: 0.0, y: 1.0},
              {x: 0.5, y:-0.5} ]
  return PF.build( pl3, N );
}

function pL4 ( N ) { // a cubic using the pForms approach
  var pl4 = [ {x:-0.5, y:-0.5},
              {x:-0.2, y: 1.0},
              {x: 0.2, y:-0.5},
              {x: 0.5, y: 0.5} ]
  return PF.build( pl4, N );
}

function courbe () {

var choix = 3;     // here is the choice to do in 1,2,3,4,5,6

// 1) function form : y = f(x)
  if (choix == 1)
    return build( seg, [1/2, 0], [-0.45, 0.45], 30 ); 
  else if (choix == 2)
    return build( par, [4, 0, -0.5], [-0.25, 0.5], 30 ); 
  else if (choix == 3)
    return build( cub, [12, 4, 0, -0.2], [-0.5, 0.5], 50 );

// 2) parametric form : x=x(t), y=y(t)
  else if (choix == 4)
    return cercle( 0.5, 30 );

// 3) poles controlled forms : pF = [ p0, p1, p2, ... ]
  else if (choix == 5)
    return pL3( 6 )
  else if (choix == 6)
    return pL4( 6 )
  else
    return "nada"
}

°°}}