diff options
author | Saivan <savian@me.com> | 2018-05-28 19:58:34 +1000 |
---|---|---|
committer | Saivan <savian@me.com> | 2018-05-28 19:58:34 +1000 |
commit | d0beb6dfdeabb2fcd2e6b8bbad9be0c5a651d7f9 (patch) | |
tree | 894e946083d4c6158091ce64118ad1b95b6d491c /dirty.html | |
parent | cbf1359e0ab469e1137450192b7d612501c4bb5c (diff) | |
download | svg.js-d0beb6dfdeabb2fcd2e6b8bbad9be0c5a651d7f9.tar.gz svg.js-d0beb6dfdeabb2fcd2e6b8bbad9be0c5a651d7f9.zip |
Segmenting out some Controllers
Diffstat (limited to 'dirty.html')
-rw-r--r-- | dirty.html | 60 |
1 files changed, 30 insertions, 30 deletions
@@ -75,39 +75,39 @@ 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.PID(null, 0)) +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 mover = SVG('<ellipse>').size(50, 50).center(100, 100).addTo('svg') +// var anim = mover.animate(SVG.PID(null, null, null, false)).move(500, 500) // -// 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) -// ]) +// 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) // }) -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) - -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> |