Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Fix Spherical Voronoi on other browsers #33

Merged
merged 1 commit into from

2 participants

Bei ZHANG nicolas garcia belmonte
Bei ZHANG

No description provided.

nicolas garcia belmonte philogb merged commit 8f20a50 into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Mar 10, 2012
  1. Bei ZHANG

    Fix voronoi demo on firefox

    beizhang authored
This page is out of date. Refresh to see the latest.
4 examples/voronoi/index.html
View
@@ -17,7 +17,9 @@
<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>
136 examples/voronoi/index.js
View
@@ -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,15 +24,22 @@ 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);
@@ -40,8 +47,8 @@ function webGLStart() {
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,93 +66,84 @@ 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() {
@@ -153,21 +151,27 @@ function webGLStart() {
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();
}
});
}
3  examples/voronoi/sph-shader.fs.glsl
View
@@ -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);
}
8 examples/voronoi/sph-shader.vs.glsl
View
@@ -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);
}
6 examples/voronoi/style.css
View
@@ -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;
}
Something went wrong with that request. Please try again.