From: Saivan Date: Tue, 3 Jul 2018 14:44:46 +0000 (+1000) Subject: Worked towards setting the origin on each frame with linear algebra X-Git-Tag: 3.0.0~60^2~23 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=4688ab0d651547cb018c8f00590ddb18de40c6a1;p=svg.js.git Worked towards setting the origin on each frame with linear algebra This commit attempts to modify the origin on each frame, but it seems that we have some kind of bug that we need to fix first --- diff --git a/dirty.html b/dirty.html index 1d4601c..1670e9c 100644 --- a/dirty.html +++ b/dirty.html @@ -20,7 +20,7 @@ -

Absolute:

Position:

@@ -208,15 +208,41 @@ let canvas = SVG('#canvas') 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}, true) - .transform({rotate: val}, true) + // 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: 'center', translate: [300 * val, 0] } + let obj2 = { rotate: -val * 180, origin: 'center' } + + a.clone() // startPosition + a.clone().transform(obj, true).transform(obj2, true) // endPosition }) @@ -230,28 +256,36 @@ SVG('#absolute').on('input slide', function (e) { // .addClass('green') // Make the pink rectangle -// 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: 180, shear:2, origin: [600, 600], translate: [200, 100] } -// let obj2 = { rotate: 180, shear:2, origin: [600, 600], translate: [200, 100] } -// -// a.clone() // startPosition -// a.clone().transform(obj, true).transform(obj2, true) // endPosition -// //a.animate(new SVG.Spring(50, 30)).transform(obj) // animation -// a.animate(300).transform(obj, true).transform(obj2, true) // animation -// +let a = canvas.rect(200, 400).move(500, 400) + .attr('opacity', 0.3) + .addClass('pink') + .transform({ tx: 100, ty: 500, origin: 'top-left' }) + +canvas.ellipse(20, 20).center(700, 1100) + + +var timer = 0 +a.timeline().source(() => { + timer += 1 + document.querySelector('#absolute span').textContent = timer + return timer +}) + + +let el = canvas.ellipse(20, 20) +window.moveit = function (x, y) { + el.move(x, y) +} + + +let obj = { rotate: 180, origin: 'center', translate: [300, 0] } +let obj2 = { rotate: -180, origin: 'center' } + +a.clone() // startPosition +a.clone().transform(obj, true).transform(obj2, true) // endPosition +//a.animate(new SVG.Spring(50, 30)).transform(obj) // animation +a.animate(300).transform(obj, true).transform(obj2, true) // animation + // // // Put an ellipse where we expect the object to be // canvas.ellipse(30, 30).center(100, 500) diff --git a/src/helpers.js b/src/helpers.js index 755beba..108fbfc 100644 --- a/src/helpers.js +++ b/src/helpers.js @@ -260,23 +260,6 @@ function formatTransforms (o) { } } -/* TODO: KILL - - - 1. Transform the origin by figuring out the delta - - - At the start, we had: - - let Sinv = new SVG.Matrix(element).inverse() - let origin = getOrigin(element) - - - At a particular frame we have: - - let C = Matrix(element) - let newOrigin = origin.transform(S.inv).transform(C) - -*/ - function getOrigin (o, element) { // Allow origin or around as the names @@ -298,6 +281,7 @@ function getOrigin (o, element) { : y + height / 2 // Find the new center in the transformed coordinates + console.log(element.attr('transform')) const matrix = new SVG.Matrix(element) const {x: tx , y: ty} = new SVG.Point(bx, by).transform(matrix) diff --git a/src/runner.js b/src/runner.js index 92f41a9..20cc03e 100644 --- a/src/runner.js +++ b/src/runner.js @@ -482,12 +482,12 @@ function mergeTransforms () { .reduce((last, curr) => last.lmultiply(curr)) this.transform(netTransform) + this._currentMatrix = runners[0] + // Merge any two transformations in a row that are done let lastRunner = null runners.forEach((runner, i) => { - if (lastRunner && runner.done && lastRunner.done) { - console.log(lastRunner, runner) delete runners[runner.id+1] runners[lastRunner.id+1] = { transforms: runner.transforms.lmultiply(lastRunner.transforms), @@ -498,6 +498,10 @@ function mergeTransforms () { lastRunner = runner }) + + if (!lastRunner) { + this._frameId = null + } } SVG.extend(SVG.Element, { @@ -512,12 +516,18 @@ SVG.extend(SVG.Element, { }) } - delete arr[i] } }) }, + _currentTransform (current) { + return this._transformationRunners + .filter((runner) => runner.id <= current.id) + .map(runner => runner.transforms) + .reduce((last, curr) => last.lmultiply(curr)) + }, + addRunner: function (runner) { this._transformationRunners[runner.id+1] = runner @@ -632,24 +642,60 @@ SVG.extend(SVG.Runner, { // - true, true with ObjectBag var morpher var origin + var startTransform var current + var element if(relative && !isMatrix) { morpher = new SVG.Morphable().type(SVG.Morphable.ObjectBag) .stepper(this._stepper) this.queue(function() { if (origin == null) { - origin = getOrigin (transforms, this.element()) - transforms.origin = origin + element = this.element() + let transformedOrigin = getOrigin (transforms, element) + origin = new SVG.Point(transformedOrigin) + .transform(new SVG.Matrix(element).inverse()) + + transforms.origin = [origin.x, origin.y] morpher.to(formatTransforms(transforms)) } let from = current || {origin} - morpher.from(formatTransforms(from)) - this.element().addRunner(this) + }, function (pos) { + + let currentMatrix = element._currentTransform(this) + //origin = getOrigin (transforms, element) + let {x, y} = origin.transform(currentMatrix) + +moveit(x, y) + +// console.log(currentMatrix.decompose(origin[0], origin[1])); + + + /* + + + 1. Transform the origin by figuring out the delta + + - At the start, we had: + + let Sinv = new SVG.Matrix(element).inverse() + let origin = getOrigin(element) + + - At a particular frame we have: + + let C = Matrix(element) + let newOrigin = origin.transform(S.inv).transform(C) + + */ + + let index = morpher._from.indexOf('ox') + morpher._from.splice(index, 4, 'ox', x, 'oy', y) + morpher._to.splice(index, 4, 'ox', x, 'oy', y) + current = morpher.at(pos).valueOf() let matrix = new SVG.Matrix(current) this.addTransform(matrix) @@ -678,7 +724,7 @@ SVG.extend(SVG.Runner, { morpher.to(transforms) this.queue(function() { - let element = this.element() + element = this.element() element.addRunner(this) if (!origin && affine) {