} an object with values for the
+ * uniforms.
+ */
+var setUniforms = function(setters, values) {
+ Object.keys(values).forEach(function(name) {
+ var setter = setters[name];
+ if (setter) {
+ setter(values[name]);
+ }
+ });
+};
+
+/**
+ * Creates setter functions for all attributes of a shader
+ * program
+ *
+ * @see setAttributes for example
+ *
+ * @param {WebGLProgram} program the program to create setters
+ * for.
+ * @returns {Setters} an object with a setter for each uniform
+ * by name.
+ */
+var createAttributeSetters = function(gl, program) {
+ var attribSetters = {
+ };
+
+ function createAttribSetter(index) {
+ return function(b) {
+ gl.bindBuffer(gl.ARRAY_BUFFER, b.buffer);
+ gl.enableVertexAttribArray(index);
+ gl.vertexAttribPointer(
+ index, b.numComponents || b.size, b.type || gl.FLOAT, b.normalize || false, b.stride || 0, b.offset || 0);
+ };
+ }
+
+ var numAttribs = gl.getProgramParameter(program, gl.ACTIVE_ATTRIBUTES);
+ for (var ii = 0; ii < numAttribs; ++ii) {
+ var attribInfo = gl.getActiveAttrib(program, ii);
+ if (!attribInfo) {
+ break;
+ }
+ var index = gl.getAttribLocation(program, attribInfo.name);
+ attribSetters[attribInfo.name] = createAttribSetter(index);
+ }
+
+ return attribSetters;
+};
+
+/**
+ * Sets attributes and binds buffers.
+ *
+ * @example
+ *
+ * var program = createProgramFromScripts(
+ * gl, ["some-vs", "some-fs");
+ *
+ * var attribSetters = createAttributeSetters(program);
+ *
+ * var positionBuffer = gl.createBuffer();
+ * var texcoordBuffer = gl.createBuffer();
+ *
+ * var attribs = {
+ * a_position: {buffer: positionBuffer, numComponents: 3},
+ * a_texcoord: {buffer: texcoordBuffer, numComponents: 2},
+ * };
+ *
+ * gl.useProgram(program);
+ *
+ * This will automatically bind the buffers AND set the
+ * attributes.
+ *
+ * setAttributes(attribSetters, attribs);
+ *
+ * Properties of attribs. For each attrib you can add
+ * properties:
+ *
+ * type: the type of data in the buffer. Default = gl.FLOAT
+ * normalize: whether or not to normalize the data. Default =
+ * false
+ * stride: the stride. Default = 0
+ * offset: offset into the buffer. Default = 0
+ *
+ * For example if you had 3 value float positions, 2 value
+ * float texcoord and 4 value uint8 colors you'd setup your
+ * attribs like this
+ *
+ * var attribs = {
+ * a_position: {buffer: positionBuffer, numComponents: 3},
+ * a_texcoord: {buffer: texcoordBuffer, numComponents: 2},
+ * a_color: {
+ * buffer: colorBuffer,
+ * numComponents: 4,
+ * type: gl.UNSIGNED_BYTE,
+ * normalize: true,
+ * },
+ * };
+ *
+ */
+var setAttributes = function(setters, buffers) {
+ Object.keys(buffers).forEach(function(name) {
+ var setter = setters[name];
+ if (setter) {
+ setter(buffers[name]);
+ }
+ });
+};
+
+// Add your prefix here.
+var browserPrefixes = [
+ "",
+ "MOZ_",
+ "OP_",
+ "WEBKIT_"
+];
+
+/**
+ * Given an extension name like WEBGL_compressed_texture_s3tc
+ * returns the supported version extension, like
+ * WEBKIT_WEBGL_compressed_teture_s3tc
+ * @param {string} name Name of extension to look for
+ * @return {WebGLExtension} The extension or undefined if not
+ * found.
+ */
+var getExtensionWithKnownPrefixes = function(gl, name) {
+ for (var ii = 0; ii < browserPrefixes.length; ++ii) {
+ var prefixedName = browserPrefixes[ii] + name;
+ var ext = gl.getExtension(prefixedName);
+ if (ext) {
+ return ext;
+ }
+ }
+};
+
+
+/**
+ * Resize a canvas to match the size it's displayed.
+ * @param {HTMLCanvasElement} canvas The canvas to resize.
+ * @param {boolean} true if the canvas was resized.
+ */
+var resizeCanvasToDisplaySize = function(canvas) {
+ var width = canvas.clientWidth;
+ var height = canvas.clientHeight;
+ if (canvas.width != width ||
+ canvas.height != height) {
+ canvas.width = width;
+ canvas.height = height;
+ return true;
+ }
+ return false;
+}
+
+/* export functions */
+window.createAttributeSetters = createAttributeSetters;
+window.createProgram = loadProgram;
+window.createProgramFromScripts = createProgramFromScripts;
+window.createProgramFromSources = createProgramFromSources;
+window.createShaderFromScriptElement = createShaderFromScript;
+window.createUniformSetters = createUniformSetters;
+window.getWebGLContext = getWebGLContext;
+window.updateCSSIfInIFrame = updateCSSIfInIFrame;
+window.getExtensionWithKnownPrefixes = getExtensionWithKnownPrefixes;
+window.resizeCanvasToDisplaySize = resizeCanvasToDisplaySize;
+window.setAttributes = setAttributes;
+window.setUniforms = setUniforms;
+window.setupWebGL = setupWebGL;
+
+// All browsers that support WebGL support requestAnimationFrame
+window.requestAnimFrame = window.requestAnimationFrame; // just to stay backward compatible.
+window.cancelRequestAnimFrame = window.cancelAnimationFrame; // just to stay backward compatible.
+
+//}());
+
+
+
+function onLoad () {
+ var canvas = document.getElementById("canvas");
+ var gl = canvas.getContext("experimental-webgl");
+
+ var vertexShaderNode = createShaderFromScriptElement(gl, "node-vertex-shader");
+ var fragmentShaderNode = createShaderFromScriptElement(gl, "node-fragment-shader");
+ var programNode = createProgram(gl, [vertexShaderNode, fragmentShaderNode]);
+ gl.useProgram(programNode);
+
+
+ var ATTRIBUTES = 5;
+ var j = 0;
+ var data = [];
+ var circle = {x: 50, y: 50, r: 45};
+
+ data[j++] = (circle.x - circle.r);
+ data[j++] = (circle.y - circle.r);
+ data[j++] = circle.x;
+ data[j++] = circle.y;
+ data[j++] = circle.r;
+
+ data[j++] = (circle.x + (1 + Math.sqrt(2)) * circle.r);
+ data[j++] = circle.y - circle.r;
+ data[j++] = circle.x;
+ data[j++] = circle.y;
+ data[j++] = circle.r;
+
+ data[j++] = (circle.x - circle.r);
+ data[j++] = (circle.y + (1 + Math.sqrt(2)) * circle.r);
+ data[j++] = circle.x;
+ data[j++] = circle.y;
+ data[j++] = circle.r;
+
+ var dataBuffer = new Float32Array(data);
+
+ var buffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
+ gl.bufferData(
+ gl.ARRAY_BUFFER,
+ dataBuffer,
+ gl.STATIC_DRAW);
+
+ var resolutionLocation = gl.getUniformLocation(programNode, "u_resolution");
+ gl.uniform2f(resolutionLocation, canvas.width, canvas.height);
+
+ var positionLocation = gl.getAttribLocation(programNode, "a_position");
+ var centerLocation = gl.getAttribLocation(programNode, "a_center");
+ var radiusLocation = gl.getAttribLocation(programNode, "a_radius");
+
+
+ gl.enableVertexAttribArray(positionLocation);
+ gl.enableVertexAttribArray(centerLocation);
+ gl.enableVertexAttribArray(radiusLocation);
+
+ gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 0);
+ gl.vertexAttribPointer(centerLocation, 2, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 8);
+ gl.vertexAttribPointer(radiusLocation, 1, gl.FLOAT, false, ATTRIBUTES * Float32Array.BYTES_PER_ELEMENT, 16);
+
+ gl.drawArrays(gl.TRIANGLES, 0, data.length/ATTRIBUTES);
+ }
+onLoad();
diff --git a/_assets/javascript/shaderCanvas3.js b/_assets/javascript/shaderCanvas3.js
new file mode 100644
index 0000000..cc210fd
--- /dev/null
+++ b/_assets/javascript/shaderCanvas3.js
@@ -0,0 +1,301 @@
+var squareRotation = 0.0;
+
+//main();
+window.addEventListener("load", main);
+
+//
+// Start here
+//
+function main() {
+ const canvas = document.querySelector('#canvas');
+ const gl = canvas.getContext('webgl');
+
+ // If we don't have a GL context, give up now
+
+ if (!gl) {
+ alert('Unable to initialize WebGL. Your browser or machine may not support it.');
+ return;
+ }
+
+ // Vertex shader program
+
+ const vsSource = `
+ attribute vec4 aVertexPosition;
+ attribute vec4 aVertexColor;
+
+ uniform mat4 uModelViewMatrix;
+ uniform mat4 uProjectionMatrix;
+
+ varying lowp vec4 vColor;
+
+ void main(void) {
+ gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+ vColor = aVertexColor;
+ }
+ `;
+
+ // Fragment shader program
+
+ const fsSource = `
+ varying lowp vec4 vColor;
+
+ void main(void) {
+ gl_FragColor = vColor;
+ }
+ `;
+
+ // Initialize a shader program; this is where all the lighting
+ // for the vertices and so forth is established.
+ const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
+
+ // Collect all the info needed to use the shader program.
+ // Look up which attributes our shader program is using
+ // for aVertexPosition, aVevrtexColor and also
+ // look up uniform locations.
+ const programInfo = {
+ program: shaderProgram,
+ attribLocations: {
+ vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+ vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
+ },
+ uniformLocations: {
+ projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+ modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+ },
+ };
+
+ // Here's where we call the routine that builds all the
+ // objects we'll be drawing.
+ const buffers = initBuffers(gl);
+
+ var then = 0;
+
+ // Draw the scene repeatedly
+ function render(now) {
+ now *= 0.001; // convert to seconds
+ const deltaTime = now - then;
+ then = now;
+
+ drawScene(gl, programInfo, buffers, deltaTime);
+
+ requestAnimationFrame(render);
+ }
+ requestAnimationFrame(render);
+}
+
+//
+// initBuffers
+//
+// Initialize the buffers we'll need. For this demo, we just
+// have one object -- a simple two-dimensional square.
+//
+function initBuffers(gl) {
+
+ // Create a buffer for the square's positions.
+
+ const positionBuffer = gl.createBuffer();
+
+ // Select the positionBuffer as the one to apply buffer
+ // operations to from here out.
+
+ gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+
+ // Now create an array of positions for the square.
+
+ const positions = [
+ 1.0, 1.0,
+ -1.0, 1.0,
+ 1.0, -1.0,
+ -1.0, -1.0,
+ ];
+
+ // Now pass the list of positions into WebGL to build the
+ // shape. We do this by creating a Float32Array from the
+ // JavaScript array, then use it to fill the current buffer.
+
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+
+ // Now set up the colors for the vertices
+
+ const colors = [
+ 1.0, 0.5, 1.0, 1.0, // white
+ 1.0, 0.6, 1.0, 1.0, // red
+ 1.0, 0.7, 1.0, 1.0, // green
+ 1.0, 0.3, 1.0, 1.0, // blue
+ ];
+
+ const colorBuffer = gl.createBuffer();
+ gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
+
+ return {
+ position: positionBuffer,
+ color: colorBuffer,
+ };
+}
+
+//
+// Draw the scene.
+//
+function drawScene(gl, programInfo, buffers, deltaTime) {
+ gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
+ gl.clearDepth(1.0); // Clear everything
+ gl.enable(gl.DEPTH_TEST); // Enable depth testing
+ gl.depthFunc(gl.LEQUAL); // Near things obscure far things
+
+ // Clear the canvas before we start drawing on it.
+
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+ // Create a perspective matrix, a special matrix that is
+ // used to simulate the distortion of perspective in a camera.
+ // Our field of view is 45 degrees, with a width/height
+ // ratio that matches the display size of the canvas
+ // and we only want to see objects between 0.1 units
+ // and 100 units away from the camera.
+
+ const fieldOfView = 45 * Math.PI / 180; // in radians
+ const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+ const zNear = 0.1;
+ const zFar = 100.0;
+ const projectionMatrix = mat4.create();
+
+ // note: glmatrix.js always has the first argument
+ // as the destination to receive the result.
+ mat4.perspective(projectionMatrix,
+ fieldOfView,
+ aspect,
+ zNear,
+ zFar);
+
+ // Set the drawing position to the "identity" point, which is
+ // the center of the scene.
+ const modelViewMatrix = mat4.create();
+
+ // Now move the drawing position a bit to where we want to
+ // start drawing the square.
+
+ mat4.translate(modelViewMatrix, // destination matrix
+ modelViewMatrix, // matrix to translate
+ [-0.0, 0.0, -6.0]); // amount to translate
+ mat4.rotate(modelViewMatrix, // destination matrix
+ modelViewMatrix, // matrix to rotate
+ squareRotation, // amount to rotate in radians
+ [0, 0, 1]); // axis to rotate around
+
+ // Tell WebGL how to pull out the positions from the position
+ // buffer into the vertexPosition attribute
+ {
+ const numComponents = 2;
+ const type = gl.FLOAT;
+ const normalize = false;
+ const stride = 0;
+ const offset = 0;
+ gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+ gl.vertexAttribPointer(
+ programInfo.attribLocations.vertexPosition,
+ numComponents,
+ type,
+ normalize,
+ stride,
+ offset);
+ gl.enableVertexAttribArray(
+ programInfo.attribLocations.vertexPosition);
+ }
+
+ // Tell WebGL how to pull out the colors from the color buffer
+ // into the vertexColor attribute.
+ {
+ const numComponents = 4;
+ const type = gl.FLOAT;
+ const normalize = false;
+ const stride = 0;
+ const offset = 0;
+ gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
+ gl.vertexAttribPointer(
+ programInfo.attribLocations.vertexColor,
+ numComponents,
+ type,
+ normalize,
+ stride,
+ offset);
+ gl.enableVertexAttribArray(
+ programInfo.attribLocations.vertexColor);
+ }
+
+ // Tell WebGL to use our program when drawing
+
+ gl.useProgram(programInfo.program);
+
+ // Set the shader uniforms
+
+ gl.uniformMatrix4fv(
+ programInfo.uniformLocations.projectionMatrix,
+ false,
+ projectionMatrix);
+ gl.uniformMatrix4fv(
+ programInfo.uniformLocations.modelViewMatrix,
+ false,
+ modelViewMatrix);
+
+ {
+ const offset = 0;
+ const vertexCount = 4;
+ gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+ }
+
+ // Update the rotation for the next draw
+
+ squareRotation += deltaTime;
+}
+
+//
+// Initialize a shader program, so WebGL knows how to draw our data
+//
+function initShaderProgram(gl, vsSource, fsSource) {
+ const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+ const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+
+ // Create the shader program
+
+ const shaderProgram = gl.createProgram();
+ gl.attachShader(shaderProgram, vertexShader);
+ gl.attachShader(shaderProgram, fragmentShader);
+ gl.linkProgram(shaderProgram);
+
+ // If creating the shader program failed, alert
+
+ if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+ alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
+ return null;
+ }
+
+ return shaderProgram;
+}
+
+//
+// creates a shader of the given type, uploads the source and
+// compiles it.
+//
+function loadShader(gl, type, source) {
+ const shader = gl.createShader(type);
+
+ // Send the source to the shader object
+
+ gl.shaderSource(shader, source);
+
+ // Compile the shader program
+
+ gl.compileShader(shader);
+
+ // See if it compiled successfully
+
+ if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+ alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+ gl.deleteShader(shader);
+ return null;
+ }
+
+ return shader;
+}
+
diff --git a/_assets/javascript/shaderCanvas4.js b/_assets/javascript/shaderCanvas4.js
new file mode 100644
index 0000000..9681405
--- /dev/null
+++ b/_assets/javascript/shaderCanvas4.js
@@ -0,0 +1,196 @@
+var shader_time = 0.0;
+var canvas_size = new Array(2);
+
+window.addEventListener("load", main);
+function main() {
+ var canvas = document.querySelector('#webgl-canvas');
+ const canvasses = document.querySelectorAll('.webgl-shader-canvas');
+ if (canvasses.length == 0) {
+ console.log("WebGL script requires at least one canvas with class 'webgl-shader-canvas''");
+ return
+ }
+ canvasses.forEach(function(canvas){
+ if (!canvas.getAttributeNames().includes("data-fs-source") || !canvas.getAttributeNames().includes("data-fs-source")) {
+ console.log("WebGL script requires a canvas with data-fs-source and data-vs-source attributes.");
+ return
+ }
+ // load vertex shader
+ const vsxhttp = new XMLHttpRequest();
+ vsxhttp.onreadystatechange = function() {
+ if (this.readyState == 4 && this.status == 200) {
+ const vsSource = vsxhttp.responseText;
+ // load fragment shader
+ const fsxhttp = new XMLHttpRequest();
+ fsxhttp.onreadystatechange = function() {
+ if (this.readyState == 4 && this.status == 200) {
+ const fsSource = fsxhttp.responseText;
+ // console.log(fsSource);
+ // console.log(fsSource);
+ // Shaders loaded, begin the webgl render:
+ webglRender(canvas, vsSource, fsSource);
+ }
+ }
+ fsxhttp.open('GET',canvas.getAttribute('data-fs-source'));
+ fsxhttp.send();
+ }
+ }
+ vsxhttp.open('GET',canvas.getAttribute('data-vs-source'));
+ vsxhttp.send();
+ });
+}
+
+function webglRender(canvas, vsSource, fsSource) {
+ const gl = canvas.getContext('webgl');
+ // If we don't have a GL context, give up now
+ if (!gl) {
+ alert('Unable to initialize WebGL. Your browser or machine may not support it.');
+ return;
+ }
+ canvas_size[0] = canvas.width; canvas_size[1] = canvas.height;
+ const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
+ // Collect all the info needed to use the shader program.
+ // Look up which attributes our shader program is using
+ // for aVertexPosition, aVevrtexColor and also
+ // look up uniform locations.
+ const programInfo = {
+ program: shaderProgram,
+ attribLocations: {
+ vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
+ },
+ uniformLocations: {
+ projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
+ modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
+ uResolution: gl.getUniformLocation(shaderProgram, 'uResolution'),
+ uTime: gl.getUniformLocation(shaderProgram, 'uTime'),
+ },
+ };
+ // Here's where we call the routine that builds all the
+ // objects we'll be drawing.
+ const buffers = initBuffers(gl);
+ var then = 0;
+ // Draw the scene repeatedly
+ function render(now) {
+ now *= 0.001; // convert to seconds
+ const deltaTime = now - then;
+ then = now;
+ drawScene(gl, programInfo, buffers, deltaTime);
+ window.requestAnimationFrame(render);
+ }
+ window.requestAnimationFrame(render);
+}
+
+//
+// initBuffers
+//
+// Initialize the buffers we'll need. For this demo, we just
+// have one object -- a simple two-dimensional square.
+//
+function initBuffers(gl) {
+ // Create a buffer for the square's positions.
+ const positionBuffer = gl.createBuffer();
+ // Select the positionBuffer as the one to apply buffer operations to from here out.
+ gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+ // Now create an array of positions for the square.
+ const positions = [
+ 1.0, 1.0,
+ -1.0, 1.0,
+ 1.0, -1.0,
+ -1.0, -1.0,
+ ];
+ // Now pass the list of positions into WebGL to build the
+ // shape. We do this by creating a Float32Array from the
+ // JavaScript array, then use it to fill the current buffer.
+ gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
+ return {
+ position: positionBuffer,
+ };
+}
+
+//
+// Draw the scene.
+//
+function drawScene(gl, programInfo, buffers, deltaTime) {
+ gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
+ gl.clearDepth(1.0); // Clear everything
+ gl.enable(gl.DEPTH_TEST); // Enable depth testing
+ gl.depthFunc(gl.LEQUAL); // Near things obscure far things
+
+ // Clear the canvas before we start drawing on it.
+ gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
+
+ // Create a orthographic matrix
+ const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
+ const zNear = 0.0;
+ const zFar = 100.0;
+ const projectionMatrix = mat4.create();
+
+ // note: glmatrix.js always has the first argument as the destination to receive the result.
+ mat4.ortho(projectionMatrix, -1.0, 1.0, -1.0, 1.0, zNear, zFar);
+ // Set the drawing position to the "identity" point, which is
+ // the center of the scene.
+ const modelViewMatrix = mat4.create();
+ // Tell WebGL how to pull out the positions from the position
+ // buffer into the vertexPosition attribute
+ {
+ const numComponents = 2;
+ const type = gl.FLOAT;
+ const normalize = false;
+ const stride = 0;
+ const offset = 0;
+ gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
+ gl.vertexAttribPointer(programInfo.attribLocations.vertexPosition, numComponents, type, normalize, stride, offset);
+ gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
+ }
+
+ // Tell WebGL to use our program when drawing
+ gl.useProgram(programInfo.program);
+
+ // Set the shader uniforms
+ gl.uniformMatrix4fv(programInfo.uniformLocations.projectionMatrix, false, projectionMatrix);
+ gl.uniformMatrix4fv(programInfo.uniformLocations.modelViewMatrix, false, modelViewMatrix);
+ gl.uniform2f(programInfo.uniformLocations.uResolution, canvas_size[0], canvas_size[1]);
+ gl.uniform1f(programInfo.uniformLocations.uTime, shader_time);
+ {
+ const offset = 0;
+ const vertexCount = 4;
+ gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount);
+ }
+ // Update time:
+ shader_time += deltaTime;
+}
+
+//
+// Initialize a shader program, so WebGL knows how to draw our data
+//
+function initShaderProgram(gl, vsSource, fsSource) {
+ const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
+ const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
+ // Create the shader program
+ const shaderProgram = gl.createProgram();
+ gl.attachShader(shaderProgram, vertexShader);
+ gl.attachShader(shaderProgram, fragmentShader);
+ gl.linkProgram(shaderProgram);
+ // If creating the shader program failed, alert
+ if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
+ alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
+ return null;
+ }
+ return shaderProgram;
+}
+
+//
+// creates a shader of the given type, uploads the source and compiles it.
+//
+function loadShader(gl, type, source) {
+ const shader = gl.createShader(type);
+ gl.shaderSource(shader, source); // Send the source to the shader object
+ gl.compileShader(shader); // Compile the shader program
+ // See if it compiled successfully
+ if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+ alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
+ gl.deleteShader(shader);
+ return null;
+ }
+
+ return shader;
+}
diff --git a/_assets/models/CoconutCan_190608_v04.glb b/_assets/models/CoconutCan_190608_v04.glb
new file mode 100644
index 0000000..f90b126
Binary files /dev/null and b/_assets/models/CoconutCan_190608_v04.glb differ
diff --git a/_assets/styles/sequencer.scss b/_assets/styles/sequencer.scss
new file mode 100644
index 0000000..b220aaa
--- /dev/null
+++ b/_assets/styles/sequencer.scss
@@ -0,0 +1,38 @@
+.sequencer-baseline {
+ position:relative;
+}
+
+.sequencer-wrapper {
+ position: absolute;
+ width: 100%;
+ margin-top: 12%;
+}
+
+.sequencer {
+ display: grid;
+ margin: 0 auto;
+ grid-template-columns: repeat(8, 1fr);
+ transform: rotate(30deg) skew(-30deg);
+ left: 25%;
+ width: 60%;
+}
+
+.sequencer-button {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ transform: skew(30deg) rotate(-30deg);
+ background-image: asset_url("Neon_Cube_01_200209_v02-02.png");
+ padding-bottom: 78%;
+ margin: 12% -10%;
+ background-size: cover;
+ background-position: 0 100%;
+ &:checked {
+ background-position: 0 33.33%;
+ &.activated {
+ background-position: 0 0;
+ }
+ }
+ &.activated {
+ background-position: 0 66.66%;
+ }
+}
diff --git a/_assets/styles/styles.scss b/_assets/styles/styles.scss
new file mode 100644
index 0000000..ac175f2
--- /dev/null
+++ b/_assets/styles/styles.scss
@@ -0,0 +1,52 @@
+@charset "utf-8";
+
+// Define defaults for each variable.
+
+$base-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$base-font-size: 0.7rem !default;
+$base-font-weight: 400 !default;
+$small-font-size: $base-font-size * 0.875 !default;
+$base-line-height: 1.5 !default;
+
+$spacing-unit: 30px !default;
+
+$text-color: #fdfdfd !default;
+$background-color: #111 !default;
+$brand-color: #b3b3b3 !default;
+
+$grey-color: #b3b3b3 !default;
+$grey-color-light: lighten($grey-color, 20%) !default;
+$grey-color-dark: darken($grey-color, 60%) !default;
+
+$table-text-align: left !default;
+
+// Width of the content area
+$content-width: 800px !default;
+
+$on-palm: 600px !default;
+$on-laptop: 800px !default;
+
+// Use media queries like this:
+// @include media-query($on-palm) {
+// .wrapper {
+// padding-right: $spacing-unit / 2;
+// padding-left: $spacing-unit / 2;
+// }
+// }
+@mixin media-query($device) {
+ @media screen and (max-width: $device) {
+ @content;
+ }
+}
+
+@mixin relative-font-size($ratio) {
+ font-size: $base-font-size * $ratio;
+}
+
+// Import partials.
+@import
+ "theme/base",
+ "theme/layout",
+ "theme/syntax-highlighting",
+ "theme/typography"
+;
diff --git a/_assets/styles/theme/_base.scss b/_assets/styles/theme/_base.scss
new file mode 100644
index 0000000..584f3ba
--- /dev/null
+++ b/_assets/styles/theme/_base.scss
@@ -0,0 +1,258 @@
+/**
+ * Reset some basic elements
+ */
+body, h1, h2, h3, h4, h5, h6,
+p, blockquote, pre, hr,
+dl, dd, ol, ul, figure {
+ margin: 0;
+ padding: 0;
+}
+
+
+
+/**
+ * Basic styling
+ */
+body {
+ font: $base-font-weight #{$base-font-size}/#{$base-line-height} $base-font-family;
+ color: $text-color;
+ background-color: $background-color;
+ -webkit-text-size-adjust: 100%;
+ -webkit-font-feature-settings: "kern" 1;
+ -moz-font-feature-settings: "kern" 1;
+ -o-font-feature-settings: "kern" 1;
+ font-feature-settings: "kern" 1;
+ font-kerning: normal;
+ display: flex;
+ min-height: 100vh;
+ flex-direction: column;
+}
+
+
+
+/**
+ * Set `margin-bottom` to maintain vertical rhythm
+ */
+h1, h2, h3, h4, h5, h6,
+p, blockquote, pre,
+ul, ol, dl, figure,
+%vertical-rhythm {
+ margin-bottom: $spacing-unit / 2;
+}
+
+
+
+/**
+ * `main` element
+ */
+main {
+ display: block; /* Default value of `display` of `main` element is 'inline' in IE 11. */
+}
+
+
+
+/**
+ * Images
+ */
+img {
+ max-width: 100%;
+ vertical-align: middle;
+}
+
+
+
+/**
+ * Figures
+ */
+figure > img {
+ display: block;
+}
+
+figcaption {
+ font-size: $small-font-size;
+}
+
+
+
+/**
+ * Lists
+ */
+ul, ol {
+ margin-left: $spacing-unit;
+}
+
+li {
+ > ul,
+ > ol {
+ margin-bottom: 0;
+ }
+}
+
+
+
+/**
+ * Headings
+ */
+h1, h2, h3, h4, h5, h6 {
+ font-weight: $base-font-weight;
+}
+
+
+
+/**
+ * Links
+ */
+a {
+ color: $brand-color;
+ text-decoration: none;
+
+ &:visited {
+ color: darken($brand-color, 10%);
+ }
+
+ &:hover {
+ color: $text-color;
+ text-decoration: underline;
+ }
+
+ .social-media-list &:hover {
+ text-decoration: none;
+
+ .username {
+ text-decoration: underline;
+ }
+ }
+}
+
+
+/**
+ * Blockquotes
+ */
+blockquote {
+ color: $grey-color;
+ border-left: 4px solid $grey-color-light;
+ padding-left: $spacing-unit / 2;
+ @include relative-font-size(1.125);
+ letter-spacing: -1px;
+ font-style: italic;
+
+ > :last-child {
+ margin-bottom: 0;
+ }
+}
+
+
+
+/**
+ * Code formatting
+ */
+pre,
+code {
+ @include relative-font-size(0.9375);
+ border: 1px solid $grey-color-light;
+ border-radius: 3px;
+ background-color: #eef;
+}
+
+code {
+ padding: 1px 5px;
+}
+
+pre {
+ padding: 8px 12px;
+ overflow-x: auto;
+
+ > code {
+ border: 0;
+ padding-right: 0;
+ padding-left: 0;
+ }
+}
+
+
+
+/**
+ * Wrapper
+ */
+.wrapper {
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit} * 2));
+ max-width: calc(#{$content-width} - (#{$spacing-unit} * 2));
+ margin-right: auto;
+ margin-left: auto;
+ padding-right: $spacing-unit;
+ padding-left: $spacing-unit;
+ @extend %clearfix;
+
+ @include media-query($on-laptop) {
+ max-width: -webkit-calc(#{$content-width} - (#{$spacing-unit}));
+ max-width: calc(#{$content-width} - (#{$spacing-unit}));
+ padding-right: $spacing-unit / 2;
+ padding-left: $spacing-unit / 2;
+ }
+}
+
+
+
+/**
+ * Clearfix
+ */
+%clearfix:after {
+ content: "";
+ display: table;
+ clear: both;
+}
+
+
+
+/**
+ * Icons
+ */
+
+.svg-icon {
+ width: 16px;
+ height: 16px;
+ display: inline-block;
+ fill: #{$grey-color};
+ padding-right: 5px;
+ vertical-align: text-top;
+}
+
+.social-media-list {
+ li + li {
+ padding-top: 5px;
+ }
+}
+
+
+
+/**
+ * Tables
+ */
+table {
+ margin-bottom: $spacing-unit;
+ width: 100%;
+ text-align: $table-text-align;
+ color: lighten($text-color, 18%);
+ border-collapse: collapse;
+ border: 1px solid $grey-color-light;
+ tr {
+ &:nth-child(even) {
+ background-color: lighten($grey-color-light, 6%);
+ }
+ }
+ th, td {
+ padding: ($spacing-unit / 3) ($spacing-unit / 2);
+ }
+ th {
+ background-color: lighten($grey-color-light, 3%);
+ border: 1px solid darken($grey-color-light, 4%);
+ border-bottom-color: darken($grey-color-light, 12%);
+ }
+ td {
+ border: 1px solid $grey-color-light;
+ }
+}
+
+.site-nav .menu-icon > svg {
+ fill: #fff !important
+}
diff --git a/_assets/styles/theme/_layout.scss b/_assets/styles/theme/_layout.scss
new file mode 100644
index 0000000..3ba3d0a
--- /dev/null
+++ b/_assets/styles/theme/_layout.scss
@@ -0,0 +1,268 @@
+/**
+ * Site header
+ */
+.site-header {
+ border-top: 5px solid $grey-color-dark;
+ min-height: $spacing-unit * 1.865;
+
+ // Positioning context for the mobile navigation icon
+ position: relative;
+}
+
+.site-title {
+ @include relative-font-size(1.625);
+ font-weight: 300;
+ line-height: $base-line-height * $base-font-size * 2.25;
+ letter-spacing: -1px;
+ margin-bottom: 0;
+ float: left;
+ color: $text-color;
+
+ &,
+ &:visited {
+ color: $text-color;
+ }
+}
+
+.site-nav {
+ float: right;
+ line-height: $base-line-height * $base-font-size * 2.25;
+
+ .nav-trigger {
+ display: none;
+ }
+
+ .menu-icon {
+ display: none;
+ }
+
+ .page-link {
+ color: $text-color;
+ line-height: $base-line-height;
+
+ // Gaps between nav items, but not on the last one
+ &:not(:last-child) {
+ margin-right: 20px;
+ }
+ }
+
+ @include media-query($on-palm) {
+ position: absolute;
+ top: 9px;
+ right: $spacing-unit / 2;
+ background-color: $background-color;
+ border: 1px solid $grey-color-light;
+ border-radius: 5px;
+ text-align: right;
+
+ label[for="nav-trigger"] {
+ display: block;
+ float: right;
+ width: 36px;
+ height: 36px;
+ z-index: 2;
+ cursor: pointer;
+ }
+
+ .menu-icon {
+ display: block;
+ float: right;
+ width: 36px;
+ height: 26px;
+ line-height: 0;
+ padding-top: 10px;
+ text-align: center;
+
+ > svg {
+ fill: $grey-color-dark;
+ }
+ }
+
+ input ~ .trigger {
+ clear: both;
+ display: none;
+ }
+
+ input:checked ~ .trigger {
+ display: block;
+ padding-bottom: 5px;
+ }
+
+ .page-link {
+ display: block;
+ padding: 5px 10px;
+
+ &:not(:last-child) {
+ margin-right: 0;
+ }
+ margin-left: 20px;
+ }
+ }
+}
+
+
+
+/**
+ * Site footer
+ */
+.site-footer {
+ border-top: 1px solid $grey-color-dark;
+ padding: $spacing-unit 0;
+}
+
+.footer-heading {
+ @include relative-font-size(1.125);
+ margin-bottom: $spacing-unit / 2;
+}
+
+.contact-list,
+.social-media-list {
+ list-style: none;
+ margin-left: 0;
+}
+
+.footer-col-wrapper {
+ @include relative-font-size(0.9375);
+ color: $grey-color;
+ margin-left: -$spacing-unit / 2;
+ @extend %clearfix;
+}
+
+.footer-col {
+ float: left;
+ margin-bottom: $spacing-unit / 2;
+ padding-left: $spacing-unit / 2;
+}
+
+.footer-col-1 {
+ width: -webkit-calc(35% - (#{$spacing-unit} / 2));
+ width: calc(35% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-2 {
+ width: -webkit-calc(20% - (#{$spacing-unit} / 2));
+ width: calc(20% - (#{$spacing-unit} / 2));
+}
+
+.footer-col-3 {
+ width: -webkit-calc(45% - (#{$spacing-unit} / 2));
+ width: calc(45% - (#{$spacing-unit} / 2));
+}
+
+@include media-query($on-laptop) {
+ .footer-col-1,
+ .footer-col-2 {
+ width: -webkit-calc(50% - (#{$spacing-unit} / 2));
+ width: calc(50% - (#{$spacing-unit} / 2));
+ }
+
+ .footer-col-3 {
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
+ width: calc(100% - (#{$spacing-unit} / 2));
+ }
+}
+
+@include media-query($on-palm) {
+ .footer-col {
+ float: none;
+ width: -webkit-calc(100% - (#{$spacing-unit} / 2));
+ width: calc(100% - (#{$spacing-unit} / 2));
+ }
+}
+
+.tilde-ring {
+ ul {
+ margin: 0;
+ }
+ li {
+ display: inline;
+ &::after {
+ content: " /";
+ color: $grey-color-dark;
+ }
+ }
+}
+
+
+/**
+ * Page content
+ */
+.page-content {
+ padding: $spacing-unit 0;
+ flex: 1;
+}
+
+.page-heading {
+ @include relative-font-size(2);
+}
+
+.post-list-heading {
+ margin-top: $spacing-unit * 2;
+ @include relative-font-size(1.75);
+}
+
+.post-list {
+ margin-left: 0;
+ list-style: none;
+
+ > li {
+ margin-bottom: $spacing-unit;
+ }
+}
+
+.post-meta {
+ font-size: $small-font-size;
+ color: $grey-color;
+}
+
+.post-link {
+ display: block;
+ @include relative-font-size(1.5);
+}
+
+
+
+/**
+ * Posts
+ */
+.post-header {
+ margin-bottom: $spacing-unit;
+}
+
+.post-title {
+ @include relative-font-size(2.625);
+ letter-spacing: -1px;
+ line-height: 1;
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(2.25);
+ }
+}
+
+.post-content {
+ margin-bottom: $spacing-unit;
+
+ h2 {
+ @include relative-font-size(2);
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(1.75);
+ }
+ }
+
+ h3 {
+ @include relative-font-size(1.625);
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(1.375);
+ }
+ }
+
+ h4 {
+ @include relative-font-size(1.25);
+
+ @include media-query($on-laptop) {
+ @include relative-font-size(1.125);
+ }
+ }
+}
diff --git a/_assets/styles/theme/_syntax-highlighting.scss b/_assets/styles/theme/_syntax-highlighting.scss
new file mode 100644
index 0000000..bccdb89
--- /dev/null
+++ b/_assets/styles/theme/_syntax-highlighting.scss
@@ -0,0 +1,71 @@
+/**
+ * Syntax highlighting styles
+ */
+.highlight {
+ background: #fff;
+ @extend %vertical-rhythm;
+
+ .highlighter-rouge & {
+ background: #eef;
+ }
+
+ .c { color: #998; font-style: italic } // Comment
+ .err { color: #a61717; background-color: #e3d2d2 } // Error
+ .k { font-weight: bold } // Keyword
+ .o { font-weight: bold } // Operator
+ .cm { color: #998; font-style: italic } // Comment.Multiline
+ .cp { color: #999; font-weight: bold } // Comment.Preproc
+ .c1 { color: #998; font-style: italic } // Comment.Single
+ .cs { color: #999; font-weight: bold; font-style: italic } // Comment.Special
+ .gd { color: #000; background-color: #fdd } // Generic.Deleted
+ .gd .x { color: #000; background-color: #faa } // Generic.Deleted.Specific
+ .ge { font-style: italic } // Generic.Emph
+ .gr { color: #a00 } // Generic.Error
+ .gh { color: #999 } // Generic.Heading
+ .gi { color: #000; background-color: #dfd } // Generic.Inserted
+ .gi .x { color: #000; background-color: #afa } // Generic.Inserted.Specific
+ .go { color: #888 } // Generic.Output
+ .gp { color: #555 } // Generic.Prompt
+ .gs { font-weight: bold } // Generic.Strong
+ .gu { color: #aaa } // Generic.Subheading
+ .gt { color: #a00 } // Generic.Traceback
+ .kc { font-weight: bold } // Keyword.Constant
+ .kd { font-weight: bold } // Keyword.Declaration
+ .kp { font-weight: bold } // Keyword.Pseudo
+ .kr { font-weight: bold } // Keyword.Reserved
+ .kt { color: #458; font-weight: bold } // Keyword.Type
+ .m { color: #099 } // Literal.Number
+ .s { color: #d14 } // Literal.String
+ .na { color: #008080 } // Name.Attribute
+ .nb { color: #0086B3 } // Name.Builtin
+ .nc { color: #458; font-weight: bold } // Name.Class
+ .no { color: #008080 } // Name.Constant
+ .ni { color: #800080 } // Name.Entity
+ .ne { color: #900; font-weight: bold } // Name.Exception
+ .nf { color: #900; font-weight: bold } // Name.Function
+ .nn { color: #555 } // Name.Namespace
+ .nt { color: #000080 } // Name.Tag
+ .nv { color: #008080 } // Name.Variable
+ .ow { font-weight: bold } // Operator.Word
+ .w { color: #bbb } // Text.Whitespace
+ .mf { color: #099 } // Literal.Number.Float
+ .mh { color: #099 } // Literal.Number.Hex
+ .mi { color: #099 } // Literal.Number.Integer
+ .mo { color: #099 } // Literal.Number.Oct
+ .sb { color: #d14 } // Literal.String.Backtick
+ .sc { color: #d14 } // Literal.String.Char
+ .sd { color: #d14 } // Literal.String.Doc
+ .s2 { color: #d14 } // Literal.String.Double
+ .se { color: #d14 } // Literal.String.Escape
+ .sh { color: #d14 } // Literal.String.Heredoc
+ .si { color: #d14 } // Literal.String.Interpol
+ .sx { color: #d14 } // Literal.String.Other
+ .sr { color: #009926 } // Literal.String.Regex
+ .s1 { color: #d14 } // Literal.String.Single
+ .ss { color: #990073 } // Literal.String.Symbol
+ .bp { color: #999 } // Name.Builtin.Pseudo
+ .vc { color: #008080 } // Name.Variable.Class
+ .vg { color: #008080 } // Name.Variable.Global
+ .vi { color: #008080 } // Name.Variable.Instance
+ .il { color: #099 } // Literal.Number.Integer.Long
+}
diff --git a/_assets/styles/theme/_typography.scss b/_assets/styles/theme/_typography.scss
new file mode 100644
index 0000000..d997ea2
--- /dev/null
+++ b/_assets/styles/theme/_typography.scss
@@ -0,0 +1,8 @@
+.post-content, .entry-content {
+ p,code {
+ font-size: $base-font-size * 2;
+ }
+ code {
+ color: $grey-color-dark;
+ }
+}
diff --git a/_config.yml b/_config.yml
new file mode 100644
index 0000000..ed7fe19
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1,118 @@
+# Welcome to Jekyll!
+#
+# This config file is meant for settings that affect your whole blog, values
+# which you are expected to set up once and rarely edit after that. If you find
+# yourself editing this file very often, consider using Jekyll's data files
+# feature for the data you need to update frequently.
+#
+# For technical reasons, this file is *NOT* reloaded automatically when you use
+# 'bundle exec jekyll serve'. If you change this file, please restart the server process.
+
+# Site settings
+# These are used to personalize your new site. If you look in the HTML files,
+# you will see them accessed via {{ site.title }}, {{ site.email }}, and so on.
+# You can create any custom variable you would like, and they will be accessible
+# in the templates via {{ site.myvariable }}.
+title: ~jahnertz
+email: ~jahnertz@tilde.town
+description: >- # this means to ignore newlines until "baseurl:"
+ Welcome to ~jahnertz
+baseurl: "/~jahnertz" # the subpath of your site, e.g. /blog
+url: "http://tilde.town" # the base hostname & protocol for your site, e.g. http://example.com
+twitter_username: jahnertz
+github_username: jahnertz
+mastodon: jahnertz@mastodon.social
+
+# Build settings
+markdown: kramdown
+# theme: minima
+plugins:
+ - jekyll-feed
+ - jekyll-assets
+
+# Exclude from processing.
+# The following items will not be processed, by default. Create a custom list
+# to override the default setting.
+# exclude:
+# - Gemfile
+# - Gemfile.lock
+# - node_modules
+# - vendor/bundle/
+# - vendor/cache/
+# - vendor/gems/
+# - vendor/ruby/
+
+assets:
+ source_maps: true # false on JEKYLL_ENV=production
+ destination: "/assets"
+ compression: false # true on JEKYLL_ENV=production
+ gzip: false
+ caching:
+ path: ".jekyll-cache/assets"
+ type: file # Possible values: memory, file
+ enabled: true
+ # --
+ # Assets you wish to always have compiled.
+ # This can also be combined with raw_precompile which
+ # copies assets without running through the pipeline
+ # making them ultra fast.
+ # --
+ precompile: []
+ raw_precompile: []
+ # --
+ # baseurl: whether or not to append site.baseurl
+ # destination: the folder you store them in on the CDN.
+ # url: the CDN url (fqdn, or w/ identifier).
+ # --
+ cdn:
+ baseurl: false
+ destination: false
+ url: null
+ # --
+ # These are all default. No need to add them
+ # Only use this if you have more.
+ # --
+ sources:
+ - assets/styles
+ - assets/css
+ - assets/fonts
+ - assets/images
+ - assets/videos
+ - assets/javascript
+ - assets/video
+ - assets/image
+ - assets/img
+ - assets/js
+ - assets/audio
+ - assets/models
+ - _assets/styles
+ - _assets/css
+ - _assets/fonts
+ - _assets/images
+ - _assets/videos
+ - _assets/javascript
+ - _assets/video
+ - _assets/image
+ - _assets/img
+ - _assets/js
+ - _assets/audio
+ - _assets/models
+ - styles
+ - css
+ - fonts
+ - images
+ - videos
+ - javascript
+ - video
+ - image
+ - img
+ - js
+ - models
+ plugins:
+ css: { autoprefixer: {}}
+ img: { optim: {}}
+ autoprefixer:
+ browsers:
+ - "last 2 versions"
+ - "IE > 9"
+
diff --git a/_includes/disqus_comments.html b/_includes/disqus_comments.html
new file mode 100644
index 0000000..d9400f2
--- /dev/null
+++ b/_includes/disqus_comments.html
@@ -0,0 +1,20 @@
+{%- if page.comments != false and jekyll.environment == "production" -%}
+
+
+
+
+{%- endif -%}
diff --git a/_includes/footer.html b/_includes/footer.html
new file mode 100644
index 0000000..d423a1c
--- /dev/null
+++ b/_includes/footer.html
@@ -0,0 +1,25 @@
+
diff --git a/_includes/google-analytics.html b/_includes/google-analytics.html
new file mode 100644
index 0000000..e9afb20
--- /dev/null
+++ b/_includes/google-analytics.html
@@ -0,0 +1,12 @@
+
+
diff --git a/_includes/head.html b/_includes/head.html
new file mode 100644
index 0000000..4ba06e7
--- /dev/null
+++ b/_includes/head.html
@@ -0,0 +1,11 @@
+
+
+
+
+ {{ site.title }}{% if page.title %} - {{ page.title }}{% endif %}
+ {%- asset styles.css -%}
+ {%- feed_meta -%}
+ {%- if jekyll.environment == 'production' and site.google_analytics -%}
+ {%- include google-analytics.html -%}
+ {%- endif -%}
+
diff --git a/_includes/header.html b/_includes/header.html
new file mode 100644
index 0000000..658531d
--- /dev/null
+++ b/_includes/header.html
@@ -0,0 +1,30 @@
+
diff --git a/_includes/icon-github.html b/_includes/icon-github.html
new file mode 100644
index 0000000..e501a16
--- /dev/null
+++ b/_includes/icon-github.html
@@ -0,0 +1 @@
+{% include icon-github.svg %}{{ include.username }}
diff --git a/_includes/icon-github.svg b/_includes/icon-github.svg
new file mode 100644
index 0000000..e6c5f6d
--- /dev/null
+++ b/_includes/icon-github.svg
@@ -0,0 +1 @@
+
diff --git a/_includes/icon-twitter.html b/_includes/icon-twitter.html
new file mode 100644
index 0000000..e623dbd
--- /dev/null
+++ b/_includes/icon-twitter.html
@@ -0,0 +1 @@
+{{ include.username }}
diff --git a/_includes/icon-twitter.svg b/_includes/icon-twitter.svg
new file mode 100644
index 0000000..efc0ecf
--- /dev/null
+++ b/_includes/icon-twitter.svg
@@ -0,0 +1 @@
+
diff --git a/_includes/model-viewer.html b/_includes/model-viewer.html
new file mode 100644
index 0000000..d60fe76
--- /dev/null
+++ b/_includes/model-viewer.html
@@ -0,0 +1,9 @@
+
+
+
+
+
diff --git a/_includes/post_detail.html b/_includes/post_detail.html
new file mode 100644
index 0000000..42e38b2
--- /dev/null
+++ b/_includes/post_detail.html
@@ -0,0 +1 @@
+{{ content }}
a member of the tilde.town ~ring
+
diff --git a/_includes/social.html b/_includes/social.html
new file mode 100644
index 0000000..44046b8
--- /dev/null
+++ b/_includes/social.html
@@ -0,0 +1,14 @@
+
diff --git a/_includes/test.html b/_includes/test.html
new file mode 100644
index 0000000..85a5c02
--- /dev/null
+++ b/_includes/test.html
@@ -0,0 +1,3 @@
+
+
This is a test
+
diff --git a/_layouts/default.html b/_layouts/default.html
new file mode 100644
index 0000000..055c544
--- /dev/null
+++ b/_layouts/default.html
@@ -0,0 +1,22 @@
+
+
+
+ {%- include head.html -%}
+
+
+
+ {%- include header.html -%}
+
+
+
+ {{ content }}
+
+
+
+ {%- include footer.html -%}
+ {%- if jekyll.environment != "production" -%}
+
+ {%- endif -%}
+
+
+
diff --git a/_layouts/home.html b/_layouts/home.html
new file mode 100644
index 0000000..5b1626f
--- /dev/null
+++ b/_layouts/home.html
@@ -0,0 +1,43 @@
+---
+layout: default
+---
+
+
+ {%- if page.title -%}
+
{{ page.title }}
+ {%- endif -%}
+
+ {{ content }}
+
+ {% assign post = site.posts.first %}
+
+ {% assign content = post.content %}
+ {% include post_detail.html %}
+
+ {%- if site.posts.size > 0 -%}
+
+
{{ page.list_title | default: "Posts" }}
+
+ {%- for post in site.posts -%}
+ -
+ {%- assign date_format = site.minima.date_format | default: "%b %-d, %Y" -%}
+ {{ post.date | date: date_format }}
+
+ {%- if site.show_excerpts -%}
+ {{ post.excerpt }}
+ {%- endif -%}
+
+ {%- endfor -%}
+
+
+
+
+ {%- endif -%}
+
+
+ {{ content }}
+
+
+
diff --git a/_layouts/post-plain.html b/_layouts/post-plain.html
new file mode 100644
index 0000000..a1f8856
--- /dev/null
+++ b/_layouts/post-plain.html
@@ -0,0 +1,19 @@
+---
+layout: default
+---
+
+
+
+
+
+ {{ content }}
+
+
+ {%- if site.disqus.shortname -%}
+ {%- include disqus_comments.html -%}
+ {%- endif -%}
+
+
+
diff --git a/_layouts/post.html b/_layouts/post.html
new file mode 100644
index 0000000..abf9696
--- /dev/null
+++ b/_layouts/post.html
@@ -0,0 +1,27 @@
+---
+layout: default
+---
+
+
+
+
+
+ {{ content }}
+
+
+ {%- if site.disqus.shortname -%}
+ {%- include disqus_comments.html -%}
+ {%- endif -%}
+
+
+
diff --git a/_posts/2020-10-22-aquamacs.markdown b/_posts/2020-10-22-aquamacs.markdown
new file mode 100644
index 0000000..4ac414e
--- /dev/null
+++ b/_posts/2020-10-22-aquamacs.markdown
@@ -0,0 +1,37 @@
+---
+layout: post-plain
+title: "Aquamacs - An Emacs for MacOS"
+date: 2020-10-22 10:00 +0800
+categories: design
+---
+{% asset "Aquamacs_PostHeader_201117_v01-02.png"
+ @optim
+ srcset:width=900
+ srcset:width=500
+ srcset:width=300
+ %}
+
+> **EDIT:** Syke! I now use [emacs-mac](https://bitbucket.org/mituharu/emacs-mac) because it plays better with the tiling window manager, [Yabai](https://github.com/koekeishiya/yabai).
+
+Emacs is great. After using the MacOS carbon version of Emacs for about a year, I've come to depend on Org-mode as a second brain. It's become the place where I store notes, plan work and track my progress toward personal goals. Why would you want to use a text editor as an organizer? I'm by no means a coder. I do however, tinker and take things apart (without intending to put them back together). Emacs feels like its built for this purpose, not like it's pushing me toward publishing code.
+
+I came to Emacs via Vim and though the keys aren't nearly as natural, I was surprised to find that emacs editing keys are usable in most regular text editing in MacOS. After figuring out the standard bindings, the speed of all my text editing increased, not just when working in Emacs.
+
+[Aquamacs](http://aquamacs.org/) is coming from the other direction - building in better integration with MacOS's keybindings and playing nicely with MacOS's Finder. There is, however one major issue - it is an ugly child. Aquamacs isn't so pretty out of the box. The garish toolbar and tabs can be easily hidden with `(tool-bar-mode 0)` and `(tabbar-mode 0)` in the config file, and I hastily installed the [sanityinc-tomorrow themes](https://github.com/purcell/color-theme-sanityinc-tomorrow) to sooth my burning eyes, but It's goofy gnu icon still stared into me with it's sad black eyes whenever I hit ⌘-Tab.
+
+{% asset "Aquamacs_Dock_02_201022.png" %}
+
+I had a few free minutes the next morning to mock up an alternative icon which sits a bit nicer next to its friends:
+
+{% asset "Aquamacs_Dock_01_201022.png" %}
+
+I originally planned to recreate the 'Gnu in water' icon in a cleaner style but it was easier to follow Andrew Zhilin's stylized Gnu horns. The icons are available as .png images below. How to change an application icon on mac is [explained here](https://www.howtogeek.com/677739/how-to-change-app-file-and-folder-icons-on-mac/).
+
+
+
+If you're a townie or other tilde user who wants some small graphics for a project, or you want to collaborate, send me a message on irc or tilde.town email!
diff --git a/_posts/2020-12-18-shader.markdown b/_posts/2020-12-18-shader.markdown
new file mode 100644
index 0000000..a86b4d7
--- /dev/null
+++ b/_posts/2020-12-18-shader.markdown
@@ -0,0 +1,17 @@
+---
+layout: post-plain
+title: "WebGL and Shader Experiments - Part 1"
+date: 2020-12-28
+categories: design coding
+---
+I spent a bit of time trying out WebGL today. I'd like to be able to use shaders for website elements like backgrounds because it seems like the most efficient way to get cool graphics on a screen. Shaders are some of the most elegant examples of code, able to describe complex, evolving visuals in just a few lines.
+
+Realistically I won't be making anything really beautiful in the near future, but I'd like to understand how shaders in WebGL work. At least I will be able to pay someone more experienced to produce what I want.
+
+The program below should show a spinning pink square and is based on Mozilla's WebGL tutorial. The shape is created using an array of points, defined before the shader programs are called.
+
+
+
+
+{% asset shaderCanvas3.js %}
diff --git a/_posts/2021-06-02-more-shaders.markdown b/_posts/2021-06-02-more-shaders.markdown
new file mode 100644
index 0000000..640d1e5
--- /dev/null
+++ b/_posts/2021-06-02-more-shaders.markdown
@@ -0,0 +1,12 @@
+---
+layout: post-plain
+title: "More Shaders"
+date: 2021-06-02
+categories: design coding
+---
+
+
+
+
+{% asset gl-matrix-min-2.8.1.js %}
+{% asset shaderCanvas4.js %}
diff --git a/_posts/sketches/2019-06-08-coconut-milk.markdown b/_posts/sketches/2019-06-08-coconut-milk.markdown
new file mode 100644
index 0000000..0047ae5
--- /dev/null
+++ b/_posts/sketches/2019-06-08-coconut-milk.markdown
@@ -0,0 +1,8 @@
+---
+layout: post-plain
+title: "椰奶"
+date: 2019-06-08 18:00 +0800
+categories: toys
+---
+{%- include model-viewer.html -%}
+
\ No newline at end of file
diff --git a/_posts/sketches/2020-09-13-sequencer.markdown b/_posts/sketches/2020-09-13-sequencer.markdown
new file mode 100644
index 0000000..249ca6f
--- /dev/null
+++ b/_posts/sketches/2020-09-13-sequencer.markdown
@@ -0,0 +1,33 @@
+---
+layout: post-plain
+title: "Sequencer"
+date: 2020-02-09 09:16 +0800
+categories: toys
+---
+{% asset sequencer.css %}
+{% asset sequencer.coffee %}
+
+
+
+
+
+
+
+
+
+
+ {% for y in (1..4) %}
+ {% for x in (1..8) %}
+
+ {% endfor %}
+ {% endfor %}
+
+
+
{% asset "Neon_Cube_01_200209_v02-02.png" %}
diff --git a/about.md b/about.md
new file mode 100644
index 0000000..e574318
--- /dev/null
+++ b/about.md
@@ -0,0 +1,9 @@
+---
+layout: page
+title: About
+permalink: /about/
+---
+
+{% asset jordanhan_portrait_180808_v2_white.svg %}
+
+Welcome to my net-art playground in ~town. Message me on [Mastodon](https://mastodon.social/@jahnertz) or on IRC in [tilde.town](irc://irc.tilde.town) (#design) and [tilde.chat](irc://irc.tilde.chat) (#meta).
diff --git a/assets/Aquamacs_AltLogo_201021_v01-01.png b/assets/Aquamacs_AltLogo_201021_v01-01.png
new file mode 100644
index 0000000..648661a
Binary files /dev/null and b/assets/Aquamacs_AltLogo_201021_v01-01.png differ
diff --git a/assets/circleShader.glsl b/assets/circleShader.glsl
new file mode 100644
index 0000000..9fc8634
--- /dev/null
+++ b/assets/circleShader.glsl
@@ -0,0 +1,46 @@
+#version 100
+#define PI 3.1415926538
+#define TAO 6.2831853076
+#define GRID_SCALE 10.0
+precision mediump float;
+uniform float uTime;
+uniform vec2 uResolution;
+uniform vec4 uFragColor;
+
+vec3 rgb(float r, float g, float b) {
+ // normalize rgb
+ return vec3(r/255.0, g/255.0, b/255.0);
+}
+
+vec4 circle (vec2 uv, vec2 pos, float rad, vec3 color) {
+ float d = length(pos - uv) - rad;
+ float t = clamp(d, 0.0, 1.0);
+ return vec4(color, 1.0 - t);
+}
+
+void main() {
+ vec2 uv = gl_FragCoord.xy;
+ vec2 sp = gl_FragCoord.xy / uResolution.xy;
+ vec2 center = uResolution.xy * 0.5;
+ float radius = 0.25 * uResolution.y;
+
+ // vec4 layer1 = vec4(rgb(x/uResolution.x, uv.y/uResolution.y, sin(uTime)), 1.0);
+ //vec4 layer1 = vec4(rgb(60.0, 20.0, 60.0), 1.0);
+ // vec4 layer1 = vec4(uv.x / uResolution.x, uv.y / uResolution.y, 0.0, 1.0);
+ //vec4 layer1 = vec4(vec3(floor(mod(sp.x * 10.0, 1.0) * 2.0)) + vec3(floor(mod(sp.y * 10.0, 1.0) * 2.0)) , 1.0);
+ vec2 grid = floor(GRID_SCALE * uv.xy * vec2(uResolution.x/uResolution.y, 1.0) / uResolution.x);
+ vec4 layer1 = vec4(vec3(mod(grid.x + grid.y, 2.0)), 1.0);
+
+ vec3 red = rgb(255.0, 95.0, 60.0);
+ vec3 blue = rgb(60.0, 95.0, 255.0);
+ vec3 green = rgb(60.0, 255.0, 95.0);
+ vec3 white = rgb(255.0, 255.0, 255.0);
+
+ vec4 layer2 = circle(vec2(uv.x + sin(uTime) * 100.0, uv.y - cos(uTime) * 100.0), center, radius, green);
+ vec4 layer3 = circle(vec2(uv.x + sin(uTime * 1.1 + (0.01 * TAO)) * 100.0, uv.y - cos(uTime * 1.1 + (0.01 * TAO)) * 100.0), center, radius, blue);
+ vec4 layer4 = circle(vec2(uv.x + sin(uTime * 1.2 + (0.02 * TAO)) * 100.0, uv.y - cos(uTime * 1.2 + (0.02 * TAO)) * 100.0), center, radius, red);
+
+ // gl_FragColor = vec4(uv.x, uv.y, sin(uTime * 1.0), 1.0);
+ //gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
+ gl_FragColor = mix(mix(mix(layer1, layer2, layer2.a), layer3, layer3.a), layer4, layer4.a);
+}
diff --git a/assets/minima-social-icons.svg b/assets/minima-social-icons.svg
new file mode 100644
index 0000000..fa7399f
--- /dev/null
+++ b/assets/minima-social-icons.svg
@@ -0,0 +1,33 @@
+
diff --git a/assets/myShader.frag b/assets/myShader.frag
new file mode 100644
index 0000000..c6fa9b5
--- /dev/null
+++ b/assets/myShader.frag
@@ -0,0 +1,3 @@
+void main(void) {
+ gl_FragColor = vec4(0.5, 0.3, 0.0, 1.0);
+ }
diff --git a/assets/testShader.glsl b/assets/testShader.glsl
new file mode 100644
index 0000000..300df84
--- /dev/null
+++ b/assets/testShader.glsl
@@ -0,0 +1,10 @@
+#version 100
+precision mediump float;
+uniform float uTime;
+uniform vec2 uResolution;
+uniform vec4 uFragColor;
+void main() {
+ vec2 uv = gl_FragCoord.xy / uResolution.xy;
+ gl_FragColor = vec4(uv.x, uv.y, sin(uTime * 1.0), 1.0);
+ //gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
+}
diff --git a/assets/vertShader.glsl b/assets/vertShader.glsl
new file mode 100644
index 0000000..db1455f
--- /dev/null
+++ b/assets/vertShader.glsl
@@ -0,0 +1,8 @@
+#version 100
+precision highp float;
+attribute vec4 aVertexPosition;
+uniform mat4 uModelViewMatrix;
+uniform mat4 uProjectionMatrix;
+void main(void) {
+ gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
+}
diff --git a/index.md b/index.md
new file mode 100644
index 0000000..f6f456b
--- /dev/null
+++ b/index.md
@@ -0,0 +1,7 @@
+---
+# Feel free to add content and custom Front Matter to this file.
+# To modify the layout, see https://jekyllrb.com/docs/themes/#overriding-theme-defaults
+
+layout: home
+list_title: Posts
+---