Add spiral thing
This commit is contained in:
parent
68204be6b1
commit
2be6da7377
|
|
@ -13,6 +13,9 @@ menu:
|
|||
- name: ~ekkie
|
||||
pageRef: /
|
||||
weight: -1
|
||||
- name: spiral
|
||||
url: /spiral.html
|
||||
weight: 100
|
||||
- name: twtxt
|
||||
url: /twtxt.txt
|
||||
weight: 100
|
||||
|
|
|
|||
|
|
@ -0,0 +1,265 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>SpiralThing</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
font-family: sans;
|
||||
}
|
||||
#ogl-canvas {
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
#controls {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
margin: 0.5em;
|
||||
background-color: white;
|
||||
display: inline-block;
|
||||
padding: 0.5em;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="controls" class="hidden">
|
||||
<h1>Controls</h1>
|
||||
<label>Colors</label>
|
||||
<input type="color" id="color1" name="color1" value="#FFFFFF">
|
||||
<input type="color" id="color2" name="color2" value="#000000">
|
||||
<br>
|
||||
<label for="ratio">Ratio</label>
|
||||
<input type="number" id="ratio" name="ratio" min="0" max="1" step="0.05" value="0.5">
|
||||
<br>
|
||||
<label for="arms">Arms</label>
|
||||
<input type="number" id="arms" name="arms" min="1" max="100" step="1" value="2">
|
||||
<br>
|
||||
<label for="spiraldense">Density</label>
|
||||
<input type="number" id="spiraldense" name="spiraldense" min="0" max="100" step="0.05" value="5">
|
||||
<br>
|
||||
<label for="spiraldiff">Distortion</label>
|
||||
<input type="number" id="spiraldiff" name="spiraldiff" min="0" max="100" step="0.05" value="0.15">
|
||||
<br>
|
||||
<label for="speed">Speed</label>
|
||||
<input type="number" id="speed" name="speed" min="-5" max="5" step="0.1" value="1">
|
||||
<br>
|
||||
<label for="mirror">Mirror</label>
|
||||
<input type="checkbox" id="mirror" name="mirror">
|
||||
<br>
|
||||
</div>
|
||||
<canvas id="ogl-canvas" style="border: none"></canvas>
|
||||
<script id="draw-shader-fs" type="x-shader/x-fragment">
|
||||
precision highp float;
|
||||
|
||||
uniform vec2 iResolution;
|
||||
uniform vec2 iMouse;
|
||||
uniform float iTime;
|
||||
|
||||
const float pi = 3.141592654;
|
||||
|
||||
uniform vec3 color1;
|
||||
uniform vec3 color2;
|
||||
uniform float ratio;
|
||||
uniform float arms;
|
||||
uniform float spiraldense;
|
||||
uniform float spiraldiff;
|
||||
uniform float speed;
|
||||
uniform float mirrored;
|
||||
|
||||
void mainImage(out vec4 fragColor, in vec2 fragCoord)
|
||||
{
|
||||
vec2 uv = (fragCoord.xy - 0.5 * iResolution.xy) / iResolution.y;
|
||||
float r = length(uv);
|
||||
float theta = mirrored * atan(uv.y, uv.x);
|
||||
float alias = 10. / max(iResolution.x, iResolution.y) / pow(r, 0.75);
|
||||
fragColor = vec4(mix(color1, color2, smoothstep(ratio + alias, ratio - alias,
|
||||
abs(2. * fract(arms * theta / (2.*pi) + spiraldense * pow(r, spiraldiff) + speed * iTime) - 1.))), 1.);
|
||||
}
|
||||
|
||||
void main()
|
||||
{
|
||||
mainImage(gl_FragColor, gl_FragCoord.xy);
|
||||
}
|
||||
</script>
|
||||
<script id="draw-shader-vs" type="x-shader/x-vertex">
|
||||
attribute vec2 inPos;
|
||||
|
||||
void main()
|
||||
{
|
||||
gl_Position = vec4(inPos, 0.0, 1.0);
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
var canvas, gl, vp_size, prog, bufObj = {}, mousepos = [0, 0];
|
||||
var data = {}
|
||||
|
||||
var icolor1 = document.getElementById("color1");
|
||||
var icolor2 = document.getElementById("color2");
|
||||
var iratio = document.getElementById("ratio");
|
||||
var iarms = document.getElementById("arms");
|
||||
var ispiraldense = document.getElementById("spiraldense");
|
||||
var ispiraldiff = document.getElementById("spiraldiff");
|
||||
var ispeed = document.getElementById("speed");
|
||||
var imirrored = document.getElementById("mirror");
|
||||
|
||||
function updatevars() {
|
||||
data.color1 = hextorgb(icolor1.value);
|
||||
data.color2 = hextorgb(icolor2.value);
|
||||
data.ratio = parseFloat(iratio.value);
|
||||
data.arms = parseInt(iarms.value);
|
||||
data.spiraldense = parseFloat(ispiraldense.value);
|
||||
data.spiraldiff = parseFloat(ispiraldiff.value);
|
||||
data.speed = parseFloat(ispeed.value);
|
||||
data.mirrored = imirrored.checked ? -1 : 1;
|
||||
history.replaceState(null, "", "?" + encodeURIComponent(JSON.stringify(data)))
|
||||
}
|
||||
|
||||
function hextorgb(hex) {
|
||||
hex = hex.slice(1);
|
||||
r = parseInt(hex.substring(0, 2), 16) / 255;
|
||||
g = parseInt(hex.substring(2, 4), 16) / 255;
|
||||
b = parseInt(hex.substring(4, 6), 16) / 255;
|
||||
return [r, g, b];
|
||||
}
|
||||
|
||||
function rgbtohex(rgb) {
|
||||
r = rgb[0];
|
||||
g = rgb[1];
|
||||
b = rgb[2];
|
||||
toHex = c => {
|
||||
hex = Math.round(c * 255).toString(16);
|
||||
return hex.length === 1 ? '0' + hex : hex;
|
||||
}
|
||||
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
|
||||
}
|
||||
|
||||
function initScene() {
|
||||
try {
|
||||
data = JSON.parse(decodeURIComponent(window.location.search.slice(1)));
|
||||
if (data.color1 !== undefined)
|
||||
icolor1.value = rgbtohex(data.color1);
|
||||
if (data.color2 !== undefined)
|
||||
icolor2.value = rgbtohex(data.color2);
|
||||
if (data.ratio !== undefined)
|
||||
iratio.value = data.ratio;
|
||||
if (data.arms !== undefined)
|
||||
iarms.value = data.arms;
|
||||
if (data.spiraldense !== undefined)
|
||||
ispiraldense.value = data.spiraldense;
|
||||
if (data.spiraldiff !== undefined)
|
||||
ispiraldiff.value = data.spiraldiff;
|
||||
if (data.speed !== undefined)
|
||||
ispeed.value = data.speed;
|
||||
if (data.mirrored !== undefined)
|
||||
imirrored.value = data.mirrored;
|
||||
} catch(e) {}
|
||||
icolor1.oninput = updatevars;
|
||||
icolor2.oninput = updatevars;
|
||||
iratio.oninput = updatevars;
|
||||
iarms.oninput = updatevars;
|
||||
ispiraldense.oninput = updatevars;
|
||||
ispiraldiff.oninput = updatevars;
|
||||
ispeed.oninput = updatevars;
|
||||
imirrored.oninput = updatevars;
|
||||
|
||||
updatevars();
|
||||
|
||||
canvas = document.getElementById("ogl-canvas");
|
||||
canvas.onclick = function() { document.getElementById('controls').classList.toggle('hidden') }
|
||||
gl = canvas.getContext("experimental-webgl");
|
||||
if (!gl)
|
||||
return;
|
||||
|
||||
canvas.addEventListener('mousemove', (e) => {
|
||||
mousepos = [e.clientX, e.clientY];
|
||||
});
|
||||
|
||||
progDraw = gl.createProgram();
|
||||
for (let i = 0; i < 2; ++i) {
|
||||
let source = document.getElementById(i==0 ? "draw-shader-vs" : "draw-shader-fs").text;
|
||||
let shaderObj = gl.createShader(i==0 ? gl.VERTEX_SHADER : gl.FRAGMENT_SHADER);
|
||||
gl.shaderSource(shaderObj, source);
|
||||
gl.compileShader(shaderObj);
|
||||
let status = gl.getShaderParameter(shaderObj, gl.COMPILE_STATUS);
|
||||
if (!status) alert(gl.getShaderInfoLog(shaderObj));
|
||||
gl.attachShader(progDraw, shaderObj);
|
||||
gl.linkProgram(progDraw);
|
||||
}
|
||||
status = gl.getProgramParameter(progDraw, gl.LINK_STATUS);
|
||||
if ( !status ) alert(gl.getProgramInfoLog(progDraw));
|
||||
progDraw.inPos = gl.getAttribLocation(progDraw, "inPos");
|
||||
progDraw.iTime = gl.getUniformLocation(progDraw, "iTime");
|
||||
progDraw.iMouse = gl.getUniformLocation(progDraw, "iMouse");
|
||||
progDraw.iResolution = gl.getUniformLocation(progDraw, "iResolution");
|
||||
progDraw.color1 = gl.getUniformLocation(progDraw, "color1");
|
||||
progDraw.color2 = gl.getUniformLocation(progDraw, "color2");
|
||||
progDraw.ratio = gl.getUniformLocation(progDraw, "ratio");
|
||||
progDraw.arms = gl.getUniformLocation(progDraw, "arms");
|
||||
progDraw.spiraldense = gl.getUniformLocation(progDraw, "spiraldense");
|
||||
progDraw.spiraldiff = gl.getUniformLocation(progDraw, "spiraldiff");
|
||||
progDraw.speed = gl.getUniformLocation(progDraw, "speed");
|
||||
progDraw.mirrored = gl.getUniformLocation(progDraw, "mirrored");
|
||||
gl.useProgram(progDraw);
|
||||
|
||||
var pos = [ -1, -1, 1, -1, 1, 1, -1, 1 ];
|
||||
var inx = [ 0, 1, 2, 0, 2, 3 ];
|
||||
bufObj.pos = gl.createBuffer();
|
||||
gl.bindBuffer( gl.ARRAY_BUFFER, bufObj.pos );
|
||||
gl.bufferData( gl.ARRAY_BUFFER, new Float32Array( pos ), gl.STATIC_DRAW );
|
||||
bufObj.inx = gl.createBuffer();
|
||||
bufObj.inx.len = inx.length;
|
||||
gl.bindBuffer( gl.ELEMENT_ARRAY_BUFFER, bufObj.inx );
|
||||
gl.bufferData( gl.ELEMENT_ARRAY_BUFFER, new Uint16Array( inx ), gl.STATIC_DRAW );
|
||||
gl.enableVertexAttribArray( progDraw.inPos );
|
||||
gl.vertexAttribPointer( progDraw.inPos, 2, gl.FLOAT, false, 0, 0 );
|
||||
|
||||
gl.enable( gl.DEPTH_TEST );
|
||||
gl.clearColor( 0.0, 0.0, 0.0, 1.0 );
|
||||
|
||||
window.onresize = resize;
|
||||
resize();
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
function resize() {
|
||||
//vp_size = [gl.drawingBufferWidth, gl.drawingBufferHeight];
|
||||
vp_size = [window.innerWidth, window.innerHeight];
|
||||
//vp_size = [256, 256]
|
||||
canvas.width = vp_size[0];
|
||||
canvas.height = vp_size[1];
|
||||
}
|
||||
|
||||
function render(deltaMS) {
|
||||
|
||||
gl.viewport( 0, 0, canvas.width, canvas.height );
|
||||
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT );
|
||||
|
||||
gl.uniform1f(progDraw.iTime, deltaMS/1000.0);
|
||||
gl.uniform2f(progDraw.iResolution, canvas.width, canvas.height);
|
||||
gl.uniform2f(progDraw.iMouse, mousepos[0], mousepos[1]);
|
||||
gl.uniform3fv(progDraw.color1, data.color1);
|
||||
gl.uniform3fv(progDraw.color2, data.color2);
|
||||
gl.uniform1f(progDraw.ratio, data.ratio);
|
||||
gl.uniform1f(progDraw.arms, data.arms);
|
||||
gl.uniform1f(progDraw.spiraldense, data.spiraldense);
|
||||
gl.uniform1f(progDraw.spiraldiff, data.spiraldiff);
|
||||
gl.uniform1f(progDraw.speed, data.speed);
|
||||
gl.uniform1f(progDraw.mirrored, data.mirrored);
|
||||
gl.drawElements( gl.TRIANGLES, bufObj.inx.len, gl.UNSIGNED_SHORT, 0 );
|
||||
|
||||
requestAnimationFrame(render);
|
||||
}
|
||||
|
||||
initScene();
|
||||
|
||||
window.onload = initScene;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue