Bezier Curve Animation

En este proyecto vemos como un objeto puede hacer seguimiento de una curva.

by Víctor Garzón Marín

HTML

<script src="https://rawgit.com/vgarzom/BezierCurveWebgl/master/libs/bezier.js"></script>
<script src="https://rawgit.com/vgarzom/BezierCurveWebgl/master/libs/gl-matrix.js"></script>
<script src="https://rawgit.com/vgarzom/BezierCurveWebgl/master/libs/webgl-utils.js"></script>
<script src="https://rawgit.com/vgarzom/BezierCurveWebgl/master/libs/webgl-obj-loader.js"></script>
<script src="https://rawgit.com/vgarzom/BezierCurveWebgl/master/globals.js"></script>
<script src="https://rawgit.com/vgarzom/BezierCurveWebgl/master/curve_controller.js"></script>
<script src="https://rawgit.com/vgarzom/BezierCurveWebgl/master/initialize.js"></script>
<script src="https://rawgit.com/vgarzom/BezierCurveWebgl/master/interface_controller.js"></script>
<script src="https://rawgit.com/vgarzom/BezierCurveWebgl/master/helpers.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">

  <!-- Main Shader -->

  <script id="shader-fs" type="x-shader/x-fragment">
    #version 100
    #define M_PI 3.1415926535897932384626433832795
    precision mediump float;

    varying vec2 vTextureCoord;
    varying vec3 vTransformedNormal;
    varying vec4 vPosition;

    uniform vec3 uAmbientColor;

    uniform vec4 uColor;
    uniform vec3 uLightLocation;
    uniform vec3 uSpotDirection;
    uniform vec3 uLightSpecularColor;
    uniform vec3 uLightDiffuseColor;
    uniform bool uHasTexure;
    uniform bool uHasFlashlight;

    uniform sampler2D uSampler;

    uniform float uMaterialShininess;

    struct Pointlight {
      vec3 pos;
      float intensity;
    };

    vec2 pointlight(Pointlight light, vec3 surface, vec3 normal) {
      vec3 vectorToLightSource = (light.pos - surface);
      vec3 normalToLightSource = normalize(vectorToLightSource);
      vec3 reflectionVector = normalize(reflect(vectorToLightSource, normal));
      vec3 viewVectorEye = normalize(vPosition.xyz / vPosition.w);
      float specular = max(dot(reflectionVector, viewVectorEye), 0.0);
      float shading =...

CSS

#container {
    position: absolute;
    x: 100%;
    y: 10;
  }
  
  .slidecontainer {
      width: 100%; /* Width of the outside container */
      padding: 5px;
  }
  
  .slider {
      -webkit-appearance: none;
      width: 100%;
      height: 15px;
      border-radius: 5px;   
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
  }
  
  .slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 25px;
      height: 25px;
      border-radius: 50%; 
      background: #4CAF50;
      cursor: pointer;
  }
  
  .slider::-moz-range-thumb {
      width: 25px;
      height: 25px;
      border-radius: 50%;
      background: #4CAF50;
      cursor: pointer;
  }
  
  .slider-x::-webkit-slider-thumb {
      background: #4CAF50; /* Green background */
  }
  
  .slider-y::-webkit-slider-thumb {
      background: #2474A6; /* blue background */
  }
  
  .slider-z::-webkit-slider-thumb {
      background: #E00B27; /* red background */
  }
  .slider-r::-webkit-slider-thumb {
      background: #F2A30F
  }
  .slider::-moz-range-thumb {
      width: 25px; /* Set a specific slider handle width */
      height: 25px; /* Slider handle height */
      background: #4CAF50; /* Green background */
      cursor: pointer; /* Cursor on hover */
  }

JavaScript

function animate() {
  app.timeNow = new Date().getTime();
  app.elapsed = app.timeNow - app.lastTime;
  app.lastTime = app.timeNow;
}

function tick() {
  requestAnimFrame(tick);
  app.curve.lutindex ++;
  if (app.curve.lutindex >= app.curve.max){
    app.curve.lutindex = 0;
  }

  app.airplane.position = app.airplane.speed*(app.lastTime - app.airplane.startTime);
  if (app.airplane.position > app.curve.length){
    app.airplane.position = 0;
    app.airplane.startTime = app.lastTime;
  }

  app.airplane.speed = app.sliders.speed.value/100000;
  app.sliders.speedLabel.innerHTML = 'Velocidad ('+app.airplane.speed+'):';

  

  app.drawScene();
  animate();
}

function webGLStart( meshes ) {
  app.meshes = meshes;
  canvas = document.getElementById("mycanvas");
  initCurve();
  initGL(canvas);
  initShaders();
  initBuffers();
  initPointerLock();
  initTextures();
  initInterfaceListeners();

  gl.clearColor(123.0/255.0, 208.0/255.0, 255.0/255.0, 1.0);
  gl.enable(gl.DEPTH_TEST);
  tick();
}

function main() {
	console.log('loaded!');
  OBJ.downloadMeshes({
    'airplane_body': 'https://rawgit.com/vgarzom/BezierCurveWebgl/master/models/airplane_body.obj',
    'airplane_elisa': 'https://rawgit.com/vgarzom/BezierCurveWebgl/master/models/airplane_elisa.obj',
    'sphere': 'https://rawgit.com/vgarzom/BezierCurveWebgl/master/models/boulder.obj',
    },
    webGLStart
  );
};


main();



//------------------------- WordLogic -----------------------------------
//-----------------------------------------------------------------------
/**
 En este script se incorpora toda la lógica para pintar los elementos en pantalla
 
 **/
 
 
function drawWorld(){
  //roomCollisionCheck();
  gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
  mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.01, 1000.0, app.pMatrix);
  //mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.01, 1000.0, app.pMatrix);
 ...