α-wwwiki

user:none (6696 bytes)

_h1 pForms {span {@ style="font-size:0.5em;"} (see also page [[raytrace]])}
_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 infos (in french) can be seen in [[pForms 1|../index.php?view=pformes]] or in [[pForms 2|http://marty.alain.free.fr/pFwiki/?view=abstract]] and in an article (in english, PDF 4.8 Mb) downloadable from here : [[straightaway|http://marty.alain.free.fr/recherche/pformes/straightaway.pdf]].
_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).

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

{span {@ style="position:absolute; left:10px; top:20px; width:120px; white-space:pre-wrap; text-align:right;" }{drag}1) camera
Rot/X : {input {@ id="rotx" type="text" value="300" style="background:#ccc; width:50px; text-align:center;"}}{input {@ type="range" min="0" max="360" value="300" step="5" onchange="getId('rotx').value=this.value; getId('mycanvas').innerHTML = display('mycanvas');"}} Rot/Y : {input {@ id="roty" type="text" value="0" style="background:#ccc; width:50px; text-align:center;"}}{input {@ type="range" min="0" max="360" value="0" step="5" 
onchange="getId('roty').value=this.value; getId('mycanvas').innerHTML = display('mycanvas');"}} Rot/Z : {input {@ id="rotz" type="text" value="60" style="background:#ccc; width:50px; text-align:center;"}}{input {@ type="range" min="0" max="360" value="60" step="5" 
onchange="getId('rotz').value=this.value; getId('mycanvas').innerHTML = display('mycanvas');"}} focale : {input {@ id="focale" type="text" value="500" style="background:#ccc; width:50px; text-align:center;"}}{input {@ type="range" min="300" max="30000" value="300" step="100" 
onchange="getId('focale').value=this.value; getId('mycanvas').innerHTML = display('mycanvas');"}} scale : {input {@ id="scale" type="text" value="1" style="background:#ccc; width:30px; text-align:center;"}} {input {@ type="range" min="0.25" max="10" value="1" step="0.5" 
onchange="getId('scale').value=this.value; getId('mycanvas').innerHTML = display('mycanvas');"}}2) display
srf (u|v|w) : {input {@ id="uv" type="text" value="u" 
   style="background:#ccc; width:30px; text-align:center;"}}
vol (u|v|w) : {input {@ id="uvw" type="text" value="w" 
   style="background:#ccc; width:30px; text-align:center;"}}
3) figures
type [1..24] {input {@ id="type" type="text" value="17" 
   style="background:#ccc; width:30px; text-align:center;"}}

{input {@ type="submit" value="draw" onclick="°°

display = function ( can ) {
   var rotx   = getId('rotx').value; 
   var roty   = getId('roty').value;
   var rotz   = getId('rotz').value;
   var focale = getId('focale').value;  
   // infinite  -> orthographic projection
   var scale  = getId('scale').value ;
   // choice of figure to be displayed
   var type   = parseInt( getId('type').value ); 
   var uv     = getId('uv').value; 
   var uvw    = getId('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 );
}

// test for a simple parabola
_display = function ( can ) {
// set the camera
   var scale  = getId('scale').value ;
   var ctx    = W3D.init2D( can );
   W3D.init3D( 0, 0, 0, 500000, scale ); 
// define curve
   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} 
            ];
// draw curve
   ctx.save();
   ctx.beginPath();
   ctx.strokeStyle = '#f00';
   ctx.lineWidth = 8;
   W3D.draw( PF.build( P4, 5 ) );
   ctx.restore();
}

getId('mycanvas').innerHTML = display('mycanvas');
°°"}}

}}

_h3 howto
_p 1 include the 3D libraries :
{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';
°°"}}
{input {@ type="submit" value="include lambda3D_tests" onclick="°°
  var js = document.createElement('script');
  js.src = 'plugins/lambda3D_tests.js';
  document.body.appendChild( js );
  this.value = 'OK, lambda3D_tests is included !';
  this.disabled='disabled';
°°"}}

_p 2) Click on "draw" to see something and then play with view and "figures" parameters. Sliders below each field "Rot/X, Rot/Y, Rot/Z, focale and scale" allow an interactive realtime move of the figures but are not recognized (yet) in Firefox ; you may try them in Chrome. Enjoy ! 
_h3 code
{pre °°
// this is the default display function calling 
// one of the 24 predefined figures :

function display ( can ) {
   var rotx   = getId('rotx').value; 
   var roty   = getId('roty').value;
   var rotz   = getId('rotz').value;
   var focale = getId('focale').value;  
   // infinite  -> orthographic projection
   var scale  = getId('scale').value ;
   // choice of figure to be displayed
   var type   = parseInt( getId('type').value ); 
   var uv     = getId('uv').value; 
   var uvw    = getId('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 );
}
/////////////////////////////////////////////////////////////////////
// drawing a simple parabola on xOy axis  
// could be done with this display function :

display = function ( can ) {
// 1) set the camera for an orthographic projection on Oz
   var scale  = getId('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 : 
_ul [[3D code|plugins/lambda3D.js]].
_ul [[3D tests|plugins/lambda3D_tests.js]].

_h3 gallery
_p Coming soon ... Meanwhile, you may play with the 24 predefined types of geometry.