Skip to content

Instantly share code, notes, and snippets.

View JBlackCat's full-sized avatar

JBlackCat

  • SF Bay Area, CA
View GitHub Profile
@JBlackCat
JBlackCat / CssEasingFunctions.js
Last active July 31, 2017 23:03
Object containing common css easing functions for setting animation-timing-function's via JS.
'use strict';
// Reference: http://easings.net
module.exports = {
'linear': 'linear',
'ease': 'ease',
'ease-in': 'ease-in',
'ease-out': 'ease-out',
'ease-in-out': 'ease-in-out',
@JBlackCat
JBlackCat / brick-mortar-ex.glsl
Created July 6, 2017 17:45
Brick and mortar example from Texture and Modeling: A Procedural Approach third edition, pg 39 - 41
uniform float U_BRICK_WIDTH;
uniform float U_BRICK_HEIGHT;
uniform float U_MORTAR_THICKNESS;
uniform float Ka;//0:1:1.00
uniform float Kd;//0:1:1.00
uniform vec4 BRICK_COLOR;//#ff0000
uniform vec4 MORTAR_COLOR;//#e8d0ad
#define BRICK_MORTAR_WIDTH (U_BRICK_WIDTH + U_MORTAR_THICKNESS);
@JBlackCat
JBlackCat / linear-vert-gradient.glsl
Last active August 26, 2023 17:36
Linear Vertical Gradient Fragment Shader
uniform vec4 u_gradient_color_1;//#fa67ba
uniform vec4 u_gradient_color_2;//#b17ff5
uniform float u_gradient_alpha_color_1;//0:1:0.53
uniform float u_gradient_alpha_color_2;//0:1:1.00
uniform float u_gradient_location_color_1;//0:1:0.00
uniform float u_gradient_location_color_2;//0:1:0.96
vec4 LinearVertGradient(float yCoord, vec4 color_1, float alpha_color_1, float location_color_1, vec4 color_2, float alpha_color_2, float location_color_2) {
@JBlackCat
JBlackCat / GLSL-Noise.md
Created April 2, 2017 03:39 — forked from patriciogonzalezvivo/GLSL-Noise.md
GLSL Noise Algorithms

Generic 1,2,3 Noise

float rand(float n){return fract(sin(n) * 43758.5453123);}

float noise(float p){
	float fl = floor(p);
  float fc = fract(p);
	return mix(rand(fl), rand(fl + 1.0), fc);
}
@JBlackCat
JBlackCat / ring-frag-shader.glsl
Created March 31, 2017 06:51
Ring Fragment Shader
/* varying vec2 vUV; */
uniform vec2 u_resolution;
#define PI 3.14159265359
//Anti-aliased coordinate system grid
float coordinateGrid(vec2 coords) {
//These colors are unused and irrelevant in current implementation.
vec3 axesColor = vec3(0.0, 0.0, 1.0);
float axesThickness = 0.015;
//uniform vec2 resolution;
#define PI 3.14159265359
//Anti-aliased coordinate system grid
float coordinateGrid(vec2 coords) {
//These colors are unused and irrelevant in current implementation.
vec3 axesColor = vec3(0.0, 0.0, 1.0);
float axesThickness = 0.015;
float circleLocation(vec2 r, vec2 center, float radius) {
float aaTolerance = 0.005;
float distanceFromCenter = length(r-center);
float antiAliasOutsideCircle = smoothstep(radius - aaTolerance, radius + aaTolerance, distanceFromCenter);
float insideCircle = 1.0 - antiAliasOutsideCircle;
return insideCircle;
}
void main() {
@JBlackCat
JBlackCat / bouncing-color-grad-bars.glsl
Created March 28, 2017 21:41
Bouncing color gradient columns
//Base on Tutorial #17, https://www.shadertoy.com/view/Md23DV
#define PI 3.14159265359
void main() {
//coordinate systems
vec2 r = vec2((gl_FragCoord.xy - 0.5*resolution.xy)/resolution.y) * 2.0; // Is [-1, 1] coordinate system
vec2 p = vec2(gl_FragCoord.xy/resolution.xy); //[0,1] coordinate system
//Set background color
vec3 bgCol = vec3(0.0); // black
@JBlackCat
JBlackCat / coordinate-system-axes.glsl
Last active March 29, 2017 00:37
Axes for glsl coordinate systems, based on tutorials https://www.shadertoy.com/view/Md23DV
//uniform vec2 resolution
void main() {
//coordinate systems
vec2 r = vec2((gl_FragCoord.xy - 0.5*resolution.xy)/resolution.y) * 2.0; // Is [-1, 1] coordinate system
vec2 p = vec2(gl_FragCoord.xy/resolution.xy); //[0,1] coordinate system
//Set background color
vec3 bgCol = vec3(0.0); // black
vec3 pixel = bgCol;
uniform float u_alpha;
void main() {
vec2 r = vec2((gl_FragCoord.xy - 0.5*resolution.xy)/resolution.y) * 2.0;
float xMax = resolution.x/resolution.y;
vec3 bgCol = vec3(0.0); // black
vec3 col1 = vec3(0.216, 0.471, 0.698); // blue
vec3 col2 = vec3(1.00, 0.329, 0.298); // yellow