Arif Driessen arifd

## webcam2webGL.js
// 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);

## createScaledImageFromSource.js
// 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 = () =>

## primes-and-factors.js
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

## edgeDetect.js
// 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 );

## mathstuff.js
// 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

## theatre-curtain-preloader.js
// 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%), ';

## getPercentVisible.js
// 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;

## gloss.glsl
// 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);
}

## cheaper_smoothstep.glsl
// 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);
}

## build.sh
#!/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.            #
	// 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);
	// 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 = () =>
	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
	// 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 );
	// 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
	// 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%), ';
	// 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;
	// 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);
	}
	// 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);
	}
	#!/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. #