index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>SongMatrix</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.js"></script>
<style type="text/css">
body {
	margin: 0;
	padding: 0;
} /* remove top and left whitespace */
canvas {
	display: block;
} /* remove scrollbars */
canvas:focus {
	outline: 0;
} /* remove blue outline around canvas */
.fs {
	position: fixed;
	bottom: 20px;
	right: 20px;
}

#enter {
	display: block;
}

#exit {
	display: none;
}
</style>
</head>

<body>
<h2>Repetitiveness of a song</h2>
<div>
This webside can show you the repetitiveness of a song using a <a href="https://en.wikipedia.org/wiki/Self-similarity_matrix">Self-similarity matrix</a> or a <a href="https://en.wikipedia.org/wiki/Dot_plot_(bioinformatics)">Dot plot</a>.
The idea of this project came from Colin Morris "Tedx Talk" <a href="https://youtu.be/_tjFwcmHy5M">Pop Music is Stuck on Repeat</a>.

<h2>How to use</h2>
<ol>
<li> Paste the song text in the textfield.
<li> Choose if each dot should represent a word or a line.
<li> Set the size of the dots.
</ol>
Also you can export the matix to an image if you like to share it.
<p>
</div>
	<textarea cols="75" rows="8" id="songText_TextArea">Try it yourself</textarea>
	<table>
		<tr>
			<td>
				<button type="button" onclick="myFunction()">Show
					SongMatrix</button>
			</td>
			<td>
				<form action="">
					<input type="radio" id="wordsRadio" name="inputFormatDecider" value="Words" checked>
					Words<br> <input type="radio" name="inputFormatDecider"
						value="Lines"> Lines
				</form>
			</td>
			<td>
				Dot size (px)
				<input type="range" id="slider" min="1" max="25" value="1">
			</td>
			<td>
				<button type="button" onclick="saveToIMG()">Save SongMatrix</button>
			</td>
		</tr>
	</table>
	<p id="output"></p>
	<script src="SongMatrix.js"></script>
	
	<p>
	<a><img src="http://services.webestools.com/cpt_global/51062-9.png" alt="Counter" /></a>	
</body>
</html>