We Keep Coding

svg.js animated rotation of elements gives unexpected results (visible "jiggling")

I am using svg.js to create an animation of a bicyle rider. Semi-complete version here: https://pedalfuriously.neocities.org/. I'm running in to a bit of a problem with moving and rotating svg elements during animation created with requestAnimationFrame (rather than the svg.js built in animation).
If you take a look at the link, and use the cadence slider to make the rider pedal very fast, and then flip the slider quickly all the way back to zero, you can see that his lower leg "jiggles" in a disconnected way. What's really doing my head in is that the postion of the legs are determined in each frame based on an absolute relation to the rotation of the cranks (rather than taking some delta time value to determine movement over that frame).
I think I've been able to confirm what aspect of my code is causing the problem. Here is a minimal example that doesn't exhibit the exact behaviour, but I think illustrates the kind of thing I think is responsible:
var draw = SVG("drawing").viewbox(0, 0, 400, 400)
var origin = {
x: 70,
y: 70
}
var length = 60
var blueLine = draw.group()
blueLine.line(0, 0, 0 + length, 0).move(origin.x, origin.y)
.stroke({
color: "#00f",
width: 4
})
blueLine.angle = 0
var greenLine = draw.group()
greenLine.line(0, 0, 0 + length, 0).move(origin.x, origin.y)
.stroke({
color: "#0f0",
width: 4
})
greenLine.angle = 0
var previous = 0
var dt = 0
var step = function(timestamp) {
dt = timestamp - previous
previous = timestamp
blueLine.angle += 0.18 * dt
blueLine.rotate(blueLine.angle, origin.x, origin.y)
var endX = Math.cos(toRad(blueLine.angle)) * length
var endY = Math.sin(toRad(blueLine.angle)) * length
// Comment out this line, and rotation works fine
greenLine.move(endX, endY)
greenLine.angle = blueLine.angle - 10
// Comment out this line, and movement works fine
greenLine.rotate(greenLine.angle, origin.x, origin.y)
// But they don't work together. If I both move and rotate
// the green line, it goes in this crazy huge arc, rather
// than rotating neatly around the end of the blue line
// as expected.
window.requestAnimationFrame(step)
}
window.requestAnimationFrame(step)
function toRad(deg) {
return deg * (Math.PI / 180)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/svg.js/2.6.4/svg.js"></script>
<div id="drawing"></div>
Something else I noticed with my actual code is that if I move the position of the legs, it changes the severity of the problem, or even stops it altogether. If the hips are positioned all the way near the front of the bicycle, the problem is not nearly as bad. Also, if I disable rotation on the lower legs, there is no jiggling. In some positions, the lower leg will just rotate out of the screen instantly on load, even before any motion has been started.
I'm hoping for some guidance on wether I'm misunderstanding the way manipulating elements works, either in svg.js in particular, or SVG in general.
Thank you kind vector graphics experts!
Here is the actual code for the legs. The step() function would probably be the most relevant. Not sure if it will be helpful:
Rider.Leg = function(foot, front, xOffset, yOffset) {
var upper = front ? SVGE.upperLeg : SVGE.upperLegBack
var lower = front ? SVGE.lowerLeg : SVGE.lowerLegBack
this.foot = foot
this.draw = foot.draw
this.geo = {
upper: {
x: this.foot.pedal.gear.x + 150,
y: this.foot.pedal.gear.y - 750,
length: 396
},
lower: {
length: 390
}
}
this.upper = this.draw.group().svg(upper).move(this.geo.upper.x, this.geo.upper.y)
.transform({ scale: 0.95, cx: 0, cy: 0 })
this.lower = this.draw.group().svg(lower).move(this.geo.upper.x, this.geo.upper.y)
}
// Step function does not take in a time argument. Positioning of legs is based only on
// the absolute position of other elements, none of which jiggle.
Rider.Leg.prototype.step = function () {
var angle = this.pedalAngle() - Math.PI
var ha = this.scaleneAngle(this.geo.lower.length, this.geo.upper.length, this.pedalDistance())
var ka = this.scaleneAngle(this.pedalDistance(), this.geo.lower.length, this.geo.upper.length)
var x = this.geo.upper.length * Math.cos(ha + angle)
var y = this.geo.upper.length * Math.sin(ha + angle)
this.upper.rotate(Drive.toDeg(angle + ha), 0, 0)
this.lower.move(this.geo.upper.x + x, + this.geo.upper.y + y)
this.lower.rotate(Drive.toDeg(angle + ha + ka - Math.PI), 0, 0)
}
// Gets the distance between the hip joint and the pedal
Rider.Leg.prototype.pedalDistance = function () {
var pos = this.foot.getPos()
var xDist = this.geo.upper.x - pos.x
var yDist = this.geo.upper.y - pos.y
return Math.hypot(xDist, yDist)
}
// Gets the angle between the hip joint and the pedal
Rider.Leg.prototype.pedalAngle = function () {
var pos = this.foot.getPos()
var xDist = this.geo.upper.x - pos.x
var yDist = this.geo.upper.y - pos.y
return Math.atan2(yDist, xDist)
}
Rider.Leg.prototype.scaleneAngle = function (a, b, c) {
return Math.acos(((b * b) + (c * c) - (a * a)) / (2 * b * c))
}

When you call move() on a group it is internally represented as a translation. svg.js figures out crazy ways to translate the object to the new place without changing any other transformations. That often does not work out. Especially not, when you rotate.
Thats why you should avoid these absolute transformations and go with relative ones. Just call untransform before every move and go from zero. Then you can do:
greenLine.transform({x:endX, y:endY, relative: true})
To move the line by a certain amount. That should work way better.

Snap.svg & JavaScript: Creating Shapes and Animating Each on Delay inside a For Loop

first-time/long-time (quack, quack).
I'm a bit frustrated, and just about stumped, by this riddle I can't quite solve in Snap.svg. It's probably an oversight that I'll kick myself for missing, but I'm not seeing it at this point.
I have x & y data that I draw from a DOM element and store into a series of arrays, filter based on certain values in certain columns, and eventually create multiple instances of the ChartLine object in js. Basically, it sorts a certain column by quantity, assigns each value's row a color from a RainbowVis.js object, pushes all the relevant values from each row into an array for y, and draws a path on the line chart where y is the value and x is a steadily-increasing integer in a For loop.
What I'm currently doing here, in the draw() function, is: for each relevant column, create a <circle> with the variable "dot" with the object's x & y variables, assign the attributes, animate the radius from 0 to 8 in a quarter-second, and add the x & y values of i to a string to be used in a <path> I create right after the For loop. I then animate the path, etc., etc.
Without the setTimeout(), it works well. The circles and paths all animate simultaneously on load. However, I want to add a delay to each .animate with the number of milliseconds increasing by polyDelayInterval in each iteration, so each "dot" animates as the line arrives at it. At the VERY least, I want to animate all of the "dots" after the path is done animating.
The problem is, no matter what I've tried so far, I can only get the last set of "dots" (at the highest x value for each line) to animate; the rest stay at r:0. I've read several somewhat-similar posts, both here and elswhere; I've searched up and down the Snap.svg's docs on their site. I just cannot find what I'm doing wrong. Thanks in advance!
var svgMFLC = Snap('svg#ElementID');
function ChartLine(x, y, color, row) {
this.x = x;
this.y = y;
this.color = color;
this.row = row;
var propNames = Object.keys(this.row);
var yAdjust;
var resetX = this.x;
for (var i = 0; i < propNames.length; i++) { // get only the calculated score columns and their values
if (propNames[i].toLowerCase().includes(calcKeyword)) {
yAdjustedToChartArea = chartBottom - (this.row[propNames[i]] * yInterval);
this.y.push(yAdjustedToChartArea); // returns the value of that score column and pushes it to the y array
}
}
this.draw = function () {
var points = "M"; // the string that will determine the coordinates of each line
var dotShadow = svgMFLC.filter(Snap.filter.shadow(0, 0, 2, "#000000", 0.4));
var polyTime = 1500; // in milliseconds
var dot;
var polyDelayInterval = polyTime / (semesterCols.length - 1);
for (var i = 0; i < semesterCols.length; i++) { // for each data point, create a "dot"
dot = svgMFLC.circle(this.x, this.y[i], 0);
dot.attr({
fill: this.color,
stroke: "none",
filter: dotShadow,
class: "chartPointMFLC"
});
setTimeout(function () {
dot.animate({ r: 8 }, 250, mina.easeout);
}, polyDelayInterval * i);
points += this.x + " " + this.y[i] + " L";
this.x = this.x + xInterval;
}
points = points.slice(0, -2); // take away the excessive " L" from the end of the points string
var poly = svgMFLC.path(points);
var polyLength = poly.getTotalLength();
poly.attr({
fill: "none",
stroke: this.color,
class: "chartLineMFLC",
strokeDasharray: polyLength + " " + polyLength, // setting the strokeDash attributes will help create the "drawing the line" effect when animated
strokeDashoffset: polyLength
});
poly.animate({ strokeDashoffset: 0.00 }, polyTime);
this.x = resetX;
}
}

I can't put a tested solution up without the full code to test, but the problem is almost certainly that you at least need to get a closure for your 'dot' element.
So this line...
setTimeout(function () {
dot.animate({ r: 8 }, 250, mina.easeout);
}, polyDelayInterval * i);
When it comes to call that function, 'dot' will be the last 'dot' from the loop. So you need to create a closure (create functional scope for dot).
So something a bit like...
(function() {
var laterDot = dot;
setTimeout(function () {
laterDot.animate({ r: 8 }, 250, mina.easeout);
}, polyDelayInterval * i)
})();

How to create a bent gradient?

I'm programming snake with Javascript. For the background of the different body parts I'm using the following gradient generation:
gibGradient: function() {
var string = "background: linear-gradient(to right, rgba(243,226,199,1) 15%,rgba(193,158,103,1) "+ snake.data.gradientLinks +"%,rgba(182,141,76,1) "+ snake.data.gradientRechts +"%,rgba(233,212,179,1) 90%);";
if ((snake.data.gradientLinks < 85) && (snake.data.modus == "hochzaehlen")) {
snake.data.gradientLinks = snake.data.gradientLinks + 5;
snake.data.gradientRechts = snake.data.gradientRechts + 5;
if (snake.data.gradientLinks >= 85) {
snake.data.modus = "runterZaehlen";
}
}
if ((snake.data.gradientLinks > 20) && (snake.data.modus == "runterZaehlen")) {
snake.data.gradientLinks = snake.data.gradientLinks - 5;
snake.data.gradientRechts = snake.data.gradientRechts - 5;
if (snake.data.gradientLinks <= 20) {
snake.data.modus = "hochzaehlen";
}
}
return string;
},
My problem is that when the snake moves and it changes directions, the gradient needs to be bent to fit in the last body part before the corner ends and the last that follows the straight of the snake.
For Example:
Im using 10x10 px div elements
Now i need the transition when it moves a corner
Anybody got an idea?

I took the time to write a few utility javascript functions you may find useful. They require the use of the jQuery library however. The best way to create bent gradients is to use offset radial gradients. This combined with border radius makes for a really nice effect.
Now it is up to you to
use the right function at the right times (the naming convention of
the functions is sideA_To_sideB so rightToUp means going right will
eventually find sideA and going up will eventually find sideB - sides
being the head or the tail)
make it cross browser (if you are into that sort of thing)
rounding the head and tail would be a nice touch (ideally this rounding would only occur on
vertical and horizontal parts)
Feel free to change the size variable to suit your needs.
EDIT - based on the image you just added I created this : jsfiddle http://jsfiddle.net/Lbydhhkh/. This was done using rotated linear gradients. I still think using my original approach looks better and makes more sense. This should be enough to send you in the right direction though. The pseudocode can still be used for this new code.
var size = 40;
function aToB(gradient) {
return $("<div>").css({
width: size,
height: size,
background: gradient,
position: "absolute"
});
}
function radialOut(x, y, corner) {
var css = {};
css["border-" + corner + "-radius"] = size / 2;
return aToB([
"radial-gradient(",
size,
"px at ",
x,
"px ",
y,
"px, red, blue)"].join("")).css(css);
}
function radialIn(x, y, corner) {
var css = {};
css["border-" + corner + "-radius"] = size / 2;
return aToB([
"radial-gradient(",
size,
"px at ",
x,
"px ",
y,
"px, blue, red)"].join("")).css(css);
}
function downToUp() {
return aToB("linear-gradient(to left, red, blue)");
}
function rightToLeft() {
return aToB("linear-gradient(to bottom, red, blue)");
}
function upToDown() {
return aToB("linear-gradient(to right, red, blue)");
}
function leftToRight() {
return aToB("linear-gradient(to top, red, blue)");
}
function upToRight() {
return radialIn(size, 0, "bottom-left");
}
function leftToUp() {
return radialIn(0, 0, "bottom-right");
}
function downToLeft() {
return radialIn(0, size, "top-right");
}
function rightToDown() {
return radialIn(size, size, "top-left");
}
function rightToUp() {
return radialOut(size, 0, "bottom-left");
}
function upToLeft() {
return radialOut(0, 0, "bottom-right");
}
function leftToDown() {
return radialOut(0, size, "top-right");
}
function downToRight() {
return radialOut(size, size, "top-left");
}
$(function () {
//inner
$("body").append(upToDown().css({
top: size,
left: 0
})).append(upToRight().css({
top: size * 2,
left: 0
})).append(leftToRight().css({
top: size * 2,
left: size
})).append(leftToUp().css({
top: size * 2,
left: size * 2
})).append(downToUp().css({
top: size,
left: size * 2
})).append(downToLeft().css({
top: 0,
left: size * 2
})).append(rightToLeft().css({
top: 0,
left: size
})).append(rightToDown().css({
top: 0,
left: 0
}));
//outer
$("body").append(leftToDown().css({
top: 0,
left: size * 5
})).append(upToDown().css({
top: size,
left: size * 5
})).append(upToLeft().css({
top: size * 2,
left: size * 5
})).append(rightToLeft().css({
top: size * 2,
left: size * 4
})).append(rightToUp().css({
top: size * 2,
left: size * 3
})).append(downToUp().css({
top: size * 1,
left: size * 3
})).append(downToRight().css({
top: 0,
left: size * 3
})).append(leftToRight().css({
top: 0,
left: size * 4
}));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Also here is some pseudocode to help you call the appropriate functions
while(nextPart()) { //while there are more parts to process
var prev = getPrev(), //returns null or previous part
curr = getCurrent(), //returns current part
next = getNext(), //returns null or next part
a, b, part = [];
//get the direction towards the tail
if(prev) a = curr.getDirectionTo(prev); //returns "up", "right", "down", or "left"
else a = tail.getOppositeDirection(); //returns "up", "right", "down", or "left"
//get the direction towards the head
if(next) b = curr.getDirectionTo(next);
else b = head.getDirection(); //returns "up", "right", "down", or "left"
b = upperCaseFirstLetter(b);
if(!prev) part.push("tail"); //is this a tail?
if(!next) part.push("head"); //is this a head?
//the following line of code calls a function with the form "aToB"
//the variable part does not do anything yet but it can help the called
//function determine if this part is a head, tail, or both for rounding
var domElement = window[a + "To" + b](part);
domElement.css(curr.position()); //properly position the element
$("#container").append(domElement); //add the element to the container
}

Animate by decimal values

var Y = 0.2; // Motion step
var X = 0.6;
(function go(){
$('#m').animate({
left: '+='+(X) ,
top: '+='+(Y)
}, 30, 'linear', go);
}());
Move an element diagonally but not under 45° (Y=1, X=1), rather by steps of a floated number.
Mozilla plays well, but all other browser won't move an element by a decimal px value.
What approach would you use?

Instead of trying to do it through recursion, why not set the left and top values as integers and do it in one animate() call. This way you don't have to deal with floating point numbers and it should still animate diagonally.
var Y = 20; // cannot be >1
var X = 60; // cannot be >1
function go(){
$('#m').animate({
left: '+='+(X) ,
top: '+='+(Y)
}, 300, 'linear');
}
go();

A pixel is, by definition, the smallest element that can be displayed (or not displayed) at the current screen resolution. You can use % and I believe it will work cross browser eg width: 45.5%, but pixels no. In addition you may not even notice the movement that small.

The issue is that when you're setting left and top they're getting rounded to pixels. You're seeing 45-degree motion because both X and Y get rounded to 1.
Why don't you increment two JS variables (which can store floating-point numbers) and then set left and top equal to them at the appropriate time (so the rounding will occur on the sum and not on the increment)?
var Y = 0.2; // cannot be >1
var X = 0.6; // cannot be >1
var cur_left = $('#m').left;
var cur_top = $('#m').top;
function go(){
cur_left += X;
cur_top += Y;
$('#m').animate({
left: '='+(cur_left),
top: '='+(cur_top)
}, 30, 'linear', go);
}
go();

How to animate both rotation and transformation in Raphaël

I'm trying to do something I thought would be rather simple. I've an object that I move around stepwise, i.e. I receive messages every say 100 milliseconds that tell me "your object has moved x pixels to the right and y pixels down". The code below simulates that by moving that object on a circle, but note that it is not known in advance where the object will be heading in the next step.
Anyway, that is pretty simple. But now I want to also tell the object, which is actually a set of subobjects, that it is being rotated.
Unfortunately, I am having trouble getting Raphaël to do what I want. I believe the reason is that while I can animate both translation and rotation independently, I have to set the center of the rotation when it starts. Obviously the center of the rotation changes as the object is moving.
Here's the code I'm using and you can view a live demo here. As you can see, the square rotates as expected, but the arrow rotates incorrectly.
// c&p this into http://raphaeljs.com/playground.html
var WORLD_SIZE = 400,
rect = paper.rect(WORLD_SIZE / 2 - 20, 0, 40, 40, 5).attr({ fill: 'red' }),
pointer = paper.path("M 200 20 L 200 50"),
debug = paper.text(25, 10, ""),
obj = paper.set();
obj.push(rect, pointer);
var t = 0,
step = 0.05;
setInterval(function () {
var deg = Math.round(Raphael.deg(t));
t += step;
debug.attr({ text: deg + '°' });
var dx = ((WORLD_SIZE - 40) / 2) * (Math.sin(t - step) - Math.sin(t)),
dy = ((WORLD_SIZE - 40) / 2) * (Math.cos(t - step) - Math.cos(t));
obj.animate({
translation: dx + ' ' + dy,
rotation: -deg
}, 100);
}, 100);
Any help is appreciated!

If you want do a translation and a rotation too, the raphael obj should be like that
obj.animate({
transform: "t" + [dx , dy] + "r" + (-deg)
}, 100);

Check out http://raphaeljs.com/animation.html
Look at the second animation from the top on the right.
Hope this helps!
Here's the code:
(function () {
var path1 = "M170,90c0-20 40,20 40,0c0-20 -40,20 -40,0z",
path2 = "M270,90c0-20 40,20 40,0c0-20 -40,20 -40,0z";
var t = r.path(path1).attr(dashed);
r.path(path2).attr({fill: "none", stroke: "#666", "stroke-dasharray": "- ", rotation: 90});
var el = r.path(path1).attr({fill: "none", stroke: "#fff", "stroke-width": 2}),
elattrs = [{translation: "100 0", rotation: 90}, {translation: "-100 0", rotation: 0}],
now = 0;
r.arrow(240, 90).node.onclick = function () {
el.animate(elattrs[now++], 1000);
if (now == 2) {
now = 0;
}
}; })();