Arif Driessen arifd
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // In INITIALISATION: | |
| // create webcam stream | |
| let video = document.createElement('video'); | |
| video.width = 320; | |
| video.height = 240; | |
| video.autoplay = true; | |
| let constraints = {video: true}; | |
| navigator.mediaDevices.getUserMedia(constraints).then(stream => video.srcObject = stream); |
arifd
/ createScaledImageFromSource.js
Last active
January 30, 2020 10:32
Let the browser scale/resize an image for you
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // If you want to load an image but have it be scaled. | |
| // instead of 'new Image();' call this function, with onload being its 3rd argument. | |
| function createScaledImageFromSource(src, scaleFactor, callback = null) | |
| { | |
| let img = new Image(); | |
| img.src = src; | |
| let outImage = new Image(); | |
| img.onload = () => |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| export function listFactors(target) { | |
| let primes = listPrimes(target); | |
| let factors = []; | |
| for (let i = 0; i < primes.length; i++) { | |
| if ((target % primes[i]) === 0) factors.push(primes[i]); | |
| } | |
| return factors; | |
| } | |
| // list all prime numbers up to n |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // I wrote a sobel edge detector in Javascript! | |
| // todo: try Laplacian of Gaussian (LoG) instead of Sobel | |
| // Example usage (taking the pxiels 1D): | |
| // const edge = createEdgeMapFromImageData(imageData); | |
| // for (const i in edge) { | |
| // let x = i % canvas.width; | |
| // let y = (i - x) / canvas.width; | |
| // ctx.fillStyle = `rgba(${edge[i]},${edge[i]},${edge[i]},255)`; | |
| // ctx.fillRect(x, y, 1, 1 ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Clamp val between min and max | |
| const clamp = (val, min, max) => Math.min(Math.max(min, val), max); | |
| // Supply a value and a range, return val normalized to 0 and 1 | |
| const normalize = (val, min, max) => (val - min) / (max - min); | |
| // Shaping Functions /////////////////////////////////////// | |
| // Parabola val between 0 and 1. | |
| // Original function by Iñigo Quiles |
arifd
/ theatre-curtain-preloader.js
Created
March 31, 2020 17:25
Theatre/Theater/Stage Curtain/Drape Preloader for any website
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // THEATRE CURTAIN PRELOADER | |
| // by: Arif Driessen | |
| // about: this code produces a fast loading, auto revealing theatre-curtain preloader. | |
| // usage: put this code inside <script> tags INSIDE and at the top of <body> | |
| function createCurtainCSS(NUMFOLDS) { | |
| // draw a preloading Curtain! | |
| const parabola = val => Math.pow(4.0 * val * (1.0 - val), 1.0); | |
| let curtainCSS = 'background-image: '; | |
| // fade to top | |
| curtainCSS += 'linear-gradient(180deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 100%), '; |
arifd
/ getPercentVisible.js
Created
April 2, 2020 18:41
Manually determine how much of a HTML element intersects with the viewport
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // A function to know how much of a HTML element has been scrolled onto your viewport. | |
| // Note: This should no longer be used, prefer: IntersectionObserver. | |
| // https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver | |
| const clamp = (val, min, max) => Math.min(Math.max(min, val), max); | |
| getPercentVisible(element) { | |
| const rect = element.getBoundingClientRect(); | |
| // If not even partially visible, return early | |
| if (rect.top >= window.innerHeight || rect.bottom <= 0) return 0; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // adds a cinematic sheen by overlaying a glossy radial gradient to every pixel | |
| float gloss(vec2 uv) { | |
| uv = abs(uv - 0.5); | |
| float length2 = dot(uv,uv); | |
| return exp(-length2); | |
| } |
arifd
/ cheaper_smoothstep.glsl
Last active
September 25, 2020 17:51
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // cheaper smoothstep | |
| // https://forum.unity.com/threads/how-expensive-is-smooth-step-in-shaders-for-mobile.501809/ | |
| float cheapstep(float a, float b, float x) { | |
| // remap the value | |
| float remap = x * (1.0 / (b - a)) - (a / (b - a)); | |
| // clamp it to 0 and 1, as smoothstep would | |
| return clamp(0., 1., remap); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #!/bin/bash | |
| #===========================================================================================# | |
| # Miniquad WASM/Web Builder # | |
| # # | |
| # Put this script at the base of your cargo project and run it to quickly build and test # | |
| # your miniquad project in a WASM/Web environment. # | |
| # # | |
| # It creates and pulls in all the necessary files into a directory called 'www/' leaving # | |
| # the originals intact. Just delete the www folder to undo its effect. # |
OlderNewer