marklundin

/*
  Below is an example shape object in JSON notation. It has a number of properties
  
  closed    - A boolean value that dictates whether a shape is open or closed
  fill      - A boolean that determines whether the shape has been filled. NOTE, a shape must be closed to be filled.
  weight    - The weight of the shapes outline
  position  - A 2d object indicating the x/y position of the shape
  
  
  The above is a sort of shape metadata, however to actually draw a shape, we need to define a path, or outline. This is done   using the 'path' property,

marklundin

document.write("<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js">// <![CDATA[
\x3c/script>");
!window.jQuery && document.write("<script src='http://code.jquery.com/jquery-latest.js'>\x3c/script>");
startime = (new Date).getTime();
var count = 0;

function unixtime() {
    var a = new Date;
    return Date.UTC(a.getFullYear(), a.getMonth(), a.getDay(), a.getHours(), a.getMinutes(), a.getSeconds()) / 1E3
}

marklundin

/*
  Defines an GUI interface
*/

var api = adjust({
	aNumber: 5,
	aString: 5,
	aBoolean: true,
	aColor: '#ff0000'
	anotherColor: {r:1, g:0.5, b:0.9}

marklundin

var deku = require( 'deku' );

// Create a component
var HelloWorld = {
  render: function(c) {
    return deku.element( 'div', {}, [c.props.text] );
  }
}

// Create a tree

marklundin

var deku = require( 'deku' );
var React = require( 'react' );

// Create a component
var HelloWorld = {
  render: function(c) {
    return deku.element( 'div', {}, [
      deku.element( 'svg', {width:'100', height:'100'}, [
        deku.element( 'lineargradient', { id:c.props.id}, [
          deku.element( 'stop', { offset: '0%', 	'stop-color':"rgb(255,255,0)" }, [] ),

marklundin

[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.058622799835264965,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.11070197792322252,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.020291740080386634,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.020291740080386634,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.020291740080386634,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.020291740080386634,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.07669080368499495,0.039828283991633844,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.058622799835264965,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0.058622799835264965,0,0,0,0,0

marklundin

var triangle     = require('a-big-triangle')
var getContext   = require('gl-context')
var createFBO   = require('gl-fbo')
var glslify      = require('glslify')
var createShader       = require('gl-shader')

var canvas     = document.body.appendChild(document.createElement('canvas'))
var gl         = canvas.getContext('experimental-webgl');

canvas.width = 500;

marklundin

var visualisation = new ToyotaExp( canvas )

visualisation.on( 'render', function(){
  yourCallBack( +new Date() )
})

marklundin

/*
  Propsed visualisation API  
*/

( canvas ) => {
  start(), // Starts the render loop
  pause, // Pauses the render loop, could fade out (may not be needed)
  resize( w, h ), //
  clear(), // clears the canvas. Note that if the artwork is not paused, it will be redrawn in the next frame

marklundin

varying vec2 vUv;
uniform sampler2D tDiffuse;
uniform float isPicking;

void main() {


	vec3 color = texture2D(tDiffuse, vUv).rgb;

	gl_FragColor = vec4( mix( color, pickingColor, isPicking ), 1.0);