kylemcdonald

ayamflow

var cameraZ = camera.position.z;
var planeZ = 5;
var distance = cameraZ - planeZ;
var aspect = viewWidth / viewHeight;
var vFov = camera.fov * Math.PI / 180;
var planeHeightAtDistance = 2 * Math.tan(vFov / 2) * distance;
var planeWidthAtDistance = planeHeightAtDistance * aspect;

// or

dmnsgn

A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.

Engines and libraries ⚙️

Name	Stars	Last Commit	Description
three.js	![GitHub

magicznyleszek

1. copy your image (Ctrl+A and Ctrl+C)
2. make a new document-sized pure-black layer behind it
3. group the black layer and yor image together
4. add mask to the group
5. enter mask edit mode (alt+click on the mask icon/thumbnail)
6. paste your image in the mask (b/w) and then invert it.
7. save it as a 24-bit transparent PNG

patriciogonzalezvivo

Please consider using http://lygia.xyz instead of copy/pasting this functions. It expand suport for voronoi, voronoise, fbm, noise, worley, noise, derivatives and much more, through simple file dependencies. Take a look to https://github.com/patriciogonzalezvivo/lygia/tree/main/generative

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);

staltz

The introduction to Reactive Programming you've been missing

(by @andrestaltz)

---

This tutorial as a series of videos

If you prefer to watch video tutorials with live-coding, then check out this series I recorded with the same contents as in this article: Egghead.io - Introduction to Reactive Programming.

---

mikaelbr

// === Arrays

var [a, b] = [1, 2];
console.log(a, b);
//=> 1 2


// Use from functions, only select from pattern
var foo = () => [1, 2, 3];

dypsilon

Frontend Development

Attention: the list was moved to

https://github.com/dypsilon/frontend-dev-bookmarks

This page is not maintained anymore, please update your bookmarks.

---

brubrant

// http://compass-style.org/reference/compass/helpers/sprites/
@mixin get-sprite($map, $sprite, $repeat: no-repeat, $height: true, $width: true) {

  //http://compass-style.org/reference/compass/helpers/sprites/#sprite-file
  $sprite-image: sprite-file($map, $sprite);
  
  // http://compass-style.org/reference/compass/helpers/sprites/#sprite-url
  $sprite-map: sprite-url($map);
  
  // http://compass-style.org/reference/compass/helpers/sprites/#sprite-position

lrvick

// convert 0..255 R,G,B values to binary string
RGBToBin = function(r,g,b){
    var bin = r << 16 | g << 8 | b;
    return (function(h){
        return new Array(25-h.length).join("0")+h
    })(bin.toString(2))
}

// convert 0..255 R,G,B values to a hexidecimal color string
RGBToHex = function(r,g,b){