ITP BlogBlender

Design Exercise

Michael Edgcumbe — 2011-09-08T15:36:04+00:00

Last week, I began learning WebGL to evaluate its viability as an interface for visualization of our data set. I tend to like WebGL because it can be wrapped cleanly in javascript, and the implementation is fairly straightforward to walk into other languages, even if they need a syntax rewrite. WebGL can exist with decent feature parity to presentation on other platforms, like the iPad. Unfortunately, WebGL is not currently enabled in the standard version of Safari, although it does ship with development version as well as with the standard versions of Chrome and Firefox.

I found a visualization contest put forth by O’Reilly to promote the upcoming Strata conference in New York, and took on the assignment not to win a ticket to the contest but to have a simple challenge to begin piecing together the framework that might wrap our grant data at IMAP. The data for the visualization contest consists of two excel files: a list of 100 products with nutritional information and a linked table of ingredients ranked by volume for each of the 100 products. The goal is to create a data explorer that presents the products in useful views.

The design exercise has so far helped me to think about what kinds of interface elements I might include in a clean front end. It will eventually help me connect the code and raw data from Excel to a MongoDB (via C++) to an interface built with Javascript and WebGL (via Ruby on Rails). Moving through the organization of this data into an explorer deeply informs choices I must make later for IMAP’s constituents.

In this case, I am working my way from the front end to the back. The steps to the design exercise are:

Wireframe the front end in Illustrator
Build the front end structure in Javascript and HTML5 using placeholder data
Add WebGL transitions and animations
Load the two tables from Excel into Mongo using my C++ converter
Write queries for the database that return results to the interface
Link the database to the interface
Polish the UI
Package the code

Below are the wireframes I have created for Step 1:

September in New York – Talks & Demos

Rob Faludi — 2011-09-06T18:53:08+00:00

The next two weeks are going to be lively ones for makers in New York City! Here’s where to find me:

Open Hardware Summit, September 15th — running a breakout session “What Open Hardware Needs from the Cloud,” a discussion on how Internet services can better serve open hardware projects, with Jordan Husney.
Maker Faire New York, September 17th — giving a talk on the Make Live Stage, “Fun with XBees” that showcases the creative projects currently enabled by XBee radios, along with a tour of the tools that you can use to make your own.
Maker Faire: September 17 & 18th — showing several sensor and actuator projects from my book as well as a cool new way to get your devices onto the Internet in the MakerShed demo area.
Strata Conference, September 22nd — demonstrating data sensor networks from the book and new Internet gateway demos.

We’re also launching my Sensitive Buildings class at ITP today plus somebody asked me to be in an Ericsson documentary that according the producer, “aims to tell a compelling story about how we are on the brink to a digital revolution.”

Whew!

WebGL Lessons – Color, Animation

Michael Edgcumbe — 2011-09-02T14:35:13+00:00

Color added to the geometry from lesson 2. Code annotated below.

<strong></strong><html>

<head>
<title>Learning WebGL — lesson 1</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>

<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif

//varying variable is interpolated by the fragment shader between vertices
varying vec4 vColor;

void main(void) {
gl_FragColor = vColor;
}
</script>

<script id="shader-vs" type="x-shader/x-vertex">
//passed in from the gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute...)
attribute vec3 aVertexPosition;
//color attribute is passed in for each vertex and then interpolated by the
//fragment shader
attribute vec4 aVertexColor;

//set by setMatrixUniforms()
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying vec4 vColor;

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

<script type="text/javascript">

//GL Object
var gl;
function initGL(canvas) {
try {
//Initiate the webGL context
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
}

function getShader(gl, id) {
//pass in the script
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}

var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}

//create the shader object
var shader;
//assign the shader object
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}

//append the source
gl.shaderSource(shader, str);
//compile the shader
gl.compileShader(shader);

//check for errors
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}

return shader;
}

//Create an object to hold the shader program
var shaderProgram;

function initShaders() {
//read in, compile, and load the shaders into javascript objects
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");

//Put a program object into the javascript shaderProgram container
shaderProgram = gl.createProgram();

//attach the compiled shaders to the shaderProgram
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);

//Link the shader program
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}

//designate the shader program to be active
gl.useProgram(shaderProgram);

//setup a pointer to the location of the vertex position vector
//declared by the vertex shader
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
//make the array available
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

//gets a reference to the attributes that we want to pass to the vertex shader
shaderProgram.vertexColorAttribute = gl.getAttribLocation( shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);

//setup pointers to the uniform variables in the vertex shader
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
}

//Create the model view matrix
var mvMatrix = mat4.create();

//Create the projection matrix
var pMatrix = mat4.create();

//pass in the projection and modelview matrices into the vertex shader as uniforms
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}

//instantiate objects to hold the buffers for the geometry
var triangleVertexPositionBuffer;
var triangleVertexColorBuffer;
var squareVertexPositionBuffer;
var squareVertexColorBuffer;

//fill in the buffers
function initBuffers() {
//create the triangle buffer
triangleVertexPositionBuffer = gl.createBuffer();
//bind the buffer
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
//create the vertices for the geometry
var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];
//put the vertices in the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
//add an integer to the object to represent the number of dimensions for a vertex
triangleVertexPositionBuffer.itemSize = 3;
//add an integer to the object to represent the number of vertices
triangleVertexPositionBuffer.numItems = 3;

//put a buffer into the color buffer object
triangleVertexColorBuffer = gl.createBuffer();
//set the buffer to be ready to accept data
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
var colors = [
1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0
];
//put the color matrix into the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
//set the number of dimensions for each color (RGBA) - columns
triangleVertexColorBuffer.itemSize = 4;
//set the number of colors specified by the matrix - rows
triangleVertexColorBuffer.numItems = 3;

//repeat for the square
squareVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = 4;

squareVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
colors = []
for (var i=0; i < 4; i++) {
colors = colors.concat([0.5, 0.5, 1.0, 1.0]);
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
squareVertexColorBuffer.itemSize = 4;
squareVertexColorBuffer.numItems = 4;
}

function drawScene() {
//set the viewport
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
//clear the depth and color buffers
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

//set the perspective using the projection matrix
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

//set the identity matrix to the modelview matrix
mat4.identity(mvMatrix);

//translate the camera
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);

//DRAW THE TRIANGLE
//bind the triangle buffer
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

//put the values from the triangle buffer into the vertex position attribute variable in the vertex shader
//TODO: LOOK THIS FUNCTION UP
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

//assign the color buffer to the vertexColorAttribute reference that
//points to the shader attribute aVertexColor pointed to in initShaders()
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
gl.vertexAttribPointer( shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0 );

//send the modelview and projection matrices to the vertex shader
setMatrixUniforms();
//draw what was sent to the shaders
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);

//repeat for the square
mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
}

//Main function to push through the WebGL code
function webGLStart() {
//Create a canvas object from the HTML5 canvas tag in the body
var canvas = document.getElementById("lesson01-canvas");
//Pass the canvas object to initialize WebGL
initGL(canvas);
//Create the shaders
initShaders();
//Create the buffers and fill in the geometry
initBuffers();

//Clear the background to black
gl.clearColor(0.0, 0.0, 0.0, 1.0);
//Occlude for depth
gl.enable(gl.DEPTH_TEST);

//Draw everything
drawScene();
}

</script>

</head>

<body onload="webGLStart();">
<canvas id="lesson01-canvas" style="border: none;" width="500" height="500"></canvas>
</body>

</html>

With animation functions:

<strong></strong><html>

<head>
<title>Learning WebGL — lesson 1</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>
<script type="text/javascript" src="webgl-utils.js"></script>

<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif

//varying variable is interpolated by the fragment shader between vertices
varying vec4 vColor;

void main(void) {
gl_FragColor = vColor;
}
</script>

<script id="shader-vs" type="x-shader/x-vertex">
//passed in from the gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute...)
attribute vec3 aVertexPosition;
//color attribute is passed in for each vertex and then interpolated by the
//fragment shader
attribute vec4 aVertexColor;

//set by setMatrixUniforms()
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

varying vec4 vColor;

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

<script type="text/javascript">

//GL Object
var gl;
function initGL(canvas) {
try {
//Initiate the webGL context
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
}

function getShader(gl, id) {
//pass in the script
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}

var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}

//create the shader object
var shader;
//assign the shader object
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}

//append the source
gl.shaderSource(shader, str);
//compile the shader
gl.compileShader(shader);

//check for errors
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}

return shader;
}

//Create an object to hold the shader program
var shaderProgram;

function initShaders() {
//read in, compile, and load the shaders into javascript objects
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");

//Put a program object into the javascript shaderProgram container
shaderProgram = gl.createProgram();

//attach the compiled shaders to the shaderProgram
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);

//Link the shader program
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}

//designate the shader program to be active
gl.useProgram(shaderProgram);

//setup a pointer to the location of the vertex position vector
//declared by the vertex shader
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
//make the array available
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

//gets a reference to the attributes that we want to pass to the vertex shader
shaderProgram.vertexColorAttribute = gl.getAttribLocation( shaderProgram, "aVertexColor");
gl.enableVertexAttribArray(shaderProgram.vertexColorAttribute);

//setup pointers to the uniform variables in the vertex shader
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
}

//Create the model view matrix
var mvMatrix = mat4.create();

//Create the model view matrix stack
var mvMatrixStack = [];

//Create the projection matrix
var pMatrix = mat4.create();

//Function puts the current mvMatrix into the array of matrices
function mvPushMatrix(){
var copy = mat4.create();
mat4.set(mvMatrix, copy );
mvMatrixStack.push(copy);
}

//Function pops the last mvMatrix off the array of matrices
function mvPopMatrix(){
if(mvMatrixStack.length ==0){
throw "Invalid popMatrix";
}
mvMatrix = mvMatrixStack.pop();
}

//pass in the projection and modelview matrices into the vertex shader as uniforms
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}

//convert degrees to radians
function degToRad(degrees){
return degrees * Math.PI / 180;
}

//instantiate objects to hold the buffers for the geometry
var triangleVertexPositionBuffer;
var triangleVertexColorBuffer;
var squareVertexPositionBuffer;
var squareVertexColorBuffer;

//fill in the buffers
function initBuffers() {
//create the triangle buffer
triangleVertexPositionBuffer = gl.createBuffer();
//bind the buffer
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
//create the vertices for the geometry
var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];
//put the vertices in the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
//add an integer to the object to represent the number of dimensions for a vertex
triangleVertexPositionBuffer.itemSize = 3;
//add an integer to the object to represent the number of vertices
triangleVertexPositionBuffer.numItems = 3;

//put a buffer into the color buffer object
triangleVertexColorBuffer = gl.createBuffer();
//set the buffer to be ready to accept data
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
var colors = [
1.0, 0.0, 0.0, 1.0,
0.0, 1.0, 0.0, 1.0,
0.0, 0.0, 1.0, 1.0
];
//put the color matrix into the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
//set the number of dimensions for each color (RGBA) - columns
triangleVertexColorBuffer.itemSize = 4;
//set the number of colors specified by the matrix - rows
triangleVertexColorBuffer.numItems = 3;

//repeat for the square
squareVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = 4;

squareVertexColorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
colors = []
for (var i=0; i < 4; i++) {
colors = colors.concat([0.5, 0.5, 1.0, 1.0]);
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
squareVertexColorBuffer.itemSize = 4;
squareVertexColorBuffer.numItems = 4;
}

//rotation variables
var rTri = 0;
var rSquare = 0;

function drawScene() {
//set the viewport
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
//clear the depth and color buffers
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

//set the perspective using the projection matrix
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

//set the identity matrix to the modelview matrix
mat4.identity(mvMatrix);

//translate the camera
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);

//rotate the world
mvPushMatrix();
mat4.rotate(mvMatrix, degToRad(rTri), [0, 1, 0]);

//DRAW THE TRIANGLE
//bind the triangle buffer
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

//put the values from the triangle buffer into the vertex position attribute variable in the vertex shader
//TODO: LOOK THIS FUNCTION UP
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);

//assign the color buffer to the vertexColorAttribute reference that
//points to the shader attribute aVertexColor pointed to in initShaders()
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexColorBuffer);
gl.vertexAttribPointer( shaderProgram.vertexColorAttribute, triangleVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0 );

//send the modelview and projection matrices to the vertex shader
setMatrixUniforms();
//draw what was sent to the shaders
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);

mvPopMatrix();

//repeat for the square
mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
mvPushMatrix();
mat4.rotate(mvMatrix, degToRad(rSquare), [1, 0, 0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexColorBuffer);
gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, squareVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
mvPopMatrix();

}

var lastTime = 0;
function animate() {
var timeNow = new Date().getTime();
if (lastTime != 0) {
var elapsed = timeNow - lastTime;

rTri += (90 * elapsed) / 1000.0;
rSquare += (75 * elapsed) / 1000.0;
}
lastTime = timeNow;
}

//Move the world forward in time
function tick(){
//function from webgl-utils.js which calls a repaint
//does not repaint all windows with WebGL open, only the current one
requestAnimFrame(tick);
drawScene();
animate();
}

//Main function to push through the WebGL code
function webGLStart() {
//Create a canvas object from the HTML5 canvas tag in the body
var canvas = document.getElementById("lesson01-canvas");
//Pass the canvas object to initialize WebGL
initGL(canvas);
//Create the shaders
initShaders();
//Create the buffers and fill in the geometry
initBuffers();

//Clear the background to black
gl.clearColor(0.0, 0.0, 0.0, 1.0);
//Occlude for depth
gl.enable(gl.DEPTH_TEST);

tick();
}

</script>

</head>

<body onload="webGLStart();">
<canvas id="lesson01-canvas" style="border: none;" width="500" height="500"></canvas>
</body>

</html>

WebGL Hello World

Michael Edgcumbe — 2011-09-02T02:58:52+00:00

I spent the day at the office and some time this evening reviewing an excellent tutorial for setting up a WebGL canvas element in HTML5.

It’s my hope that I can use WebGL to do the heavy lifting for visualization in the browser, and easily walk the code back and forth from OpenGL ES used on the iPad.

I annotated the first lesson’s example as I went through to understand it.

<strong></strong><html>

<head>
<title>Learning WebGL — lesson 1</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<script type="text/javascript" src="glMatrix-0.9.5.min.js"></script>

<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif

void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
</script>

<script id="shader-vs" type="x-shader/x-vertex">
//passed in from the gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute...)
attribute vec3 aVertexPosition;

//set by setMatrixUniforms()
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;

void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
</script>

<script type="text/javascript">

//GL Object
var gl;
function initGL(canvas) {
try {
//Initiate the webGL context
gl = canvas.getContext("experimental-webgl");
gl.viewportWidth = canvas.width;
gl.viewportHeight = canvas.height;
} catch (e) {
}
if (!gl) {
alert("Could not initialise WebGL, sorry :-(");
}
}

function getShader(gl, id) {
//pass in the script
var shaderScript = document.getElementById(id);
if (!shaderScript) {
return null;
}

var str = "";
var k = shaderScript.firstChild;
while (k) {
if (k.nodeType == 3) {
str += k.textContent;
}
k = k.nextSibling;
}

//create the shader object
var shader;
//assign the shader object
if (shaderScript.type == "x-shader/x-fragment") {
shader = gl.createShader(gl.FRAGMENT_SHADER);
} else if (shaderScript.type == "x-shader/x-vertex") {
shader = gl.createShader(gl.VERTEX_SHADER);
} else {
return null;
}

//append the source
gl.shaderSource(shader, str);
//compile the shader
gl.compileShader(shader);

//check for errors
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert(gl.getShaderInfoLog(shader));
return null;
}

return shader;
}

//Create an object to hold the shader program
var shaderProgram;

function initShaders() {
//read in, compile, and load the shaders into javascript objects
var fragmentShader = getShader(gl, "shader-fs");
var vertexShader = getShader(gl, "shader-vs");

//Put a program object into the javascript shaderProgram container
shaderProgram = gl.createProgram();

//attach the compiled shaders to the shaderProgram
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);

//Link the shader program
gl.linkProgram(shaderProgram);

if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert("Could not initialise shaders");
}

//designate the shader program to be active
gl.useProgram(shaderProgram);

//setup a pointer to the location of the vertex position vector
//declared by the vertex shader
shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
//make the array available
gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);

//setup pointers to the uniform variables in the vertex shader
shaderProgram.pMatrixUniform = gl.getUniformLocation(shaderProgram, "uPMatrix");
shaderProgram.mvMatrixUniform = gl.getUniformLocation(shaderProgram, "uMVMatrix");
}

//Create the model view matrix
var mvMatrix = mat4.create();

//Create the projection matrix
var pMatrix = mat4.create();

//pass in the projection and modelview matrices into the vertex shader as uniforms
function setMatrixUniforms() {
gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
}

//instantiate objects to hold the buffers for the geometry
var triangleVertexPositionBuffer;
var squareVertexPositionBuffer;

//fill in the buffers
function initBuffers() {
//create the triangle buffer
triangleVertexPositionBuffer = gl.createBuffer();
//bind the buffer
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);
//create the vertices for the geometry
var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];
//put the vertices in the buffer
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
//add an integer to the object to represent the number of dimensions for a vertex
triangleVertexPositionBuffer.itemSize = 3;
//add an integer to the object to represent the number of vertices
triangleVertexPositionBuffer.numItems = 3;

//repeat for the square
squareVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = 4;
}

function drawScene() {
//set the viewport
gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
//clear the depth and color buffers
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

//set the perspective using the projection matrix
mat4.perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0, pMatrix);

//set the identity matrix to the modelview matrix
mat4.identity(mvMatrix);

//translate the camera
mat4.translate(mvMatrix, [-1.5, 0.0, -7.0]);

//DRAW THE TRIANGLE
//bind the triangle buffer
gl.bindBuffer(gl.ARRAY_BUFFER, triangleVertexPositionBuffer);

//put the values from the triangle buffer into the vertex position attribute variable in the vertex shader
//TODO: LOOK THIS FUNCTION UP
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, triangleVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
//send the modelview and projection matrices to the vertex shader
setMatrixUniforms();
//draw what was sent to the shaders
gl.drawArrays(gl.TRIANGLES, 0, triangleVertexPositionBuffer.numItems);

//repeat for the square
mat4.translate(mvMatrix, [3.0, 0.0, 0.0]);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, squareVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
setMatrixUniforms();
gl.drawArrays(gl.TRIANGLE_STRIP, 0, squareVertexPositionBuffer.numItems);
}

//Main function to push through the WebGL code
function webGLStart() {
//Create a canvas object from the HTML5 canvas tag in the body
var canvas = document.getElementById("lesson01-canvas");
//Pass the canvas object to initialize WebGL
initGL(canvas);
//Create the shaders
initShaders();
//Create the buffers and fill in the geometry
initBuffers();

//Clear the background to black
gl.clearColor(0.0, 0.0, 0.0, 1.0);
//Occlude for depth
gl.enable(gl.DEPTH_TEST);

//Draw everything
drawScene();
}

</script>

</head>

<body onload="webGLStart();">
<canvas id="lesson01-canvas" style="border: none;" width="500" height="500"></canvas>
</body>

</html>

Doubling Back

Michael Edgcumbe — 2011-08-31T19:10:54+00:00

Our methodology for coding is to have two separate coders evaluate an organization and discuss as a group the grantees for which they disagree. The group, led by Sheila, acts as a third coder and tie breaker.

Recently we added new categories to our definitions and we felt that it was important to make sure we considered the previously coded organizations under the new rubric. For that reason, we submitted the old coding to another round and found some changes to make in nearly every category. For example, we separated out the MECO category to see if it was internally consistent, and recategorized organizations for which we determined a primary focus of consulting and marketing as opposed to continuing medical education.

We are now printing out the documentation that comes up in research that leads to our decision and putting those face sheets into an archive. We have also asked the coders to cite the category definition reference when they want to discuss an organization so that we can understand where the boundaries between the current definitions lie and how they should be modified to accommodate new variations. Our best hope is that we no longer have to add new categories and can resist doubling back on work we have already done.

Interview on The Creators Project

Sarah Dahnke — 2011-08-26T06:51:22+00:00

The Creators Project did an interview with me this week, where I got to talk about nerdy circuit building and rocket boots.

Click here to read more!

Duet with Chair #2

Sarah Dahnke — 2011-08-26T06:24:38+00:00