Started planning the way events work and got Spring working

1 files changed, 32 insertions, 30 deletions

diff --git a/dirty.html b/dirty.html
index 1b8a3e3..41c1583 100644
--- a/dirty.html
+++ b/dirty.html
@@ -54,7 +54,6 @@ function getColor(t) {
 
 
 
-
 // for (let i = 0 ; i < 15; i++) {
 //   for (let j = 0 ; j < 10; j++) {
 //
@@ -75,39 +74,42 @@ function getColor(t) {
 //   }
 // }
 
-var randPoint = (x = 50, y = 50) => [
-  Math.random() * 100 - 50 + x,
-  Math.random() * 100 - 50 + y
-]
-
-var poly = SVG('<polygon>').plot([
-  randPoint(),
-  randPoint(),
-  randPoint(),
-  randPoint(),
-  randPoint()
-]).attr({fill: 'none', stroke: 'black'}).addTo('svg')
-var polyAni = poly.animate(new SVG.Spring(300, 50))
-
-SVG.on(document, 'click', function (e) {
-  polyAni.plot([
-    randPoint(e.pageX-50, e.pageY-50),
-    randPoint(e.pageX+50, e.pageY-50),
-    randPoint(e.pageX+50, e.pageY),
-    randPoint(e.pageX+50, e.pageY+50),
-    randPoint(e.pageX-50, e.pageY+50)
-  ])
-})
+// var bla = SVG('<rect>').size(50, 50).center(100, 100).addTo('svg')
+// bla.animate().move(220, 200)
 
-// var mover = SVG('<ellipse>').size(50, 50).center(100, 100).addTo('svg')
-// var anim = mover.animate(SVG.PID(null, null, null, false)).move(500, 500)
+// var randPoint = (x = 50, y = 50) => [
+//   Math.random() * 100 - 50 + x,
+//   Math.random() * 100 - 50 + y
+// ]
+//
+// var poly = SVG('<polygon>').plot([
+//   randPoint(),
+//   randPoint(),
+//   randPoint(),
+//   randPoint(),
+//   randPoint()
+// ]).attr({fill: 'none', stroke: 'black'}).addTo('svg')
+// var polyAni = poly.animate(new SVG.Spring(3000, 0))
 //
-// SVG.on(document, 'mousemove', function (e) {
-//   //mover.animate(SVG.PID()).move(e.pageX, e.pageY)
-//   var p = mover.point(e.pageX, e.pageY)
-//   anim.center(p.x, p.y)
+// SVG.on(document, 'click', function (e) {
+//   polyAni.plot([
+//     randPoint(e.pageX-50, e.pageY-50),
+//     randPoint(e.pageX+50, e.pageY-50),
+//     randPoint(e.pageX+50, e.pageY),
+//     randPoint(e.pageX+50, e.pageY+50),
+//     randPoint(e.pageX-50, e.pageY+50)
+//   ])
 // })
 
+var mover = SVG('<ellipse>').size(50, 50).center(100, 100).addTo('svg')
+var anim = mover.animate(new SVG.Spring(500, 10)).move(500, 500)
+
+SVG.on(document, 'mousemove', function (e) {
+  //mover.animate(SVG.PID()).move(e.pageX, e.pageY)
+  var p = mover.point(e.pageX, e.pageY)
+  anim.center(p.x, p.y)
+})
+
 </script>
 
 </body>