essentials

essentials.js

<style>
    html, body{
        width:100%;
        height:100%;
        overflow: hidden;
        top:0;
        left:0;
        margin:0;
        padding:0;
    }
</style>


var canvas = document.createElement( 'canvas' );
document.body.appendChild( canvas );
var w = canvas.width = window.innerWidth;
var h = canvas.height = window.innerHeight;
var ctx = canvas.getContext("2d");


function lerp ( t, a, b ){ return a * (1-t) + b * t; }
function norm( t, a, b ){return ( t - a ) / ( b - a );}
function map( t, a0, b0, a1, b1 ){ return lerp( norm( t, a0, b0 ), a1, b1 );}

var Point = function(x,y){
    this.x = x;
    this.y = y;
}
function distance( a,b ){
    var dx = a.x - b.x;
    var dy = a.y - b.y;
    return Math.sqrt( dx*dx+dy*dy );
}
function angle( a,b ){
    var dx = a.x - b.x;
    var dy = a.y - b.y;
    return Math.atan2( dy,dx );
}

//raf: https://github.com/cagosta/requestAnimationFrame/blob/master/app/requestAnimationFrame.js
(function(global) {(function() {if (global.requestAnimationFrame) {return;} if (global.webkitRequestAnimationFrame) {global.requestAnimationFrame = global[ 'webkitRequestAnimationFrame' ]; global.cancelAnimationFrame = global[ 'webkitCancelAnimationFrame' ] || global[ 'webkitCancelRequestAnimationFrame' ];} var lastTime = 0; global.requestAnimationFrame = function(callback) {var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = global.setTimeout(function() {callback(currTime + timeToCall);}, timeToCall); lastTime = currTime + timeToCall; return id;}; global.cancelAnimationFrame = function(id) {clearTimeout(id);};})(); if (typeof define === 'function') {define(function() {return global.requestAnimationFrame;});}})(window);


var url = "";
var req = new XMLHttpRequest();
req.onload = function(e){
    var str = e.target.responseText;
    var json = JSON.parse( str );
    console.log( json );
};
req.open( "GET", url );
req.send();



var imageData = ctx.getImageData( 0,0,w,h );
var data = imageData.data;
imageData.data = data;
ctx.putImageData( imageData,0,0 );

//get/set pixel

function getPixel( data, width, x, y )
{
    var id = ( x + width * y ) * 4;
    var r = data[id];
    var g = data[id+1];
    var b = data[id+2];
    var a = data[id+3];
    return {r:r, g:g, b:b, a:a }
}

function setPixel( data, width, x, y, r,g,b,a )
{
    var id = ( x + width * y ) * 4;
    data[id] = r;
    data[id+1] = g;
    data[id+2] = b;
    data[id+3] = a;
}

///////fullscreen
 = function ( e )
 {
    if (canvas.requestFullscreen) {
        canvas.requestFullscreen();
    } else if (canvas.mozRequestFullScreen) {
        canvas.mozRequestFullScreen();
    } else if (canvas.webkitRequestFullscreen) {
        canvas.webkitRequestFullscreen();
    }
 }

 /////////////
 ffmpeg -i .\air_shaper_rotation3.mp4 -filter:v "crop=1400:600:0:100" out3.mp4
 
//image magick mosaic
montage -mode concatenate -tile 1x in-*.jpg out.jpg
//https://superuser.com/questions/290656/combine-multiple-images-using-imagemagick

//hidden line to DXF
$f="darth"; magick convert -type Grayscale  -shave 1x1 -bordercolor black -border 1 result -
negate -morphology Dilate Plus -negate $f".png" $f".bmp"; potrace $f".bmp" -b dxf -k .99 -t 20 -a .05 -O 10

//animals
$f="moose"; magick convert -type Grayscale $f".png" $f".bmp"; potrace $f".bmp" -b dxf -k .99 -t 40 -a .05 -O 10

//twitter cutter

$f="mammoth";
magick convert -type Grayscale -negate -morphology Dilate Plus:1 -negate -bordercolor black -border 5 $f".png" $f".bmp";
potrace $f".bmp" -b dxf -k .99 -t 50 -a .05 -O 10;
rm $f".bmp";