SURFACE

doodle.json

{
  "uuid": "4d4fa9fd-067b-4801-a228-a99a316cb1f4",
  "description": "SURFACE",
  "dependencies": {
    "DomReady": "latest",
    "davinci-blade": "1.1.1",
    "davinci-eight": "latest"
  },
  "operatorOverloading": true
}

extras.ts

DomReady.ready(function() {
  try {
    main();
  }
  catch(e) {
    console.error(e);
  }
});

/**
 * Standard basis vector in the x-axis direction.
 */
var e1 = blade.e3ga.e1;
/**
 * Standard basis vector in the y-axis direction.
 */
var e2 = blade.e3ga.e2;
/**
 * Standard basis vector in the z-axis direction.
 */
var e3 = blade.e3ga.e3;

/**
 * Returns the cosine of a number.
 */
var cos = blade.universals.cos;
/**
 * Returns e (the base of natural logarithms) raised to a power.
 */
var exp = blade.universals.exp;
/**
 * Returns the sine of a number.
 */
var sin = blade.universals.sin;

/**
 * S.I. units of measure.
 */
var kilogram = blade.e3ga.units.kilogram;
var meter    = blade.e3ga.units.meter;
var second   = blade.e3ga.units.second;
var hertz    = blade.e3ga.units.hertz;

class BarnMesh extends EIGHT.DefaultAttribProvider {
  private aVertexPositionArray: Float32Array;
  constructor() {
    super();
  }
  draw(context: WebGLRenderingContext) {
    context.drawArrays(context.TRIANGLES, 0, this.aVertexPositionArray.length / 3);
  }
  dots(vertex: (x: number, y: number, z: number) => void, point: (a: number) => void) {
    
  }
  wire(vertex: (x: number, y: number, z: number) => void, line: (a: number, b: number) => void) {
    
  }
  mesh(vertex: (x: number, y: number, z: number) => void, face: (a: number, b: number, c: number) => void) {
    // You have freedom to compute vertices and faces how you want, but return the results in canonical form.
    vertex(-0.5, 0.0, -1.0);
    vertex( 0.5, 0.0, -1.0);
    vertex( 0.5, 1.0, -1.0);
    vertex( 0.0, 1.5, -1.0);
    vertex(-0.5, 1.0, -1.0);

    vertex(-0.5, 0.0,  1.0);
    vertex( 0.5, 0.0,  1.0);
    vertex( 0.5, 1.0,  1.0);
    vertex( 0.0, 1.5,  1.0);
    vertex(-0.5, 1.0,  1.0);

    face(1, 0, 2);
    face(2, 0, 4);
    face(2, 4, 3);

    face(5, 6, 7);
    face(5, 7, 9);
    face(9, 7, 8);

    face(6, 1, 2);
    face(6, 2, 7);

    face(9, 0, 5);
    face(9, 4, 0);

    face(8, 3, 4);
    face(8, 4, 9);

    face(7, 2, 3);
    face(7, 3, 8);

    face(5, 0, 1);
    face(5, 1, 6);
  }
  update(attributes: EIGHT.ShaderVariableDecl[]) {
    var faceList: {a: number; b: number; c: number}[] = [];
    var vertexList: blade.Euclidean3[] = [];
    function face(a: number, b: number, c: number) {
      faceList.push({a: a, b: b, c: c});
    }
    function vertex(x: number, y: number, z: number) {
      vertexList.push(new blade.Euclidean3(0, x, y, z, 0, 0, 0, 0));
    }

    this.mesh(vertex, face);

    var vertices: number[] = [];
    var normals: number[] = [];
    var elements: number[] = [];

    faceList.forEach(function(face) {

      elements.push(face.a);
      elements.push(face.b);
      elements.push(face.c);

      var vertexA = vertexList[face.a];
      vertices.push(vertexA.x);
      vertices.push(vertexA.y);
      vertices.push(vertexA.z);

      var vertexB = vertexList[face.b];
      vertices.push(vertexB.x);
      vertices.push(vertexB.y);
      vertices.push(vertexB.z);

      var vertexC = vertexList[face.c];
      vertices.push(vertexC.x);
      vertices.push(vertexC.y);
      vertices.push(vertexC.z);
    });
    this.aVertexPositionArray = new Float32Array(vertices);
    return super.update(attributes);
  }
  getAttribArray(name: string): {usage: EIGHT.DataUsage; data: Float32Array} {
    switch(name) {
      case 'aVertexPosition': {
        return {usage: EIGHT.DataUsage.STATIC_DRAW, data: this.aVertexPositionArray};
      }
      break;
      default: {
        return super.getAttribArray(name);
      }
    }
  }
  getAttribMeta(): EIGHT.AttribMetaInfos {
    return super.getAttribMeta();
  }
  hasElementArray(): boolean {
    return super.hasElementArray();
  }
  getElementArray(): {usage: EIGHT.DataUsage; data: Uint16Array} {
    return super.getElementArray();
  }
}

index.html

<!doctype html>
<html>
  <head>
    <style>
    /* STYLE-MARKER */
    </style>
    <script id='vs' type='x-shader/x-vertex'>
      attribute vec3 aVertexPosition;
      attribute vec3 aVertexNormal;
      uniform vec3 uColor;
      uniform mat4 uModelMatrix;
      uniform mat3 uNormalMatrix;
      uniform mat4 uViewMatrix;
      uniform mat4 uProjectionMatrix;
      uniform vec3 uAmbientLight;
      uniform vec3 uDirectionalLightColor;
      uniform vec3 uDirectionalLightDirection;
      varying highp vec4 vColor;
      varying highp vec3 vLight;
      void main(void) {
        gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aVertexPosition, 1.0);
        vColor = vec4(uColor, 1.0);
        vec3 L = normalize(uDirectionalLightDirection);
        vec3 N = normalize(uNormalMatrix * aVertexNormal);
        float cosineFactor = max(dot(N,L), 0.0);
        vLight = uAmbientLight + cosineFactor * uDirectionalLightColor;
      }
    </script>
    <script id='fs' type='x-shader/x-fragment'>
      varying highp vec4 vColor;
      varying highp vec3 vLight;
      void main(void) {
        gl_FragColor = vec4(vColor.xyz * vLight, vColor.a);
      }
    </script>
    <!-- SCRIPTS-MARKER -->
  </head>
  <body>
    <script>
    // LIBS-MARKER
    </script>
    <script>
    // CODE-MARKER
    </script>
    <canvas id='my-canvas'>
      Your browser does not support the canvas element.
    </canvas>
  </body>
</html>

script.ts

/**
 * The angle of tilt of the precessing vector.
 */
var tiltAngle = 30 * Math.PI / 180;
var S = exp(-(e2 ^ e1) * tiltAngle / 2);
var B = e3 ^ e1;
/**
 * The period of the motions in the animation.
 */
var T = 10 * second;
/**
 * The frequency of the motions in the animation.
 */
var f = (1 / T);
var omega = 2 * Math.PI * f;

function surface(u: number, v: number): EIGHT.Cartesian3 {
  var x = 3 * (u - 0.5);
  var y = 3 * (v - 0.5);
  var r = Math.sqrt(x * x + y * y);
  var z = Math.exp(-1*r) * Math.cos(r*6);
  return {x: x, y: y, z: z};
}

function main() {

  var scene = EIGHT.scene();
  var canvas = <HTMLCanvasElement>document.getElementById('my-canvas');
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  var renderer = EIGHT.renderer(canvas);
  renderer.clearColor(0.2, 0.2, 0.2, 1.0);
  var monitor = EIGHT.contextMonitor(canvas).addContextUser(renderer).start();

  var perspective = EIGHT.perspective().setAspect(canvas.clientWidth / canvas.clientHeight).setEye(2 * e1 + (4/3) * e2 + (8/3) * e3).setFov(75*Math.PI/180).setUp(e3);
  var aLight = new EIGHT.AmbientLight({color: EIGHT.Color.fromRGB(0.3, 0.3, 0.3)});
  var dLight = new EIGHT.DirectionalLight({color: EIGHT.Color.fromRGB(0.7, 0.7, 0.7), direction: 2 * e1 + 3 * e2 + 5 * e3});

  var ambients = EIGHT.uniforms([perspective, aLight, dLight]);
  
  var barnMesh = new EIGHT.GeometryAdapter(new EIGHT.ParametricSurfaceGeometry(surface, 50, 50),{drawMode: EIGHT.DrawMode.TRIANGLES});
  //var barnMesh = new BarnMesh();
  var model = new EIGHT.Node();
  //var barn = EIGHT.primitive(barnMesh, EIGHT.shaderProgramFromScripts('vs','fs'), model);
  var barn = EIGHT.primitive(barnMesh, EIGHT.smartProgram(barnMesh.getAttribMeta(),[model.getUniformMeta(), ambients.getUniformMeta()]), model);
  //console.log(barn.shaders.vertexShader);
  //console.log(barn.shaders.fragmentShader);
  barn.model.color = EIGHT.Color.fromRGB(1, 1, 0);
  scene.add(barn);

  EIGHT.animation((time: number) => {
    var theta = omega * (time * second);
    // simple harmonic motion
    //barn.model.position.copy(1.2 * sin(theta) * e2);

    // precession
    var R = exp(-B * theta / 2);
    //barn.model.attitude.copy(R * S * ~R);

    // rotation
    var R = exp(-B * theta / 2);
    //barn.model.attitude.copy(R);

    // orbit
    //barn.model.position.copy(2 * cos(theta) * e1 - sin(theta) * (e3 - 0.5 * e2));

    renderer.render(scene, ambients);
  }).start();
}

style.less

body { margin: 0; }
canvas { width: 100%; height: 100% }