Permalink
Browse files

Fix voroni Demo on demo site

  • Loading branch information...
1 parent ab1da7f commit 018fa440be50399f29ccb5b20260c058c7e5256e @beizhang beizhang committed Mar 10, 2012
@@ -17,14 +17,16 @@
<h1>Spherical Voronoi Diagram</h1>
</div>
<div class="controls">
- Click on the sphere to calculate a [weighted] spherical Voronoi diagram.<br/>
+ Click on the sphere to calculate a
+ <a href="javascript:toggleWeighted()">[unweighted/weighted]</a>
+ spherical Voronoi diagram.<br/>
<a class="toggle-button on" href="javascript:toggleFullscreen()">[Go fullscreen]</a><br/>
<a class="toggle-button off" href="javascript:toggleFullscreen()">[Exit fullscreen]</a>
</div>
<canvas id="voronoi" style="border: none;" width="500" height="500"></canvas>
</div>
<div class="footer">
- Author: <a href='http://twitter.com/ikarienator/'>Zhang Bei</a>
+ Author: <a href='http://github.com/zhangbei/'>Zhang Bei</a>
</div>
</body>
</html>
@@ -2,19 +2,19 @@ window.addEventListener('DOMContentLoaded', webGLStart, false);
function webGLStart() {
var numSites = 1,
- sites = [0, 0, 1],
- siteColors = [0.5, 0.5, 0.7],
- width = 800,
- height = 600,
- R = 200,
- vs = [],
- weight = [1],
- fullscreen = false,
- dragStart = [],
- matStart = null,
- mat = new PhiloGL.Mat4(),
- imat = mat.clone(),
- weighted = false;
+ sites = [0, 0, 1],
+ siteColors = [0.5, 0.5, 0.7],
+ width = 800,
+ height = 600,
+ R = 200,
+ vs = [],
+ weight = [1],
+ fullscreen = false,
+ dragStart = [],
+ matStart = null,
+ mat = new PhiloGL.Mat4(),
+ imat = mat.clone(),
+ weighted = false;
mat.id();
imat.id();
@@ -24,24 +24,31 @@ function webGLStart() {
resize();
}
- window.toggleFullscreen = toggleFullscreen;
+ function toggleWeighted() {
+ weighted = !weighted;
+ this.app && this.app.update();
+ }
+ window.toggleFullscreen = toggleFullscreen;
+ window.toggleWeighted = toggleWeighted;
+
function resize() {
var canvas = document.getElementById('voronoi'),
- style = window.getComputedStyle(canvas);
+ style = window.getComputedStyle(canvas);
height = parseFloat(style.getPropertyValue('height'));
canvas.height = height;
width = parseFloat(style.getPropertyValue('width'));
canvas.width = width;
+ this.app && this.app.update();
}
window.addEventListener('resize', resize);
resize();
function calcXYZ(e) {
var x = e.x / R,
- y = e.y / R,
- z = 1.0 - x * x - y * y;
+ y = e.y / R,
+ z = 1.0 - x * x - y * y;
if (z < 0) {
while (z < 0) {
@@ -59,115 +66,112 @@ function webGLStart() {
}
PhiloGL('voronoi', {
- program:{
- from:'uris',
- vs:'sph-shader.vs.glsl',
- fs:'sph-shader.fs.glsl'
+ program: {
+ id: 'voronoi',
+ from: 'uris',
+ vs: 'sph-shader.vs.glsl',
+ fs: 'sph-shader.fs.glsl'
},
- onError:function (e) {
+ onError: function (e) {
alert(e);
},
- events:{
- cachePosition:false,
- onDragStart:function (e) {
+ events: {
+ cachePosition: false,
+ onDragStart: function (e) {
matStart = mat.clone();
dragStart = [e.x, e.y];
},
- onMouseWheel:function (e) {
+ onMouseWheel: function (e) {
var id = new PhiloGL.Mat4();
id.id();
- id.$rotateAxis((e.event.wheelDeltaX) / 5 / R, [0, 1, 0])
- .$rotateAxis((e.event.wheelDeltaY) / 5 / R, [1, 0, 0]);
+ id.$rotateAxis(('wheelDeltaX' in e.event ? e.event.wheelDeltaX : 0) / 5 / R, [0, 1, 0])
+ .$rotateAxis(('wheelDeltaY' in e.event ? e.event.wheelDeltaY : e.wheel * 120) / 5 / R, [1, 0, 0]);
mat = id.mulMat4(mat);
imat = mat.invert();
var v3 = calcXYZ(e);
sites[0] = v3[0];
sites[1] = v3[1];
sites[2] = v3[2];
+ this.update();
e.event.preventDefault();
e.event.stopPropagation();
},
- onDragMove:function (e) {
+ onDragMove: function (e) {
var id = new PhiloGL.Mat4();
id.id();
id.$rotateAxis((e.x - dragStart[0]) / R, [0, 1, 0])
- .$rotateAxis((e.y - dragStart[1]) / R, [-1, 0, 0]);
+ .$rotateAxis((e.y - dragStart[1]) / R, [-1, 0, 0]);
mat = id.mulMat4(matStart);
imat = mat.invert();
var v3 = calcXYZ(e);
sites[0] = v3[0];
sites[1] = v3[1];
sites[2] = v3[2];
+ this.update();
},
- onDragEnd:function (e) {
+ onDragEnd: function (e) {
var id = new PhiloGL.Mat4();
id.id();
id.$rotateAxis((e.x - dragStart[0]) / R, [0, 1, 0])
- .$rotateAxis((e.y - dragStart[1]) / R, [-1, 0, 0]);
+ .$rotateAxis((e.y - dragStart[1]) / R, [-1, 0, 0]);
mat = id.mulMat4(matStart);
imat = mat.invert();
var v3 = calcXYZ(e);
sites[0] = v3[0];
sites[1] = v3[1];
sites[2] = v3[2];
+ this.update();
},
- onMouseMove:function (e) {
+ onMouseMove: function (e) {
var v3 = calcXYZ(e);
sites[0] = v3[0];
sites[1] = v3[1];
sites[2] = v3[2];
+ this.update();
},
- onClick:function (e) {
+ onClick: function (e) {
var v3 = calcXYZ(e);
sites.push(v3[0], v3[1], v3[2]);
siteColors.push(Math.random(), Math.random(), Math.random());
weight.push(Math.random() * 2 + 1);
numSites++;
+ this.update();
}
},
- onLoad:function (app) {
+ onLoad: function (app) {
var gl = app.gl,
- canvas = app.canvas,
- program = app.program,
- camera = app.camera;
-
- gl.viewport(0, 0, canvas.width, canvas.height);
-
- gl.enable(gl.DEPTH_TEST);
- gl.depthFunc(gl.LEQUAL);
- program.setBuffers({
- 'square':{
- attribute:'aVertexPosition',
- value: new Float32Array([1, 1, -1, 1, 1, -1, -1, -1]),
- size:2
- }
- });
-
- function update() {
+ program = app.program;
+ window.app = app;
+ app.update = function () {
draw();
- PhiloGL.Fx.requestAnimationFrame(update);
}
function draw() {
gl.clearColor(0, 0, 0, 1);
gl.clearDepth(1);
gl.viewport(0, 0, width, height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
- program.setUniform('numberSites', numSites);
- program.setUniform('sites', sites);
- program.setUniform('ws', weight);
- program.setUniform('siteColors', siteColors);
- program.setUniform('p', 2);
- program.setUniform('modelMat', mat);
- program.setUniform('weighted', weighted);
- program.setUniform('width', width);
- program.setUniform('height', height);
- program.setBuffer('square');
- program.setBuffer('squareColors');
- gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+ PhiloGL.Media.Image.postProcess({
+ program: 'voronoi',
+ width: width,
+ height: height,
+ toScreen: true,
+ uniforms: {
+ 'numberSites': numSites,
+ 'sites': sites,
+ 'ws': weight,
+ 'siteColors': siteColors,
+ 'p': 2,
+ 'modelMat': mat,
+ 'weighted': weighted,
+ 'width': width,
+ 'height': height,
+ 'R': R
+ }
+ });
}
- update();
+ app.update();
}
});
}
@@ -2,6 +2,7 @@
precision highp float;
#endif
#define SITE_MAX 50
+varying vec2 vTexCoord1;
uniform int numberSites;
uniform float p;
uniform float width;
@@ -49,6 +50,6 @@ vec4 sample(float x0, float y0) {
return color;
}
void main(void) {
- float x = gl_FragCoord.x, y = gl_FragCoord.y;
+ float x = vTexCoord1.x * width, y = vTexCoord1.y * height;
gl_FragColor = sample(x, y);
}
@@ -1,6 +1,8 @@
-#define SITE_MAX 40
-attribute vec2 aVertexPosition;
+attribute vec3 position;
+attribute vec2 texCoord1;
+varying vec2 vTexCoord1;
void main(void) {
- gl_Position = vec4(aVertexPosition, 0.0, 1.0);
+ vTexCoord1 = texCoord1;
+ gl_Position = vec4(position.x * 2., position.y * 2., 0, 1);
}
@@ -104,7 +104,7 @@ canvas {
margin: 4px;
}
-.fullscreen .off {
+.fullscreen .toggle-button.off {
position: absolute;
color: white;
bottom: 5px;
@@ -113,11 +113,11 @@ canvas {
display: inline;
}
-.fullscreen .on {
+.fullscreen .toggle-button.on {
display: none;
}
-.off {
+.toggle-button.off {
display: none;
}

0 comments on commit 018fa44

Please sign in to comment.