Skip to content

Instantly share code, notes, and snippets.

View nelsonvassalo's full-sized avatar
🎯
Focusing

Nelson Vassalo nelsonvassalo

🎯
Focusing
View GitHub Profile
@jackismissing
jackismissing / MatcapDisplacement.js
Last active April 28, 2024 17:55
Threejs MeshMatcapMaterial normals displacement
const matcapTexture = new THREE.TextureLoader().load(matcap);
const material = new THREE.MeshMatcapMaterial({
color: 0xFFFFFF,
matcap: matcapTexture
});
const uniforms = {
uTime: { value: 0 }
};
#define PI 3.1415926538
uniform float time;
varying vec2 vUv;
float map(float value, float inMin, float inMax, float outMin, float outMax) {
return outMin + (outMax - outMin) * (value - inMin) / (inMax - inMin);
}
// https://iquilezles.org/www/articles/distgradfunctions2d/distgradfunctions2d.htm
@adinan-cenci
adinan-cenci / _fetch-form.md
Last active June 20, 2024 20:46
How to follow upload progress with fetch()

How can we follow the upload progress with fetch() ?

Simple: We can't.
Not right now anyway, fetch() does not support that, but good old XMLHttpRequest does though.

The function below behaves much like fetch(), it will return a Promise that will resolve into a Response object.

Just pass a progress function in the options parameter.

@cmod
cmod / hugofastsearch.md
Last active June 20, 2024 09:11 — forked from eddiewebb/readme.md
Fast, instant client side search for Hugo static site generator

Super fast, keyboard-optimized, client side Hugo search

This is a fork of and builds upon the work of Eddie Webb's search and Matthew Daly's search explorations.

It's built for the Hugo static site generator, but could be adopted to function with any json index compatible with Fuse fuzzy search library.

To see it in action, go to craigmod.com and press CMD-/ and start typing.

Fast Search

Always Already Programming

Everyone who interacts with computers has in important ways always already been programming them.

Every time you make a folder or rename a file on your computer, the actions you take through moving your mouse and clicking on buttons, translate into text-based commands or scripts which eventually translate into binary.

Why are the common conceptions of programmer and user so divorced from each other? The distinction between programmer and user is reinforced and maintained by a tech industry that benefits from a population rendered computationally passive. If we accept and adopt the role of less agency, we then make it harder for ourselves to come into more agency.

We've unpacked the "user" a little, now let's look at the "programmer." When a programmer is writing javascript, they are using prewritten, packaged functions and variables in order to carry out the actions they want their code to do. In this way, the programmer is also the user. Why is using pre-made scripts seen

@donmccurdy
donmccurdy / THREE_COLORSPACE_MANAGEMENT.md
Last active January 2, 2023 08:07
Color management in three.js
@mattdesl
mattdesl / canvas-sketch-example-gui.js
Created September 30, 2018 14:28
example of declarative GUI support in canvas-sketch library
const canvasSketch = require('canvas-sketch');
const settings = {
dimensions: [ 2048, 2048 ],
params: {
size: {
min: 50,
max: 400,
step: 1,
value: 200

About

Interpolating between things using lerp.

function lerp (start, end, t) {
  return start * (1 - t) + end * t;
}
@zadvorsky
zadvorsky / 01_load_basic.js
Last active August 12, 2020 03:23
Three.js Promise Loading
const material = new THREE.MeshStandardMaterial({
map: new THREE.TextureLoader().load('map.jpg'),
normalMap: new THREE.TextureLoader().load('normalMap.jpg')
});
const loader = new THREE.JSONLoader();
loader.load('geometry.json', geometry => {
const mesh = new THREE.Mesh(geometry, material);
@argyleink
argyleink / easings.css
Created February 26, 2018 22:34
Handy CSS properties for easing functions
:root {
--ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
--ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
--ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
--ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
--ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
--ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
--ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
--ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
--ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);