DanBrink91/glitch.js

## glitch.js
var reader = new FileReader();
var canvas, ctx;
var base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
var changes = document.getElementById("changes").value;
var initChange = document.getElementById("initChange").value;
document.getElementById("changes").addEventListener('change', function(e)
{
    changes = this.value;
    createCanvas(glitch(reader.result));
}, false);

document.getElementById("initChange").addEventListener('change', function(e)
{
    initChange = this.value;
    createCanvas(glitch(reader.result));
}, false);

//  Grab file
document.getElementById("fileUpload").addEventListener('change', function(e) {
        reader.onload = function(e)
        {
            createCanvas(glitch(reader.result));
        }
    reader.readAsDataURL(e.target.files[0]);
}, false);

//  Mess with the base64 string...
function glitch(base64)
{
    if(!base64) return null;
    var data = base64.split(',');
    // String -> array
    data[1] = data[1].split('');
    var len = data[1].length - 2;
    // TODO: do something cool here...
    var tmp;
    var changeCount = ~~((len-(len*initChange)) * changes);
    var change_start = ~~(len*initChange);
    for(var i = change_start; i < len; i+= changeCount)
    {
        data[1][i] = base64Chars[~~(Math.random()*base64Chars.length)];
    }
    // Back to string and combine
    return [data[0], data[1].join('')].join(",");
}
//  Show'em
function createCanvas(data)
{
    if(!data) return;
    if(!canvas)
    {
        canvas = document.createElement("canvas");
        document.body.appendChild(canvas);
        ctx = canvas.getContext('2d');
    }
    var img = new Image();
    img.src = data;
    img.onload = function()
    {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
    }
}

## index.html
<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="author" content="Dan Brinkman">
    <meta name="keywords" content="HTML,Canvas,JavaScript">

    <script src="glitch.js" defer></script>
    <title>Glitch!</title>
    <section>
        <input type="file" id="fileUpload" />
        <br />
        <label>Changes (By 5%):
            <input type="range" id="changes" min="0.05" max="1" step="0.05" value="0.55" />
        </label>
        <br />
        <label>Where to start changing (By 10%):
            <input type="range" id="initChange" min="0.1" max="0.8" step="0.1" value="0.2" />
        </label>
    </section>
	var reader = new FileReader();
	var canvas, ctx;
	var base64Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
	var changes = document.getElementById("changes").value;
	var initChange = document.getElementById("initChange").value;
	document.getElementById("changes").addEventListener('change', function(e)
	{
	changes = this.value;
	createCanvas(glitch(reader.result));
	}, false);

	document.getElementById("initChange").addEventListener('change', function(e)
	{
	initChange = this.value;
	createCanvas(glitch(reader.result));
	}, false);

	// Grab file
	document.getElementById("fileUpload").addEventListener('change', function(e) {
	reader.onload = function(e)
	{
	createCanvas(glitch(reader.result));
	}
	reader.readAsDataURL(e.target.files[0]);
	}, false);

	// Mess with the base64 string...
	function glitch(base64)
	{
	if(!base64) return null;
	var data = base64.split(',');
	// String -> array
	data[1] = data[1].split('');
	var len = data[1].length - 2;
	// TODO: do something cool here...
	var tmp;
	var changeCount = ~~((len-(leninitChange)) changes);
	var change_start = ~~(len*initChange);
	for(var i = change_start; i < len; i+= changeCount)
	{
	data[1][i] = base64Chars[~~(Math.random()*base64Chars.length)];
	}
	// Back to string and combine
	return [data[0], data[1].join('')].join(",");
	}
	// Show'em
	function createCanvas(data)
	{
	if(!data) return;
	if(!canvas)
	{
	canvas = document.createElement("canvas");
	document.body.appendChild(canvas);
	ctx = canvas.getContext('2d');
	}
	var img = new Image();
	img.src = data;
	img.onload = function()
	{
	canvas.width = img.width;
	canvas.height = img.height;
	ctx.drawImage(img, 0, 0);
	}
	}
	<!DOCTYPE html>
	<meta charset="utf-8">
	<meta name="author" content="Dan Brinkman">
	<meta name="keywords" content="HTML,Canvas,JavaScript">

	<script src="glitch.js" defer></script>
	<title>Glitch!</title>
	<section>
	<input type="file" id="fileUpload" />
	<br />
	<label>Changes (By 5%):
	<input type="range" id="changes" min="0.05" max="1" step="0.05" value="0.55" />
	</label>
	<br />
	<label>Where to start changing (By 10%):
	<input type="range" id="initChange" min="0.1" max="0.8" step="0.1" value="0.2" />
	</label>
	</section>