benursu · April 24, 2020 02:11
diff --git a/Contact Lens - Spectrogram Export Tool - index.html b/Contact Lens - Spectrogram Export Tool - index.html
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<title>Export Animation Data for Spark AR</title>
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
 			body {
 				background-color: #bfe3dd;
 				color: #000;
 			}

 			a {
 				color: #2983ff;
 			}
 		</style>
 		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 	</head>

 	<body>

 		<div id="container"></div>

 		<div id="info">
 			Export Animation Data for Spark AR<br>
 			Check Console<br>
 			<canvas id="spectrogramCanvas" width="1800" height="280"></canvas>
 		</div>
 		<div id="spectrogram">
 			

 		</div>

 		<script type="module">

 		$(function() {

 			///////////////////////////////////////
 			///////////////////////////////////////
 			///////////////////////////////////////
 			//init change as needed

 			//
 			var file = 'spectrograms/intro-350-20.png';
 			var spectrogramWidth = 350;
 			var spectrogramHeight = 20;
 			//16000ms			

 			///////////////////////////////////////
 			///////////////////////////////////////
 			///////////////////////////////////////

 			var output = '';

 			var img = new Image();
 			img.src = file;
 			var canvas = document.getElementById('spectrogramCanvas');
 			var ctx = canvas.getContext('2d');
 			img.onload = function() {
 				ctx.drawImage(img, 0, 0);

 				output += 'var animationFrequency = {};\n';

 				for(var k = spectrogramHeight-1; k >= 0; k--){
 					output += 'animationFrequency[\'freq' + k + '\'] = Animation.samplers.polyline({ keyframes: [0';
 					for(var i = 0; i < spectrogramWidth; i++){	
 						output += ',';
 						var pixel = ctx.getImageData(i, k, 1, 1);
 						var data = pixel.data;
 						var amplitude = data[0] + data[1] + data[2];
 						output += (amplitude / 765).toFixed(3);
 						// output+= data[0] + '/' + data[1] + '/' + data[2] + ',';

 					}
 					output += ',0], knots: [0';
 					for(var i = 0; i < spectrogramWidth; i++){	
 						output += ',';
 						output += (i+1);
 					}
 					output += ',' + (spectrogramWidth + 1) + '] });\n';
 				}	

 				output += 'var animationVolume = Animation.samplers.polyline({ keyframes: [0';
 				for(var i = 0; i < spectrogramWidth; i++){	
 					output += ',';
 					var pixel = ctx.getImageData(i, 0, 1, spectrogramWidth);
 					var data = pixel.data;
 					var total = 0;
 					for(var k = 0; k < data.length; k++){
 						var val = data[k];
 						if(val != 255){
 							total += data[k];
 						}						
 					}
 					var volume = total / data.length;
 					output += (volume).toFixed(4);
 				}
 				output += ',0], knots: [0';
 				for(var i = 0; i < spectrogramWidth; i++){	
 					output += ',';
 					output += (i+1);
 				}
 				output += ',' + (spectrogramWidth + 1) + '] });\n';


 				//write to file
 				$.ajax({
 					url: '/receiveAnimationData',
 					data: output,
 					cache: false,
 					contentType: false,
 					processData: false,
 					method: 'POST',
 					type: 'POST',
 					success: function(data){
 						console.log('Successly written to receiveAnimationData.js');
 						console.log('file: ' + file);
 					}
 				});	

 			};


 		});

 		</script>

 	</body>

 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Export Animation Data for Spark AR</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<link type="text/css" rel="stylesheet" href="main.css">
	<style>
	body {
	background-color: #bfe3dd;
	color: #000;
	}

	a {
	color: #2983ff;
	}
	</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	</head>

	<body>

	<div id="container"></div>

	<div id="info">
	Export Animation Data for Spark AR<br>
	Check Console<br>
	<canvas id="spectrogramCanvas" width="1800" height="280"></canvas>
	</div>
	<div id="spectrogram">


	</div>

	<script type="module">

	$(function() {

	///////////////////////////////////////
	///////////////////////////////////////
	///////////////////////////////////////
	//init change as needed

	//
	var file = 'spectrograms/intro-350-20.png';
	var spectrogramWidth = 350;
	var spectrogramHeight = 20;
	//16000ms

	///////////////////////////////////////
	///////////////////////////////////////
	///////////////////////////////////////

	var output = '';

	var img = new Image();
	img.src = file;
	var canvas = document.getElementById('spectrogramCanvas');
	var ctx = canvas.getContext('2d');
	img.onload = function() {
	ctx.drawImage(img, 0, 0);

	output += 'var animationFrequency = {};\n';

	for(var k = spectrogramHeight-1; k >= 0; k--){
	output += 'animationFrequency[\'freq' + k + '\'] = Animation.samplers.polyline({ keyframes: [0';
	for(var i = 0; i < spectrogramWidth; i++){
	output += ',';
	var pixel = ctx.getImageData(i, k, 1, 1);
	var data = pixel.data;
	var amplitude = data[0] + data[1] + data[2];
	output += (amplitude / 765).toFixed(3);
	// output+= data[0] + '/' + data[1] + '/' + data[2] + ',';

	}
	output += ',0], knots: [0';
	for(var i = 0; i < spectrogramWidth; i++){
	output += ',';
	output += (i+1);
	}
	output += ',' + (spectrogramWidth + 1) + '] });\n';
	}

	output += 'var animationVolume = Animation.samplers.polyline({ keyframes: [0';
	for(var i = 0; i < spectrogramWidth; i++){
	output += ',';
	var pixel = ctx.getImageData(i, 0, 1, spectrogramWidth);
	var data = pixel.data;
	var total = 0;
	for(var k = 0; k < data.length; k++){
	var val = data[k];
	if(val != 255){
	total += data[k];
	}
	}
	var volume = total / data.length;
	output += (volume).toFixed(4);
	}
	output += ',0], knots: [0';
	for(var i = 0; i < spectrogramWidth; i++){
	output += ',';
	output += (i+1);
	}
	output += ',' + (spectrogramWidth + 1) + '] });\n';


	//write to file
	$.ajax({
	url: '/receiveAnimationData',
	data: output,
	cache: false,
	contentType: false,
	processData: false,
	method: 'POST',
	type: 'POST',
	success: function(data){
	console.log('Successly written to receiveAnimationData.js');
	console.log('file: ' + file);
	}
	});

	};


	});

	</script>

	</body>

	</html>