summaryrefslogtreecommitdiffstats
path: root/dirty.html
diff options
context:
space:
mode:
authorUlrich-Matthias Schäfer <ulima.ums@googlemail.com>2018-12-01 17:24:04 +0100
committerUlrich-Matthias Schäfer <ulima.ums@googlemail.com>2018-12-01 17:24:04 +0100
commit51dafe62e02c4298859ac8f1c5945899241fac23 (patch)
tree864908d07b63337611f67364838245037b7fe85b /dirty.html
parent9546418c5ed9b1876132b43dff1ae690c3ec4e24 (diff)
downloadsvg.js-51dafe62e02c4298859ac8f1c5945899241fac23.tar.gz
svg.js-51dafe62e02c4298859ac8f1c5945899241fac23.zip
fix playgrounds, delete unneeded files
Diffstat (limited to 'dirty.html')
-rw-r--r--dirty.html520
1 files changed, 0 insertions, 520 deletions
diff --git a/dirty.html b/dirty.html
deleted file mode 100644
index 900c738..0000000
--- a/dirty.html
+++ /dev/null
@@ -1,520 +0,0 @@
-
-<!DOCTYPE html>
-<html lang="en" dir="ltr">
-<head>
- <meta charset="utf-8">
- <title></title>
- <script type="text/javascript" src="dist/polyfills.js"></script>
- <script type="text/javascript" src="dist/polyfillsIE.js"></script>
- <script type="text/javascript" src="dist/svg.min.js"></script>
-
-
-
-
-
-
-</head>
-<body style="background-color: #c7c7ff">
-
-<!-- <div id="absolute"><label>Absolute: <input type="range" min="0" max="1" step="0.01"></slider></label><span></span></div>
-<div id="position"><label>Position: <input type="range" min="0" max="5" step="0.01"></slider></label><span></span></div> -->
-
-<button name="back1000">Back 1000</button>
-<button name="back100">Back 100</button>
-<button name="forth100">Forth 100</button>
-<button name="forth1000">Forth 1000</button>
-<button name="speed2">Speed x2</button>
-<button name="speed05">Speed x0.5</button>
-<button name="stop">Stop</button>
-<button name="finish">Finish</button>
-<button name="pause">Pause</button>
-<button name="play">Play</button>
-<button name="reverse">Reverse</button>
-<span id="displayText"></span>
-<br>
-
-<!-- Making the svg -->
-<svg width=1000px height=500px id="canvas">
- <rect x=50 y=100 width=200 height=100 stroke=none stroke-width=2 />
-</svg>
-
-<!-- Modifying the svg -->
-<script type="text/javascript">
-
-// import SVG from './src/svg.js'
-//
-// window.SVG = SVG
-
-var rect = SVG('rect').hide()
-var sin = Math.sin
-var pi = Math.PI
-var round = Math.round
-
-function getColor(t) {
- var a = round(80 * sin(2 * pi * t / 0.5 + 0.01) + 150)
- var b = round(50 * sin(2 * pi * t / 0.5 + 4.6) + 200)
- var c = round(100 * sin(2 * pi * t / 0.5 + 2.3) + 150)
- var color = 'rgb('+ a +','+ b +','+ c +')'
- return color
-}
-
-// var rect1 = SVG('<rect>').addTo('svg').size(50, 50).move(100, 100)
-// var rect2 = SVG('<rect>').addTo('svg').size(50, 50).move(100, 200)
-//
-// var anim1 = new SVG.Runner(1000).element(rect1).loop(5, true, 1000).move(200, 100)
-// var anim2 = new SVG.Runner(1000).element(rect2).loop(5, true, 1000).move(200, 200)
-//
-// SVG('#absolute').on('input slide', function (e) {
-// var val = e.target.value
-// document.querySelector('#absolute span').textContent = val
-// anim1.absolute(val)
-// })
-//
-// SVG('#position').on('input slide', function (e) {
-// var val = e.target.value
-// document.querySelector('#position span').textContent = val
-// anim2.position(val)
-// })
-
-
-// rect.animate(4000)
-// .during(t => rect.transform({scale: sqrt(1 + t), rotate: 720 * t}))
-// .after(500, ()=> {rect.attr('stroke', 'white')})
-// .queue(() => rect.attr('fill', getColor(0)))
-// .animate(1500, 500, true)
-// .queue(()=> {}, t => rect.attr('fill', getColor(t)))
-// .animate(1000, true)
-// .move(200, 200)
-// .size(300, 300)
-
-// SVG.Animator.timeout(()=> { rect.animate().pause() }, 1000 - 10)
-// SVG.Animator.timeout(()=> { rect.animate().play() }, 2000 - 10)
-
-
-
-// SVG('rect')
-// .clone().show()
-// .animate()
-// .move(300, 200)
-
-//
-// for (let i = 0 ; i < 15; i++) {
-// for (let j = 0 ; j < 10; j++) {
-//
-// // Make the rect
-// let o = i + j
-// let rect = SVG('rect').clone().show()
-// .width(40).height(40)
-// .x(50 * i).y(50 * j)
-// .attr('fill', getColor(o * 0.1))
-//
-// // Move the rect
-// let {cx, cy} = rect.bbox()
-//
-// // Animate the rect
-// rect.animate(3000, Math.random() * 2000)
-// // .during(t => rect.transform({rotate: 700 * t, origin: [cx, cy]}))
-// .transform({rotate: 720}, true)
-// // .during(t => rect.attr('transform', `rotate(${700 * t})`))
-// .during(t => rect.attr('fill', getColor(o * 0.1 + t)))
-// }
-// }
-
-var canvas = SVG('#canvas')
-
-canvas.attr('viewBox', null)
-
-SVG.defaults.timeline.ease = '-'
-
-var r = new SVG.Runner(1000)
-var t = new SVG.Timeline().persist(true)
-
-r.schedule(t, 200)
- .animate(500).loop(5, true, 100)
- .animate(600, 200, 'absolute')
- .animate(600, 300)
- .animate(600, 300, 'now')
- .animate(1000, 0, 'absolute').loop(6, true)
-
-var schedule = t.schedule()
-
-schedule.forEach(function (s, i) {
- var rect = canvas.rect(s.duration / 10, 25)
- .move(100 + s.start/10, 100 + i*30)
- .attr('fill', '#000')
-
- s.runner.element(rect)
- .attr('fill', getColor(i*0.1))
-
- // if (i===0)
- // s.runner.during(console.log)
-})
-
-// t.play()
-
-var mover = canvas.line(100, 100, 100, 300).attr('stroke', 'black')
-mover.clone().insertAfter(mover)
-canvas.line(100, 300, 800, 300).attr('stroke', 'black')
-
-var text = SVG('#displayText')
-
-t.on('time', function (e) {
- mover.x(100 + e.detail/10)
- text.node.textContent = e.detail
-})
-
-t.on('finished', function (e) {
- console.log('finished')
-})
-
-SVG('button[name="back100"]').on('click', function (e) {
- t.seek(-100)
-})
-SVG('button[name="back1000"]').on('click', function (e) {
- t.seek(-1000)
-})
-SVG('button[name="forth100"]').on('click', function (e) {
- t.seek(100)
-})
-SVG('button[name="forth1000"]').on('click', function (e) {
- t.seek(1000)
-})
-
-SVG('button[name="speed2"]').on('click', function (e) {
- t.speed(2)
-})
-
-SVG('button[name="speed05"]').on('click', function (e) {
- t.speed(0.5)
-})
-
-SVG('button[name="pause"]').on('click', function (e) {
- t.pause()
-})
-
-SVG('button[name="play"]').on('click', function (e) {
- t.play()
-})
-
-SVG('button[name="stop"]').on('click', function (e) {
- t.stop()
-})
-
-SVG('button[name="finish"]').on('click', function (e) {
- t.finish()
-})
-
-SVG('button[name="reverse"]').on('click', function (e) {
- t.reverse()
-})
-
-
-canvas.rect(100, 100).on('click', function (e) {
- e.target.instance.animate()
- .move(Math.random()*1000, Math.random()*750)
- .timeline().on('finished', function (e) {
- console.log('rect finished')
- })
-})
-
-console.log(schedule)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-// var bla = SVG('<rect>').size(0, 0).move(200, 200).addTo('svg')
-// bla.animate().size(220, 200).queue(null, console.log)
-
-// 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, '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))
-//
-// let date = +new Date
-// SVG.on(document, 'mousemove', function (e) {
-// // if (+new Date - date > 50) {
-// // date = +new Date
-// // } else {
-// // return
-// // }
-//
-// //var p = mover.point(e.pageX, e.pageY)
-// var p = mover.doc().point(e.clientX, e.clientY)
-// //var p = {x: e.pageX, y: e.pageY}
-// //console.log(p)
-// anim.transform({px: p.x - 100, py: p.y - 100})
-// //anim.center(p.x, p.y)
-// })
-/*
-let canvas = SVG('#canvas')
-
-let rectangle = canvas.rect(100, 200).move(100, 0)
-
-let bbox = rectangle.bbox()
-
-var timer = 0
-rectangle.timeline().source(() => {
- timer += 2
- document.querySelector('#absolute span').textContent = timer
- return timer
-})
-rectangle.animate().transform({
- rotate: 90,
- origin: [bbox.cx, bbox.cy]
-})*/
-
-//
-
-
-// SVG('#absolute').on('input slide', function (e) {
-// var val = e.target.value
-//
-// canvas.clear()
- // canvas.ellipse(20, 20)
- // let re = canvas.rect(300, 150).move(100, 150).attr('opacity', 0.5)
- // re.clone()
- // .transform({rotate: 45, skew: 30}, true)
- //
- // re.clone()
- // .transform({
- // rotate: 45, skew: 30, /*translate: [150, 140], */
- // }, true)
- // .transform({rotate: val, origin: 'bottom-right'}, true)
- //
- // re.clone()
- // .transform({rotate: 45, skew: 30}, true)
- // .transform({rotate: val, origin: 'bottom-right'}, true)
- // .transform({skew}, true)
-// let a = canvas.rect(200, 400).move(500, 400)
-// .attr('opacity', 0.3)
-// .addClass('pink')
-// //.transform({ px: 100, py: 500, origin: 'top-left' })
-//
-//
-// var timer = 0
-// a.timeline().source(() => {
-// timer += 1
-// document.querySelector('#absolute span').textContent = timer
-// return timer
-// })
-//
-// let obj = { rotate: val * 180, origin: 'top-left' }
-// let obj2 = { rotate: val * 280, origin: 'center' }
-//
-// a.clone() // startPosition
-// a.clone().transform(obj, true).transform(obj2, true) // endPosition
-// })
-
-
-// let a = canvas.rect(200, 400).move(500, 400)
-//
-// a.animate(1000, 500).move(100, 100).animate(1000, 500).move(500, 400)
-
-
-
-
-/* FUZZYMS PLANETS!! */
-// let canvas = SVG('#canvas')
-// let gradient = canvas.gradient('radial', function(gradient) {
-// gradient.stop(0, '#f00')
-// gradient.stop(1, '#ff0')
-// })
-//
-// let gradientEarth = canvas.gradient('linear', function(gradient) {
-// gradient.stop(0, '#00f')
-// gradient.stop(1, '#0f0')
-// })
-//
-// let sun = canvas.circle(200).center(500, 300).attr({ fill: gradient })
-//
-// let earth = canvas.circle(100).center(1000, 300).attr({fill: gradientEarth})
-//
-// let moon = canvas.circle(50).center(1200, 300).attr({fill: '#ffa'})
-//
-// earth.animate(10000).loop().ease('-')
-// .transform({rotate: 360, origin: [500, 300]}, true)
-// .transform({rotate: 720, origin: 'center'}, true)
-// .on('step', (e) => {
-// // console.log(e)
-// })
-//
-// moon.animate(10000).loop().ease('-')
-// .transform({rotate: 360, origin: [500, 300]}, true)
-// .transform({rotate: 3600, origin: [1000, 300]}, true)
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-/**
- * FUZZYS EXAMPLE
- */
-// let a = canvas.rect(200, 400).move(500, 400)
-// .attr('opacity', 0.3)
-// .addClass('pink')
-// .transform({ tx: 300, ty: 500, origin: 'top-left' })
-//
-// let obj = { rotate: 100, origin: 'top-left'}
-// let obj2 = { rotate: 280, origin: 'center' }
-// let obj3 = { rotate: 1000, origin: 'center', translate: [300, 200]}
-//
-//
-// var c = a.clone()
-//
-// c.animate(3000)
-// .transform(obj)
-// .transform(obj2, true) // animation
-//
-// a.clone().attr('fill', 'blue')
-// .transform(obj)
-// .transform(obj2, true) // endPosition
-
-
-// SAIVANS EXAMPLE
-
-
-// canvas.ellipse(20, 20).center(100, 100)
-// let r = canvas.rect(200, 400).move(100, 100)
-// .attr('opacity', 0.3)
-// //.transform({ tx: 300, ty: 500, origin: 'top-left' })
-//
-// // Normal usage
-// let wait = 3000
-// let rAnim = r.clone().attr('fill', '#f00').animate(wait).attr('fill', '#0f0')
-// let rDecl = r.clone().attr('fill', 'blue').animate(new SVG.Spring(wait, 15))
-// //let rDecl = r.clone().attr('fill', 'blue').animate(new SVG.PID(0.01, 0.001, 1, 10))
-//
-// // var timer = 0
-// // rDecl.timeline().source(() => {
-// // timer += 100
-// // return timer
-// // })
-//
-// let runTransformation = (transform) => {
-// return () => {
-// //transform = new SVG.Matrix(transform)
-// let relative = true
-// let affine = true
-// r.transform(transform, relative)
-// rAnim.animate(wait).transform(transform, relative, affine)
-// rDecl.transform(transform, relative, affine)
-// }
-// }
-//
-// setTimeout(runTransformation({
-// origin: 'top-left',
-// translate: [530, 250],
-// rotate: 300,
-// scale: 2,
-// shear: 1,
-// }), 0.1 * wait )
-//
-//
-//
-// setTimeout(runTransformation({
-// origin: 'top-left',
-// translate: [530, 250],
-// rotate: 100,
-// scale: 2,
-// shear: 1,
-// }), 0.4 * wait)
-//
-// setTimeout(runTransformation({
-// origin: 'top-left',
-// translate: [530, 250],
-// rotate: 100,
-// scale: 2,
-// shear: 1,
-// }), 0.6 * wait)
-
-
-// canvas.circle(50).center(100, 0).attr('fill', 'gray')
-//
-// setTimeout(runTransformation({
-// rotate: 360,
-// origin: [100, 0]
-// }), 0.1 * wait )
-//
-//
-// setTimeout(runTransformation({
-// rotate: 360,
-// }), 0.4 * wait)
-
-// const getConsole = (time) => {
-// return () => {
-// console.group(time)
-// console.log(0, rAnim.element()._transformationRunners[0] && rAnim.element()._transformationRunners[0].transforms.decompose().rotate)
-// console.log(1, rAnim.element()._transformationRunners[1] && rAnim.element()._transformationRunners[1].transforms.decompose().rotate)
-// console.log(2, rAnim.element()._transformationRunners[2] && rAnim.element()._transformationRunners[2].transforms.decompose().rotate)
-// console.log(3, rAnim.element()._transformationRunners[3] && rAnim.element()._transformationRunners[3].transforms.decompose().rotate)
-// console.log(4, rAnim.element()._transformationRunners[4] && rAnim.element()._transformationRunners[4].transforms.decompose().rotate)
-// console.groupEnd(time)
-// }
-// }
-//
-// logCall = (time) => {
-// setTimeout(getConsole(time), time)
-// }
-//
-// logCall(0.2 * wait)
-// logCall(0.3 * wait)
-// logCall(0.4 * wait)
-// logCall(0.5 * wait)
-// logCall(0.6 * wait)
-// logCall(0.7 * wait)
-// logCall(0.8 * wait)
-// logCall(0.9 * wait)
-// logCall(1 * wait)
-// logCall(1.1 * wait)
-// logCall(1.2 * wait)
-// logCall(1.3 * wait)
-// logCall(1.4 * wait)
-// logCall(1.5 * wait)
-
-</script>
-
-</body>
-</html>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-10 04:48:47 +0000