Fabio Cortés fcor

Web Technologies Only

AR.js
clmtrackr
OpenCV.js
TensorFlow.js, you can build your own computer vision technology.
ML5.js — similar goal to TensorFlow.js, build your own ML to recognize patterns, including computer vision!
Tracking.js — a component based CV tracking system written in JS, you can write functions that define what features you're looking for

	void main () {
	// we put the pixel coordinates in a variable for easy access
	vec2 pos = uvN();

	// here we get the webcam texture from channel0 which we assigned in the texture
	// panel (the lil gradient icon)
	// we use the pixel coordinates to grab the right pixel
	vec4 web =texture2D(channel0,pos);

	// here we just add the pixels postition as a color, just for fun

	// http://www.iquilezles.org/www/articles/palettes/palettes.htm
	// As t runs from 0 to 1 (our normalized palette index or domain),
	//the cosine oscilates c times with a phase of d.
	//The result is scaled and biased by a and b to meet the desired constrast and brightness.
	vec3 cosPalette( float t, vec3 a, vec3 b, vec3 c, vec3 d )
	{
	return a + bcos( 6.28318(c*t+d) );
	}

	void main () {

	// http://www.iquilezles.org/www/articles/palettes/palettes.htm
	// to see this function graphed out go to: https://www.desmos.com/calculator/rz7abjujdj
	vec3 cosPalette( float t , vec3 brightness, vec3 contrast, vec3 osc, vec3 phase)
	{

	return brightness + contrastcos( 6.28318(osc*t+phase) );
	}

	void main() {

	void main() {

	vec2 pos = ((gl_FragCoord.xy/resolution) - 0.5)*2.0; // origin is in center
	// who remembers SOH CAH TOA ?
	// tan, given an angle will return the ratio
	// so if we only have the ratio of position
	// we use atan to get the angle
	float angle = atan(pos.y,pos.x);

	float r = sin(angle + time);

	float getBPMVis(float bpm){

	// this function can be found graphed out here :https://www.desmos.com/calculator/rx86e6ymw7
	float bps = 60./bpm; // beats per second
	float bpmVis = tan((time*PI)/bps);
	// multiply it by PI so that tan has a regular spike every 1 instead of PI
	// divide by the beat per second so there are that many spikes per second
	bpmVis = clamp(bpmVis,0.,10.);
	// tan goes to infinity so lets clamp it at 10
	bpmVis = abs(bpmVis)/20.;

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8'>
	<meta http-equiv='X-UA-Compatible' content='IE=edge'>
	<title>GeoAR.js demo</title>
	<script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1c2407b26c61958baa93967b5412487cd94b290b/dist/aframe-master.min.js"></script>
	<script src="https://unpkg.com/aframe-look-at-component@0.8.0/dist/aframe-look-at-component.min.js"></script>
	<script src='https://raw.githack.com/jeromeetienne/AR.js/2.1.4/aframe/build/aframe-ar.js'></script>
	<script>

	/* eslint no-var:0 */
	/* global AFRAME */
	'use strict';

	// Now out of date, use:

	AFRAME.scenes[0].components.screenshot.capture()

	// OLD METHOD BELOW: