Skip to content

Instantly share code, notes, and snippets.

vec2 rotate(vec2 v, float a) {
float s = sin(a);
float c = cos(a);
mat2 m = mat2(c, s, -s, c);
return m * v;
}
uniform float zNear = 0.1;
uniform float zFar = 500.0;
// depthSample from depthTexture.r, for instance
float linearDepth(float depthSample)
{
depthSample = 2.0 * depthSample - 1.0;
float zLinear = 2.0 * zNear * zFar / (zFar + zNear - depthSample * (zFar - zNear));
return zLinear;
}
@yiwenl
yiwenl / hsv2rgb
Last active April 14, 2024 17:35
GLSL Color Coversions
vec3 hsv2rgb(vec3 c)
{
vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
}
@yiwenl
yiwenl / sort-chars.js
Last active December 8, 2023 14:16
Sorting characters with number of transparent pixels
// Create a canvas element
const canvas = document.createElement('canvas');
const context = canvas.getContext('2d');
canvas.width = 64;
canvas.height = 64;
// Function to calculate non-transparent pixels
function countNonTransparentPixels(character) {
// Clear the canvas
context.clearRect(0, 0, canvas.width, canvas.height);
@yiwenl
yiwenl / JsBlobSaveJson
Last active September 25, 2023 18:35
Javascript using Blob to save json file
var saveJson = function(obj) {
var str = JSON.stringify(obj);
var data = encode( str );
var blob = new Blob( [ data ], {
type: 'application/octet-stream'
});
var url = URL.createObjectURL( blob );
var link = document.createElement( 'a' );
@yiwenl
yiwenl / Bezier - 2D
Last active September 24, 2023 16:46
Bezier Curve with gl-matrix
import { vec2 } from "gl-matrix";
export const bezier = (mPoints, t) => {
if (mPoints.length === 2) {
const p = vec2.create();
vec2.lerp(p, mPoints[0], mPoints[1], t);
return p;
}
const a = [];
@yiwenl
yiwenl / doTrianglesIntersect.js
Last active September 5, 2023 20:21
Triangle intersection check
// Triangle format: [[x, y], [x, y], [x, y]]
function doTrianglesIntersect(triangle1, triangle2) {
function doEdgesIntersect(edge1, edge2) {
// Check if two line segments (edges) intersect
const [x1, y1] = edge1[0];
const [x2, y2] = edge1[1];
const [x3, y3] = edge2[0];
const [x4, y4] = edge2[1];
@yiwenl
yiwenl / GLSL_contrast
Last active September 3, 2023 08:53
Greyscale in glsl
float contrast(float mValue, float mScale, float mMidPoint) {
return clamp( (mValue - mMidPoint) * mScale + mMidPoint, 0.0, 1.0);
}
float contrast(float mValue, float mScale) {
return contrast(mValue, mScale, .5);
}
vec3 contrast(vec3 mValue, float mScale, float mMidPoint) {
return vec3( contrast(mValue.r, mScale, mMidPoint), contrast(mValue.g, mScale, mMidPoint), contrast(mValue.b, mScale, mMidPoint) );
@yiwenl
yiwenl / bezier.glsl
Last active May 31, 2023 18:47
Bezier curve in GLSL
// bezier curve with 2 control points
// A is the starting point, B, C are the control points, D is the destination
// t from 0 ~ 1
vec3 bezier(vec3 A, vec3 B, vec3 C, vec3 D, float t) {
vec3 E = mix(A, B, t);
vec3 F = mix(B, C, t);
vec3 G = mix(C, D, t);
vec3 H = mix(E, F, t);
vec3 I = mix(F, G, t);
// add any configs you like
export default {
value:0.5,
autoSave: false,
};