-
Notifications
You must be signed in to change notification settings - Fork 0
/
metaphoric.html
18 lines (17 loc) · 2.37 KB
/
metaphoric.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<title>Javascript Vital Murmuration</title>
</head>
<body>
<script type="text/javascript" src="https://heymaslo.github.io/murmuration/js/morpher.js"></script>
<script>
var json ={"images":[{"points":[{"x":78,"y":16},{"x":48,"y":60},{"x":92,"y":60},{"x":165,"y":19},{"x":230,"y":128},{"x":156,"y":148},{"x":32,"y":100},{"x":99,"y":138},{"x":37,"y":158},{"x":124,"y":17},{"x":104,"y":174},{"x":147,"y":180},{"x":194,"y":152},{"x":224,"y":184},{"x":181,"y":187},{"x":70,"y":190},{"x":23,"y":67},{"x":21,"y":179},{"x":26,"y":7},{"x":228,"y":61},{"x":121,"y":190},{"x":244,"y":5},{"x":5,"y":10},{"x":242,"y":195},{"x":3,"y":197},{"x":6,"y":22},{"x":218,"y":197}],"src":"JavaScript_Logo.png","x":0,"y":0},{"points":[{"x":78,"y":16},{"x":48,"y":60},{"x":92.00000000000001,"y":59.999999999999986},{"x":165.00000000000003,"y":18.9999999999999},{"x":234.0000000000001,"y":129.99999999999974},{"x":159,"y":148.9999999999991},{"x":32.000000000000014,"y":100},{"x":100.75285171102662,"y":138.584283903675},{"x":37.73384030418252,"y":158.24461343472723},{"x":123.99999999999909,"y":17.000000000000455},{"x":105.94472243346002,"y":175.42557414448714},{"x":150.74746631568672,"y":184.11353150693915},{"x":197.10559519433693,"y":148.81236414334148},{"x":227.86518455897374,"y":179.36369080667822},{"x":184.92215536498477,"y":187.58700612745776},{"x":59.01768033111574,"y":137.32615872247825},{"x":22.999999999999964,"y":67.00000000000001},{"x":30.104704303950374,"y":215.60549599256748},{"x":25.999999999999883,"y":7.000000000000028},{"x":231.9315822194521,"y":70.29640800494028},{"x":116.10144029884482,"y":158.34386536698},{"x":248.2628499626672,"y":21.35216051792422},{"x":4.999999999999847,"y":10.000000000000039},{"x":256,"y":256},{"x":0,"y":47.05013986065305},{"x":5.999999999999864,"y":22.000000000000036},{"x":230.38778024118045,"y":254.74738399522684}],"src":"maslologo.png","x":0,"y":0}],"triangles":[[9,27,16],[31,21,15],[3,4,5],[6,7,8],[9,10,11],[12,13,14],[15,16,17],[18,19,20],[21,22,23],[24,25,26]]}; // the code you've exported from the GUI
var morpher = new Morpher(json);
document.body.appendChild(morpher.canvas);
morpher.set([1, 0]);
morpher.animate([0, 1], 200);
</script>
<button type="button" onclick="morpher.animate([0, 1], 200);">morph again</button>
<button type="button" onclick="morpher.animate([1, 0], 200);">morph reverse</button>
</body>