lambdaspeech :: pCurves

2 | list | login |load

| |

_h1 pCurves

{require lib_pForms}

_p A pCurve is a Bezier curve controlled by a set of points defined in a four dimensional space. When the fourth component is different from 1, the pCurve is a rational Bézier curve, which can be concatenated to create NURBS, for instance conics. This page uses the  [[lib_pForms]] library.

{{SVG}
 {{AXES} 
    {path {@ id="axes"    fill="transparent" stroke-width="1" stroke="#000"}}
    {path {@ id="cube"    fill="transparent" stroke-width="1" stroke="#888"}}
    {path {@ id="curve1"  fill="transparent" stroke-width="3" stroke="#f00"}}
    {path {@ id="curve2"  fill="transparent" stroke-width="1" stroke="#f00"}}
    {path {@ id="curve3"  fill="transparent" stroke-width="3" stroke="#00f"}}
    {path {@ id="curve4"  fill="transparent" stroke-width="1" stroke="#00f"}}
}}

{center {pre
{control Rot/X rotx 300 0 360 5}
{control Rot/Y roty 0 0 360 5}
{control Rot/Z rotz 40 0 360 5}
{control persp  pers 350 100 1000 10}
{control scale scale 0.9 0.5 10 0.1}
}}

_h2 four curves
{pre °°
  var p0 = {x:-150,y:-150,z:-150,w:1},
      p1 = {x: 150,y:-150,z:-150,w:1},
      p2 = {x: 150,y:-150,z: 150,w:1},
      p3 = {x: 150,y: 150,z: 150,w:1},
      p4 = {x:-150,y: 150,z: 150,w:1};
  var q0 = {x:-150,y:-150,z:-150,w:4},
      q1 = {x: 150,y:-150,z:-150,w:1},
      q2 = {x: 150,y:-150,z: 150,w:0.01},
      q3 = {x: 150,y: 150,z: 150,w:1},
      q4 = {x:-150,y: 150,z: 150,w:3};

var curve1 = PF.build( PF.stretch( [p0,p1,p2,p3,p4], 0.2, 0.8 ), 5 ),
      curve2 = PF.build(             [p0,p1,p2,p3,p4], 5 ),
      curve3 = PF.build(             [q0,q1,q2,q3,q4], 5 ),
      curve4 = PF.build( PF.stretch( [q0,q1,q2,q3,q4], -0.5, 1.5 ), 5 );
°°}

{script ;;

var p0 = {x:-150,y:-150,z:-150,w:1},
      p1 = {x: 150,y:-150,z:-150,w:1},
      p2 = {x: 150,y:-150,z: 150,w:1},
      p3 = {x: 150,y: 150,z: 150,w:1},
      p4 = {x:-150,y: 150,z: 150,w:1};
  var q0 = {x:-150,y:-150,z:-150,w:4},
      q1 = {x: 150,y:-150,z:-150,w:1},
      q2 = {x: 150,y:-150,z: 150,w:0.01},
      q3 = {x: 150,y: 150,z: 150,w:1},
      q4 = {x:-150,y: 150,z: 150,w:3};

var display = function() {
  var rotx = document.getElementById('rotx').value;
  var roty = document.getElementById('roty').value;
  var rotz = document.getElementById('rotz').value;
  var pers = document.getElementById('pers').value;
  var scale = document.getElementById('scale').value;

W3D.init3D( rotx, roty, rotz, pers, scale );
  document.getElementById('axes').setAttribute('d', W3D.axes(600/4));
  document.getElementById('cube').setAttribute('d', W3D.cube(600/4));
  document.getElementById('curve1').setAttribute('d', W3D.draw_line( curve1 ));
  document.getElementById('curve2').setAttribute('d', W3D.draw_line( curve2 ));
  document.getElementById('curve3').setAttribute('d', W3D.draw_line( curve3 ));
  document.getElementById('curve4').setAttribute('d', W3D.draw_line( curve4 ));
};

setTimeout( display, 1 );     
}

{{hide}
{def SVG
 svg {@ width="600" height="600" 
        style="position:relative; left:50%; width:600px; height:600px; margin-left:-300px; background:#eee;"}}
{def AXES g {@ transform="translate({/ 600 2},{/ 600 2})"}}
{def control
 {lambda {:name :id :val :min :max :step}
  :name : {input {@ id=":id" type="text" value=":val"  size="5"}}
          {input {@ type="range" min=":min" max=":max" value=":val" step=":step"
                    style="width:110px; vertical-align:middle;"   
                    oninput="document.getElementById(':id').value = this.value; display();"}} 
}}
}