Skip to content

Instantly share code, notes, and snippets.

@r03ert0

r03ert0/transformation.html

Last active January 25, 2018 19:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save r03ert0/e161c4d73dd313338c35ef9917cc6a29 to your computer and use it in GitHub Desktop.
Save r03ert0/e161c4d73dd313338c35ef9917cc6a29 to your computer and use it in GitHub Desktop.
Download ZIP
Linear transformation of a fish, to celebrate the 100th anniversary of D'Arcy Thompson's On Growth And Form, http://bit.ly/2GhFftW
Raw
transformation.html
<html>
<body>
<style>
td {
width: 100px;
border:thin solid lightGrey;
}
</style>
<svg width="100%" height="400px" xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1,0,0,1,0,0)">
<image xlink:href="https://i0.wp.com/thefishh.com/wp-content/uploads/2015/06/Fish-Pest-Rosy-Barb-600.jpg" x="0" y="0" width="600px" height="343px"/>
</g>
</svg>
<table>
<tr>
<td contenteditable>1</td>
<td contenteditable>0</td>
<td contenteditable>0</td>
</tr>
<tr>
<td contenteditable>0</td>
<td contenteditable>1</td>
<td contenteditable>0</td>
</tr>
<tr>
<td contenteditable>0</td>
<td contenteditable>0</td>
<td contenteditable>1</td>
</tr>
</table>
<button onclick="apply()">Apply</button>
<button onclick="reset()">Reset</button>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script>
function apply() {
let tmp = [];
let m = [];
$('td').map((i,o)=>{tmp[i] = parseFloat($(o).text())});
m = tmp.slice(0,6)
$('g').attr('transform',`matrix(${m[0]},${m[3]},${m[1]},${m[4]},${m[2]},${m[5]})`);
}
function reset() {
const matrix = [1,0,0,0,1,0,0,0,1];
$('td').map((i,o)=>$(o).html(matrix[i]));
apply();
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment