lambdaway :: pForms

6 | list | login |load

| |

{require lib_lambda3D}

_h1 {center pForms | [[raytrace]]}

{div {@ style="position:relative;"} 
{canvas 
   {@ id="mycanvas" width="580" height="580" style="background:#ccc;
      border:1px dashed black; box-shadow:0 0 8px black;"}}
{div {@ style="position:absolute; right:10px; top:20px; width:120px; white-space:pre-wrap; text-align:right; color:#f00; " }
{drag}
{control Rot/x rotx 0 360 5 300}
{control Rot/y roty 0 360 5   0}
{control Rot/z rotz 0 360 5  60}
{control focale focale 200 3000 300 500} 
{control scale scale 0.25 10 0.5 1}
surface (u|v|w) : {input {@ id="uv" 
  type="text" value="u" style="background:#ccc; width:30px; text-align:center;"
  oninput="document.getElementById('mycanvas').innerHTML = display('mycanvas')"
}}
volume (u|v|w) : {input {@ id="uvw" 
  type="text" value="w" style="background:#ccc; width:30px; text-align:center;"
  oninput="document.getElementById('mycanvas').innerHTML = display('mycanvas')"
}}
forme [1..24] {input {@ id="type" 
  type="text" value="17" style="background:#ccc; width:30px; text-align:center;"
  oninput="document.getElementById('mycanvas').innerHTML = display('mycanvas')"
}}
{{hide}
  {input {@ id="draw_button" type="submit" value="draw" onclick="display('mycanvas');"}}
}
}}

{script

var display = function ( can  ) {
   var rotx   = document.getElementById('rotx').value; 
   var roty   = document.getElementById('roty').value;
   var rotz   = document.getElementById('rotz').value;
   var focale = document.getElementById('focale').value;  
   // infinite  -> orthographic projection
   var scale  = document.getElementById('scale').value ;
   // choice of figure to be displayed
   var type   = parseInt( document.getElementById('type').value ); 
   var uv     = document.getElementById('uv').value; 
   var uvw    = document.getElementById('uvw').value; 
   var ctx    = W3D.init2D( can );
   W3D.init3D ( rotx, roty, rotz, focale, scale ); 
   // W3D.init3D( 0, 0, 0, 500000, 2 ); // ortho on z
   PF_TEST.display ( ctx, type, uv, uvw );
};

setTimeout( function() { document.getElementById("draw_button").click();}, 10)

}
{center {i This is not a "static" picture, you can play with it in realtime.}}

_p A few years ago, I have been working on points controlled geometries (curves, surfaces, volumes) through an original perspective, named pForms, ie Pascalian Forms. More informations in this page [[pf_2025]].
_p The first development was done in the POV-Ray environment (macros language) and the second was in Sketchup (Ruby language). Here is an attempt to port this code in a browser (Javascript language).

_h3 howto

_p Sliders below each field {b Rot/X, Rot/Y, Rot/Z, focale and scale} allow an interactive realtime move of the figures. {b surface & volume} fields allow displaying surfaces and volumes in different ways. The {b forms} allows choosing one of the 24 predefined models. Enjoy !

_h3 code

_p This is the default display function calling one of the 24 predefined figures :

{pre °°
function display ( can ) {
   var rotx   = document.getElementById('rotx').value; 
   var roty   = document.getElementById('roty').value;
   var rotz   = document.getElementById('rotz').value;
   var focale = document.getElementById('focale').value;  
   // infinite  -> orthographic projection
   var scale  = document.getElementById('scale').value ;
   // choice of figure to be displayed
   var type   = parseInt( document.getElementById('type').value ); 
   var uv     = document.getElementById('uv').value; 
   var uvw    = document.getElementById('uvw').value; 
   var ctx    = W3D.init2D( can );
   W3D.init3D ( rotx, roty, rotz, focale, scale ); 
   // W3D.init3D( 0, 0, 0, 500000, 2 ); 
   PF_TEST.display ( ctx, type, uv, uvw );
}
°°}

_p Drawing a simple parabola on xOy axis can be done with this display function :

{pre °°
function display( can ) {
// 1) set the camera for an orthographic projection on Oz
   var scale  = document.getElementById('scale').value ;
   var ctx    = W3D.init2D( can );
   W3D.init3D( 0, 0, 0, 500000, scale ); 
// 2) define the parabola with 3 control points
   var d = 150;
   var P4 = [ {x:-d, y: d,  z:0, w:1}, 
              {x: 0, y:-3*d,z:0, w:1}, 
              {x: d, y: d,  z:0, w:1} 
            ];
// 3) draw the parabola with thickness = 8px and color = red
   ctx.save();
   ctx.beginPath();
   ctx.strokeStyle = '#f00';
   ctx.lineWidth = 8;
   W3D.draw( PF.build( P4, 5 ) );
   ctx.restore();
}
°°}

_p The complete 3D code can be seen here : [[lib_lambda3D|?view=lib_lambda3D]]

_p {i alain marty 2013 ... 2025/02/01}

_img data/pForms_exemple.jpg 
{center La forme n° 17}

{{hide}
{def control
 {lambda {:name :id :min :max :step :val}
  :name : {input {@ id=":id" type="text" value=":val" style="background:#fff; width:50px; col:#000; text-align:center;"}}
{input {@ type="range" min=":min" max=":max" step=":step" value=":val"
          oninput="document.getElementById(':id').value=this.value; 
          document.getElementById('mycanvas').innerHTML = display('mycanvas')"}} 
}}
}

{style 
body, #page_frame, #page_content, .page_menu {
  border:0 solid #444; box-shadow:0 0 0; background:#444; color:#fff; }
pre { background:#666; padding:5px;}
input { color:#f00; }
}