Skip to content

Instantly share code, notes, and snippets.

View redblobgames's full-sized avatar
🥰

Amit Patel redblobgames

🥰
1.1k followers · 10 following
View GitHub Profile
@redblobgames
redblobgames / README.md
Last active January 2, 2019 17:27 — forked from 1wheel/README.md
blend-alpha

(redblobgames updated this block to use premultiplied alpha - http://apoorvaj.io/alpha-compositing-opengl-blending-and-premultiplied-alpha.html)

I can't figure out why points with gl_FragColor = vec4(255, 255, 255, .1); get darker and then lighter when overlaid with increasing density. (note: it should be vec4(1.0, 1.0, 1.0, 0.1) not 0-255 --redblobgames)

I'm using these blending settings:

blend: {
  enable: true,
 func: {
@redblobgames
redblobgames / remove-alpha-on-canvas.js
Created September 19, 2018 20:41
Remove alpha channel on a canvas, so it's always transparent or always opaque
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const pixels = imageData.data;
for (let i = 3, n = canvas.width * canvas.height * 4; i < n; i += 4) {
pixels[i] = pixels[i] < 127? 0 : 255
}
ctx.putImageData(imageData, 0, 0);
@redblobgames
redblobgames / test-picojson-variant-tagged.cpp
Created May 17, 2018 22:06
traverse variant+picojson using tags for variants instead of integer indices
// Copyright 2018 Red Blob Games <[email protected]>
// https://github.com/redblobgames/cpp-traverse
// License: Apache v2.0 <http://www.apache.org/licenses/LICENSE-2.0.html>
#include "traverse.h"
#include "traverse-picojson.h"
#include "traverse-variant.h"
#include "traverse-picojson-variant-tagged.h"
#include "variant-util.h"
@redblobgames
redblobgames / unfurl.glsl
Created March 8, 2018 17:07
Unfurling vertex shader from https://www.redblobgames.com/x/1810-polar-cartesian-animation/
#define M_TAU (2.0*3.1415926535897932384626433832795)
precision mediump float;
uniform float u_t, u_N, u_width, u_radius;
attribute vec2 a_wh;
varying vec2 v_texcoord;
void main () {
float w = a_wh.x; /* which "wedge" we're on */
float h = a_wh.y; /* will be 0 at center of circle and 1 at rim */
@redblobgames
redblobgames / vue-canvas.js
Last active April 11, 2023 07:31
Vue component for canvas with automatic dependency tracking
/** Canvas component
A generic canvas component that calls a draw function to draw the
contents, and automatically calls it again when anything the draw
function depends on changes. Blog entry:
http://simblob.blogspot.com/2018/03/using-vue-with-canvas.html
Example:
<a-canvas width="500" height="200"
@redblobgames
redblobgames / .block
Created September 12, 2017 16:18
HTML Color Names (Relative Lightness, linear color space)
license: mit
@redblobgames
redblobgames / huh.js
Created April 22, 2017 16:33
Befuddled
// I wrote wrong1 vs right1 to demonstrate automatic semicolon insertion. So far so good.
function wrong1(x) {
return
{
upper: x + 1
};
}
function right1(x) {
@redblobgames
redblobgames / .block
Last active March 20, 2017 15:22
Mandelbrotch
license: mit
@redblobgames
redblobgames / drop-shadow.html
Created March 8, 2017 00:48
SVG drop shadow example
<!DOCTYPE html>
<html>
<svg width="80%" height="80%" viewBox="-100 -100 200 200">
<!-- Need this definition to make a drop shadow - based on examples from many articles, including svg spec -->
<defs>
<filter id="drop-shadow" x="-100%" y="-100%" width="300%" height="300%">
<feGaussianBlur in="SourceAlpha" stdDeviation="2"/>
<feOffset dx="5" dy="5" result="offsetblur"/>
<feFlood flood-color="#000000"/>
@redblobgames
redblobgames / svg-arrowhead.html
Created March 7, 2017 22:34
SVG arrowhead example
<!DOCTYPE html>
<html>
<svg width="80%" height="80%" viewBox="-100 -100 200 200">
<!-- Need this definition to make an arrowhead, from https://www.w3.org/TR/svg-markers/ -->
<defs>
<marker id="red-arrowhead" viewBox="0 0 10 10" refX="7" refY="5" markerUnits="strokeWidth" markerWidth="4" markerHeight="3" orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" stroke="none" fill="red"/>
</marker>
</defs>