SVG rotation issue with JavaScript variables - javascript

Is there a way to use a variable inside the rotation function in JavaScript? The script below does not work (x and y will not assigned).
var x = 20;
var y = 20;
object.children[0].setAttribute('transform','rotate(-20, x, y)');

As setAttribute takes as string you can either use string concatenation or template literals (as shown below).
var x = 20;
var y = 20;
object.children[0].setAttribute('transform',`rotate(-20, ${x}, ${y})`);
As commented this is ES6 syntax. Below is using string concatenation.
var x = 20;
var y = 20;
object.children[0].setAttribute('transform','rotate(-20, ' + x + ', ' + y + ')');

While building the string in place with literals or concat is fine, if you are planning on doing this more than once, I would suggest creating a string builder function for rotate. For example:
function rotateStr(a, x, y) {
return `rotate(${a}, ${x}, ${y})`
// return 'rotate(' + x + ',' + y + ',' + z + ')' if you can't use templates
}
var x = 20;
var y = 20;
object.children[0].setAttribute('transform', rotateStr(-20, x, y))

Related

Centroid of a polygon script

I've read other examples on here on finding the centroid of a polygon, I do not see where I am going wrong, why my centroid is so far off. If someone could please explain to me where my calculation is off.
I came up with this solution:
function getCentroid() {
var coords = getCoords();
var signedArea = 0;
var x = 0;
var y = 0;
for (var i = 0; i < coords.length - 1; i++) {
var temp = (coords[i].x * coords[i + 1].y) - (coords[i + 1].x * coords[i].y);
signedArea += temp;
x += (coords[i].x + coords[i + 1].x) * temp;
y += (coords[i].y + coords[i + 1].y) * temp;
}
signedArea *= 0.5;
x /= 6 * signedArea;
y /= 6 * signedArea;
return "" + Math.round(x) + "," + Math.round(y);
}
getCoords() returns a JSON array in this form:
[
{
"x":"600",
"y":"124"
},
{
"x":"560",
"y":"396"
},
{
"x":"994",
"y":"370"
},
{
"x":"918",
"y":"121"
},
{
"x":"600",
"y":"124"
}
]
The function getCentroid() returns the centroid (or atleast it should) of the polygon as a commaseperated string in the form: x,y
However, what it is returning is so far off the center.
returns: 312239,219226
Can anyone point me in the right direction?
Silly me, I didn't realize that the values of the coordinates were stored as strings in the json array. I casted them to Numbers and all is well.

How to Add and subtract var in Jquery?

I'm a completely nooby on Jquery.
I'm trying to calculate and obviously didn't work.
$(document).ready(function() {
var x = $('.a').height();
var y = $('.b').height();
$('.c').height(y - x + x);
});
I'm close to make it work? :))
https://jsfiddle.net/kav5y0vf/
Instead of:
var x = $('.a').height();
Use
var x = $('.a').outerHeight();
height() returns height of element with no padding, whereas outerHeight() does.
jsfiddle below:
https://jsfiddle.net/kav5y0vf/2/
Change this line
$('ul.logad li.o').height(y - x + x);
To
$('ul.logad li.o').css('height', (y - x + x) + 'px');
Don't know why you need this but y-x+x = y

I am using a function to get the rotation of an object, but its failing in IE8

I am using this function:
// function that grabs the elements rotation in all browsers
function getRotationDegrees(obj) {
var matrix = obj.css("-webkit-transform") ||
obj.css("-moz-transform") ||
obj.css("-ms-transform") ||
obj.css("-o-transform") ||
obj.css("transform");
if(matrix !== 'none') {
var values = matrix.split('(')[1].split(')')[0].split(',');
var a = values[0];
var b = values[1];
var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
} else { var angle = 0; }
return (angle < 0) ? angle +=360 : angle;
}
Which works beautifully in any other browser, but in IE8 it throws this error "Unable to get value of the property 'split': object is null or undefined". This is because the matrix variable is coming back as "undefined", but I need it to come back with the value of rotation which I am not sure how to get in IE8, any ideas?
Untested solution, based on code i used to set the rotation of an element in IE8:
var matrix = obj.style.filter; // obj is a HTML Element. If you have jQuery, i suppose you could use that to get the filter property
// at this point matrix is a string like this:
'progid:DXImageTransform.Microsoft.Matrix(' +
'M11=' + cos + ', ' +
'M12=' + (-sin) + ', ' +
'M21=' + sin + ', ' +
'M22=' + cos + ', ' +
'sizingMethod="auto expand")';
// where cos and sin are Math.cos(angleInRadians) and Math.sin(angleInRadians)
The next step is to get one of those values (parsing the string i suppose) and use Math.asin or Math.acos to get the angle in radians. If you need it in degrees, you need to multiply it by 180 and divide by Math.PI
Similar to your code, you could do:
var values = matrix.match(/=.*?M/g);
var sin = values[2].substring(1,values[2].length-1);
var cos = values[0].substring(1,values[2].length-1);
to extract the sin and cos from the matrix.

RGB colours in ThreeJS

I have a set of points stored in a giant string, with newline characters \n separating one point from the next. Each point is stored as x y z r g b, where r g b are values ranging from 0-255.
According to the ThreeJS docs, it is possible to do this:
var color = new THREE.Color("rgb(255,0,0)");
However, my points still show up as all white in my ThreeJS viewer. What am I doing wrong?
Code is as follows:
var cloud = data.split('\n');
for (var i=0; i<cloud.length; i++) {
var colour = 'rgb(' + pt[3] + ',' + pt[4] + ',' + pt[5] + ')';
model.vertices.push( new THREE.Vector3(x, y, z) );
colours.push( new THREE.Color(colour) );
}
I realised what my mistake was: I forgot to parse points 3 to 5 as floats.
This fixed it:
var colour = 'rgb(' + parseFloat(pt[3]) + ',' + parseFloat(pt[4]) + ',' + parseFloat(pt[5]) + ')';

JavaScript Changing BG Color

I made a div with background-color set to rgb(0,0,0); and I want to change it's color on click with javascript. I made a function to do that.
function change(){
var x = 1;
var y = x + 100;
document.getElementById("box").style.backgroundColor = "rgb(" + y + "," + y + "," + y + ")"; }
It works fine but I can change the div's color just once. What I want to do is get div's color value and set it to x and run the function again. So the bg will go like black->grey->white on each click. Depending on the y variable.
I can get the div's value but it'll get it in "rgb(0,0,0);" format. I don't know what to do after getting this. How do I manipulate just integers in rgb(0,0,0); ?
You can store current x value in data attributes:
function change(box) {
var x = +box.getAttribute('data-x'), // +box.dataset.x for modern browsers
y = x + 100;
box.style.backgroundColor = "rgb(" + y + "," + y + "," + y + ")";
box.setAttribute('data-x', y);
}
HTML
<div id="box" onclick="change(this)"></div>
Demo: http://jsfiddle.net/Wuz75/
Instead of trying to analyse the color, since your colors will be static, just make an array of colors, and keep track of the index.
var colors = [
"rgb(0,0,0)",
"rgb(100,100,100)",
"rgb(255,255,255)"
],
c = 0;
Then in your function, use c to get the next color, and then increment, or reset to 0.
function change() {
document.getElementById("box").style.backgroundColor = colors[c];
c = ++c % colors.length;
}
So whenever you run the function, it'll switch between colors in the Array.
Or you can use :
function change(x) {
var el = document.getElementById('color');
var rgb = el.style.backgroundColor.replace(/rgb|\(|\)|\s/g, '').split(',');
if ( rgb == "" ) { rgb = [0,0,0] };
for (var a = 0; a < rgb.length; a++ ) {
rgb[a] = parseInt(rgb[a]) + x;
}
el.style.backgroundColor = 'rgb('+rgb.join(',')+')';
}
Here is a demo : http://jsbin.com/ozepaz/1/edit

Categories