npmでtimbreインストールした後、Plaskからtimbre使ってみるテスト。 別にそれぞれ連動させたわけじゃなくて、timbreのサンプルをplaskのサンプルに書き足しただけ。

app.fshader

#ifdef GL_ES
  precision highp float;
#endif

  varying vec4 vColor;

  void main(void) {
    gl_FragColor = vColor;
  }

app.js

// npm install timbre

var plask = require('plask');
var T = require("timbre");
var osc = T("osc", {mul:0.15}).play();


T("interval", {interval:1000}, function(count) {
  var wave = "pulse(" + ((count % 19) * 5 + 5) + ")";
  osc.wave = wave;
//  osc.plot({target:width});
}).start();



plask.simpleWindow({
  settings: {
    width: 1280,
    height: 720,
    type: '3d',  // Create an OpenGL window.
    vsync: true,  // Prevent tearing.
    multisample: true  // Anti-alias.
  },

  init: function() {
    var gl = this.gl;

    this.framerate(60);

    // Read/compile/link the shaders into a MagicProgram.  The |mprogram|
    // object created has methods to set the shader uniform variables.
    this.mprogram = new plask.gl.MagicProgram.createFromBasename(
        gl, __dirname, 'app');

    // Create the three 3d (xyz) vertices for the triangle.  This creates the
    // geometry and loads it into an Vertex Buffer Object (VBO).
    function makeBuffer(ar,itemSize) {
      var buffer = gl.createBuffer();
      var data = new Float32Array(ar);
      gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
      return {buffer: buffer, num: data.length / itemSize, data: data, itemSize: itemSize};
    }

    function makeEABuffer(ar,itemSize) {
      var buffer = gl.createBuffer();
      var data = new Uint16Array(ar);
      gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
      gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, data, gl.STATIC_DRAW);
      return {buffer: buffer, num: data.length / itemSize, data: data, itemSize: itemSize};
    }

    this.pyramidVertexPositionBuffer = makeBuffer([
    // Front face
     0.0,  1.0,  0.0,
    -1.0, -1.0,  1.0,
     1.0, -1.0,  1.0,
    // Right face
     0.0,  1.0,  0.0,
     1.0, -1.0,  1.0,
     1.0, -1.0, -1.0,
    // Back face
     0.0,  1.0,  0.0,
     1.0, -1.0, -1.0,
    -1.0, -1.0, -1.0,
    // Left face
     0.0,  1.0,  0.0,
    -1.0, -1.0, -1.0,
    -1.0, -1.0,  1.0
    ],3);
    
    this.pyramidVertexColorBuffer = makeBuffer([
    // Front face
    1.0, 0.0, 0.0, 1.0,
    0.0, 1.0, 0.0, 1.0,
    0.0, 0.0, 1.0, 1.0,
    // Right face
    1.0, 0.0, 0.0, 1.0,
    0.0, 0.0, 1.0, 1.0,
    0.0, 1.0, 0.0, 1.0,
    // Back face
    1.0, 0.0, 0.0, 1.0,
    0.0, 1.0, 0.0, 1.0,
    0.0, 0.0, 1.0, 1.0,
    // Left face
    1.0, 0.0, 0.0, 1.0,
    0.0, 0.0, 1.0, 1.0,
    0.0, 1.0, 0.0, 1.0
    ],4);
    
    this.cubeVertexPositionBuffer = makeBuffer([
      -1.0, -1.0,  1.0,
       1.0, -1.0,  1.0,
       1.0,  1.0,  1.0,
      -1.0,  1.0,  1.0,

      // Back face
      -1.0, -1.0, -1.0,
      -1.0,  1.0, -1.0,
       1.0,  1.0, -1.0,
       1.0, -1.0, -1.0,

      // Top face
      -1.0,  1.0, -1.0,
      -1.0,  1.0,  1.0,
       1.0,  1.0,  1.0,
       1.0,  1.0, -1.0,

      // Bottom face
      -1.0, -1.0, -1.0,
       1.0, -1.0, -1.0,
       1.0, -1.0,  1.0,
      -1.0, -1.0,  1.0,

      // Right face
       1.0, -1.0, -1.0,
       1.0,  1.0, -1.0,
       1.0,  1.0,  1.0,
       1.0, -1.0,  1.0,

      // Left face
      -1.0, -1.0, -1.0,
      -1.0, -1.0,  1.0,
      -1.0,  1.0,  1.0,
      -1.0,  1.0, -1.0,
    ],3);
    
    this.cubeVertexColorBuffer = makeBuffer(
    (function () {
       var colors = [
      [1.0, 0.0, 0.0, 1.0],     // Front face
      [1.0, 1.0, 0.0, 1.0],     // Back face
      [0.0, 1.0, 0.0, 1.0],     // Top face
      [1.0, 0.5, 0.5, 1.0],     // Bottom face
      [1.0, 0.0, 1.0, 1.0],     // Right face
      [0.0, 0.0, 1.0, 1.0],     // Left face
    ];
       var unpackedColors = [];
    for (var i in colors) {
          var color = colors[i];
          for (var j=0; j < 4; j++) {
            unpackedColors = unpackedColors.concat(color);
        }}
        return unpackedColors;}())
    ,4);
    
     this.cubeVertexIndexBuffer = makeEABuffer([
      0, 1, 2,      0, 2, 3,    // Front face
      4, 5, 6,      4, 6, 7,    // Back face
      8, 9, 10,     8, 10, 11,  // Top face
      12, 13, 14,   12, 14, 15, // Bottom face
      16, 17, 18,   16, 18, 19, // Right face
      20, 21, 22,   20, 22, 23  // Left face
    ],1);

    gl.viewport(0, 0, this.width, this.height);
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.clearDepth(1.0)
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);

  },

  draw: function() {
    var gl = this.gl;
    var pyramidVertexPositionBuffer = this.pyramidVertexPositionBuffer;
    var pyramidVertexColorBuffer = this.pyramidVertexColorBuffer;
    var cubeVertexPositionBuffer = this.cubeVertexPositionBuffer;
    var cubeVertexColorBuffer = this.cubeVertexColorBuffer;
    var cubeVertexIndexBuffer = this.cubeVertexIndexBuffer;

    
    var mprogram = this.mprogram;
    var t = this.frametime * 50;

    // Clear the background to gray.  The depth buffer isn't really needed for
    // a single triangle, but generally the depth buffer should also be cleared.
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

    // Build the "model-view" matrix, which will rotate the triangle based on
    // the mouse controls.
    var mv = new plask.Mat4();
    mv.translate(-1.5, 0.0, -7.0);
    mv.rotate(t / 50, 0, 1, 0);

    
    // Build the "perspective" matrix, which will apply the aspect ratio,
    // perspective divide, and clipping planes.
    var persp = new plask.Mat4();
    persp.perspective(45, this.width / this.height, 0.1, 100.0);

    // Set the shaders to be used during drawing, and pass the current
    // transformation matrices to them.
    mprogram.use();
    mprogram.set_uPMatrix(persp);
    mprogram.set_uMVMatrix(mv);

    // Draw the geometry from the VBO, passing the vertices to the vertex
    // shader as a vec3 named |a_xyz|.
    gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexPositionBuffer.buffer);
    gl.vertexAttribPointer(mprogram.location_aVertexPosition,
                           pyramidVertexPositionBuffer.itemSize,
                           gl.FLOAT,
                           false, 0, 0);
    gl.enableVertexAttribArray(mprogram.location_aVertexPosition);

    gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexColorBuffer.buffer);
    gl.vertexAttribPointer(mprogram.location_aVertexColor,
                           pyramidVertexColorBuffer.itemSize,
                           gl.FLOAT,
                           false, 0, 0);    
    gl.enableVertexAttribArray(mprogram.location_aVertexColor);
    gl.drawArrays(gl.TRIANGLES, 0, pyramidVertexPositionBuffer.num);
    
    mv.reset();
    //mv.rotate(-t / 50, 0, 1, 0);
    //mv.translate(3.0, 0.0, 0.0);
    mv.translate(1.5, 0.0, -7.0);
    mv.rotate(t / 50, 0, 0, 1); 
    mv.rotate(t / 50, 0, 1, 0);
    mv.rotate(t / 50, 1, 0, 0);
   
    mprogram.set_uMVMatrix(mv);
    
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer.buffer);
    gl.vertexAttribPointer(mprogram.location_aVertexPosition,
                           cubeVertexPositionBuffer.itemSize,
                           gl.FLOAT,
                           false, 0, 0);
    gl.enableVertexAttribArray(mprogram.location_aVertexPosition);
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer.buffer);
    gl.vertexAttribPointer(mprogram.location_aVertexColor,
                           cubeVertexColorBuffer.itemSize,
                           gl.FLOAT,
                           false, 0, 0);    
    gl.enableVertexAttribArray(mprogram.location_aVertexColor);
    
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer.buffer);
    
    gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.num, gl.UNSIGNED_SHORT, 0);


  }
});

app.vshader

  attribute vec3 aVertexPosition;
  attribute vec4 aVertexColor;

  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;

  varying vec4 vColor;

  void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vColor = aVertexColor;
  }