diff --git a/index.html b/index.html
index 02e6ae84..8fe9e1bc 100644
--- a/index.html
+++ b/index.html
@@ -59,7 +59,15 @@
-
+
diff --git a/src/js/main.js b/src/js/main.js
index 0d0af4a7..c07e7594 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -551,9 +551,9 @@ define([
s.sets = {
default: {
- num: 10000,
- mode: "LINES",
- sound: "",
+ num: 100000,
+ mode: "POINTS",
+ sound: "random",
lineSize: "NATIVE",
backgroundColor: [0, 0, 0, 1],
shader: getShader("vs").trim(),
@@ -1266,21 +1266,7 @@ define([
settings.shader = e.userData;
setShaderSuccessStatus(true);
clearLineErrors();
- if (s_firstCompile) {
- s_firstCompile = false;
- return;
- }
- const art = {
- settings,
- };
- const data = JSON.stringify(art);
- compressor.compress(data, 1, function(bytes) {
- const hex = base64.encode(bytes);
- const params = new URLSearchParams({
- s: hex
- });
- parent.history.replaceState({}, '', `/src/#${params.toString()}`);
- });
+ updateURL();
});
s.programManager.on('failure', function(errors) {
setShaderSuccessStatus(false);
@@ -1407,6 +1393,37 @@ define([
},
};
+ let s_updatingURL = false;
+ let s_urlNeedsUpdate = false;
+ function updateURL() {
+ if (s_firstCompile) {
+ s_firstCompile = false;
+ return;
+ }
+ if (s_updatingURL) {
+ s_urlNeedsUpdate = true;
+ return;
+ }
+ s_updatingURL = true;
+ const art = {
+ settings,
+ };
+
+ const data = JSON.stringify(art);
+ compressor.compress(data, 1, function(bytes) {
+ const hex = base64.encode(bytes);
+ const params = new URLSearchParams({
+ s: hex
+ });
+ parent.history.replaceState({}, '', `/src/#${params.toString()}`);
+ s_updatingURL = false;
+ if (s_urlNeedsUpdate) {
+ s_urlNeedsUpdate = false;
+ updateURL();
+ }
+ });
+ }
+
function setUIMode(mode, animate) {
mode = mode || '#ui-2v';
uiModes[mode](animate);
@@ -1439,6 +1456,7 @@ define([
function updateBackgroundColor(e) {
settings.backgroundColor = cssParse.parseCSSColor(e.target.value, true);
+ updateURL();
}
var colorElem = $("#background");
on(colorElem, 'change', updateBackgroundColor);
@@ -1451,6 +1469,7 @@ define([
var num = clamp(1, g.maxCount, parseInt(e.target.value)) | 0;
numRangeElem.value = num;
settings.num = num;
+ updateURL();
}
on(numElem, 'change', handleNumEdit);
on(numElem, 'input', handleNumEdit);
@@ -1459,17 +1478,20 @@ define([
var num = parseInt(e.target.value);
numElem.value = num;
settings.num = num;
+ updateURL();
});
var modeElem = $("#mode");
on(modeElem, 'change', function(e) {
settings.mode = e.target.value.toUpperCase();
g.mode = validModes[settings.mode];
+ updateURL();
});
var sizeElem = $("#size");
on(sizeElem, 'change', function(e) {
settings.lineSize = e.target.value.toUpperCase();
+ updateURL();
});
var timeElem = $("#time");
diff --git a/src/js/shaders.js b/src/js/shaders.js
index e8ac59db..11352176 100644
--- a/src/js/shaders.js
+++ b/src/js/shaders.js
@@ -52,10 +52,7 @@ varying vec4 v_color;
`,
// ===========================================================
"vs": `
-#define PI radians(180.)
-#define NUM_SEGMENTS 21.0
-#define NUM_POINTS (NUM_SEGMENTS * 2.0)
-#define STEP 5.0
+#define PI radians(180.0)
vec3 hsv2rgb(vec3 c) {
c = vec3(c.x, clamp(c.yz, 0.0, 1.0));
@@ -65,25 +62,25 @@ vec3 hsv2rgb(vec3 c) {
}
void main() {
- float point = mod(floor(vertexId / 2.0) + mod(vertexId, 2.0) * STEP, NUM_SEGMENTS);
- float count = floor(vertexId / NUM_POINTS);
- float offset = count * 0.02;
- float angle = point * PI * 2.0 / NUM_SEGMENTS + offset;
- float radius = 0.2;
- float c = cos(angle + time) * radius;
- float s = sin(angle + time) * radius;
- float orbitAngle = count * 0.01;
- float oC = cos(orbitAngle + time * count * 0.01) * sin(orbitAngle);
- float oS = sin(orbitAngle + time * count * 0.01) * sin(orbitAngle);
-
- vec2 aspect = vec2(1, resolution.x / resolution.y);
- vec2 xy = vec2(
- oC + c,
- oS + s);
- gl_Position = vec4(xy * aspect + mouse * 0.1, 0, 1);
-
- float hue = (time * 0.01 + count * 1.001);
- v_color = vec4(hsv2rgb(vec3(hue, 1, 1)), 1);
+ float across = floor(sqrt(vertexCount));
+ float down = floor(vertexCount / across);
+
+ float x = mod(vertexId, across);
+ float y = floor(vertexId / across);
+
+ float u = x / across;
+ float v = y / across;
+
+ vec2 xy = vec2(u * 2.0 - 1.0, v * 2.0 - 1.0);
+ gl_Position = vec4(xy, 0, 1);
+ gl_PointSize = max(0.1, resolution.x / across);
+
+ float f = atan(xy.x, xy.y);
+ float h = length(xy);
+ float s = texture2D(sound, vec2(abs(f / PI) * 0.5, h * 0.25)).a;
+
+ float hue = (time * 0.01 + abs(f) * 0.04);
+ v_color = vec4(hsv2rgb(vec3(hue, 1, pow(s, 2.))), 1);
}
`,
// ===========================================================