I have a DIV that I rotate based on the mouse position, here's the fiddle:
http://jsfiddle.net/JqBZb/550/
And the JS:
var img = $('.image');
if(img.length > 0){
var offset = img.offset();
function mouse(evt){
var center_x = (offset.left) + (img.width()/2);
var center_y = (offset.top) + (img.height()/2);
var mouse_x = evt.pageX; var mouse_y = evt.pageY;
var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
var degree = (radians * (180 / Math.PI) * -1) + 90;
img.css('-webkit-transform-origin', '15px 50%');
img.css('-moz-transform', 'rotate('+degree+'deg)');
img.css('-webkit-transform', 'rotate('+degree+'deg)');
img.css('-o-transform', 'rotate('+degree+'deg)');
img.css('-ms-transform', 'rotate('+degree+'deg)');
}
$(document).mousemove(mouse);
}
First of all I say the code is taken from another post. The problem is that I want to limit the rotation of the DIV 75 degrees.
I want to make that the DIV can't point behind itself. Thanks in advance!
just add the following before you set the css:
if( Math.abs(degree) >= 75) { return; }
http://jsfiddle.net/JqBZb/551/
Related
I have the following code in Adobe Animate HTML5 Canvas using JavaScript/Easel.js/Create.js. The code enables an object to be dragged around a circle.
I now want to change this to function for a half circle, the top half. The object needs to be moved CW and CCW, and stop at the ends of the half circle (so backwards and forwards, but not right around a circle).
stage.enableMouseOver();
var knob_X = 454;
var knob_Y = 169;
var radius = 80;
var streakAngle;
root.streakRotatorKnob.addEventListener("mouseover", mouseOverKnob.bind(this));
root.streakRotatorKnob.x = knob_X + radius * Math.cos(0);
root.streakRotatorKnob.y = knob_Y + radius * Math.sin(0);
function mouseOverKnob(evt)
{
root.streakRotatorKnob.addEventListener("pressmove", moveF);
}
function moveF(evt) {
var rads = Math.atan2(stage.mouseY - knob_Y, stage.mouseX - knob_X);
var atan_knob = Math.atan2(evt.currentTarget.y, evt.currentTarget.x);
evt.currentTarget.x = knob_X + radius * Math.cos(rads);
evt.currentTarget.y = knob_Y + radius * Math.sin(rads);
stage.update();
console.log(atan_knob);
streakAngle = Math.round(((rads * 180 / Math.PI) * 100) / 100);
if (leye == true) {
root.streakMainLeft.rotation = streakAngle + 90;
} else if (reye == true) {
root.streakMainRight.rotation = streakAngle + 90;
}
root.streakAngle.text = streakAngle + "\u00B0";
}
The video link below in the first half of the video shows what I currently have working in this code.
The last half of the video shows what I want.
I would change the circle graphic to a half circle...
https://youtu.be/781GzUulX1c
I can't understand exactly what you want.
It would be better if you shared the source file directly.
I prepared an example, can you download and examine it?
we.tl/t-oflBkdma0o
I also convey that I cannot edit through your codes.
stage.enableMouseOver();
var root = this;
var knob_X = 454;
var knob_Y = 169;
var radius = 80;
var streakAngle;
var leye = true;
root.streakRotatorKnob.addEventListener("mouseover", mouseOverKnob.bind(this));
root.streakRotatorKnob.x = knob_X + radius * Math.cos(0);
root.streakRotatorKnob.y = knob_Y + radius * Math.sin(0);
function mouseOverKnob(evt)
{
root.streakRotatorKnob.addEventListener("pressmove", moveF);
}
function moveF(evt) {
var rads = Math.atan2(stage.mouseY/stage.scaleY - knob_Y, stage.mouseX/stage.scaleX - knob_X);
var atan_knob = Math.atan2(evt.currentTarget.y, evt.currentTarget.x);
streakAngle = Math.round(((rads * 180 / Math.PI) * 100) / 100);
if(streakAngle>=-90 && streakAngle<=90)
{
evt.currentTarget.x = knob_X + radius * Math.cos(rads);
evt.currentTarget.y = knob_Y + radius * Math.sin(rads);
}
stage.update();
//console.log("atan_knob: "+atan_knob);
/*
if (leye == true) {
root.streakMainLeft.rotation = streakAngle + 90;
} else if (reye == true) {
root.streakMainRight.rotation = streakAngle + 90;
}
*/
console.log("streakAngle: " +streakAngle);
//root.streakAngle.text = streakAngle + "\u00B0";
}
I have a parent div that displays a graph that can be rotated.
I want to place dots at mouse clicks. This is my place function:
module.exports.place = function (event, id) {
let div = document.createElement("div");
div.className = "container-fluid";
div.id = id;
let avakio_wrapper = document.getElementById("avakio");
avakio_wrapper.appendChild(div);
let parentPosition = getPosition(event.currentTarget);
xPosition = event.clientX - parentPosition.x - div.clientWidth / 2;
yPosition = event.clientY - parentPosition.y - div.clientHeight / 2;
div.style.left = xPosition + "px";
div.style.top = yPosition + "px";
}
When the graph isn't rotated it works as expected, though when i rotate the graph it places the dot first under mouse click and then it applies the rotation transform and moves it. I have screenshots showing what i describe. The red dot is showing the click position. I appreciate any help.
UPDATE!!!!
Here is an implementation of my code:
// Calculate clicking pos based of top-left corner of div
xPosition = event.clientX - parentPosition.x - dot.clientWidth / 2;
yPosition = event.clientY - parentPosition.y - dot.clientHeight / 2;
let centerx = parentDiv.clientWidth / 2;
let centery = parentDiv.clientHeight / 2;
// Find Rotation angle
let rot = parentDiv.style.getPropertyValue("transform");
if (rot != "") {
rot = rot.split("(")[1].split("deg")[0];
} else {
rot = 0;
}
// Perform Invert Rotation
xPosition = centerx - xPosition;
yPosition = centery - yPosition;
let xRot =
xPosition * Math.cos(rot * (Math.PI / 180)) +
yPosition * Math.sin(rot * (Math.PI / 180));
let yRot =
-xPosition * Math.sin(rot * (Math.PI / 180)) +
yPosition * Math.cos(rot * (Math.PI / 180));
// Calculate again based top-left corner
dot.style.left = centerx - xRot + "px";
dot.style.top = centery - yRot + "px";
However i run on some issues. When the parent div is rotated the dots are placed some pixels off based on the rotation angle. I have some screenshots of different rotation angles. I' ve done the maths on paper for many days but still can't figure out what causing it.
Here an application of the math.
They still move a bit (I think that is because of calculus imprecision). I'm kinda stuck here, maybe some will be able to fix it.
function rotate() {
let parent = document.getElementById("parent")
let rot = document.getElementById("value").value
let transform = parent.style.transform
transform = "rotate("+ (Number(transform.substr(7,transform.length-11)) + Number(rot)) +"deg)"
parent.style.transform = transform
let dots = document.getElementsByClassName("dot")
for (i = 0; i < dots.length; i++)
dotpos(parent, dots[i],rot)
}
function dotpos(parent,dot,rot) {
rot = rot * (Math.PI/180) //convert to radian
let xCenter = parent.offsetWidth /2
let yCenter = parent.offsetHeight /2
let x = xCenter - Number(dot.style.left.substring(0, dot.style.left.length - 2))
let y = yCenter - Number(dot.style.top.substring(0, dot.style.top.length - 2))
let xRot = x*Math.cos(rot)+y*Math.sin(rot)
let yRot = -x*Math.sin(rot)+y*Math.cos(rot)
dot.style.left = xCenter -xRot + "px"
dot.style.top = yCenter -yRot + "px"
}
#parent {
height: 100px;
width : 100px;
background-color: grey;
}
.dot {
height: 5px;
width : 5px;
border-radius: 5px;
background-color: red;
}
<div id="parent" style = "transform:rotate(0deg)">
<div class ="dot" style="position:relative;left:15px;top:30px;"></div>
<div class ="dot" style="position:relative;left:60px;top:50px;"></div>
</div>
<form>
<input type="text" id="value"><br>
</form>
<button onclick="rotate()">rotate</button>
I want to create a spiral through canvas but in alphanumeric...
just like the code below but in alphanumeric..
it will start at A and end at 0...
<!DOCTYPE HTML>
<html><body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var centerX = 150;
var centerY = 150;
cxt.moveTo(centerX, centerY);
var gap = 1.8; // increase this for spacing between spiral lines
var STEPS_PER_ROTATION = 60; // increasing this makes the curve smoother
var increment = 2*Math.PI/STEPS_PER_ROTATION;
var theta = increment;
while( theta < 20*Math.PI) {
var newX = centerX + theta * Math.cos(theta) * gap;
var newY = centerY + theta * Math.sin(theta) * gap;
cxt.lineTo(newX, newY);
theta = theta + increment;
}
cxt.stroke(); // draw the spiral
</script></body></html>
Rotating and drawing text in the Canvas object isn't the easiest thing to do for someone who hasn't done it before. But that doesn't mean that it's hard.
The first part is drawing the text, so to start conversion we have to remove cxt.lineTo(newX, newY) and add cxt.fillText(char, newX, newY) in
while(theta < 20*Math.PI) {
var newX = centerX + theta * Math.cos(theta) * gap;
var newY = centerY + theta * Math.sin(theta) * gap;
//cxt.lineTo(newX, newY);
cxt.fillText('a', newX, newY);
theta = theta + increment;
}
This will put the character a at every curve-point that the spiral was using, but they all face the same default text direction. So to fix that you must rotate the characters. Using cxt.rotate() and Math.atan2() you can rotate the text for that point in the circle. Using cxt.save(), cxt.restore(), and cxt.translate() you won't have to unrotate or use math to position your characters properly. Putting these together you get:
while( theta < 20*Math.PI) {
var newX = centerX + theta * Math.cos(theta) * gap;
var newY = centerY + theta * Math.sin(theta) * gap;
cxt.save()
cxt.translate(newX, newY);
cxt.rotate(Math.atan2(centerY - newY, centerX - newX));
cxt.fillText('a', 0, 0);
cxt.restore();
theta = theta + increment;
}
By adding (0..2)*Math.PI to the rotation, you can then add a static rotation to the characters, making them all face inwards, or all face outwards, etc.
Adding all of this together, along with a counter and a character map, you can make the spiral slowly grow in font size and get what I believe is roughly what you were looking for.
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="300" style="border:1px solid #c3c3c3;"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var centerX = 150;
var centerY = 150;
cxt.moveTo(centerX, centerY);
var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890'.split(''); // character map for spiral
var gap = 3; // increase this for spacing between spiral lines
var rotation = 0; // value between 0..1 that rotates the characters 0..360 degrees.
var spread = 1; // increasing this makes the spread more
var spirals = 10; // number of spirals
var STEPS_PER_ROTATION = 60; // increasing this adds more characters
var increment = spread*2*Math.PI/STEPS_PER_ROTATION;
var theta = increment;
var maxFont = 16;
cxt.font = '0px sans';
cxt.textBaseline = 'center';
let spiralCount = 2*spirals*Math.PI;
let char = 0;
while(theta < spiralCount) {
var newX = centerX + theta * Math.cos(theta) * gap;
var newY = centerY + theta * Math.sin(theta) * gap;
var rot = Math.atan2(newY - centerY, newX - centerX);
cxt.save();
cxt.translate(newX, newY);
cxt.rotate(rot + (rotation*2*Math.PI));
cxt.font = (maxFont*(theta/spiralCount)) + 'px sans';
cxt.fillText(characters[char], 0, 0);
cxt.restore();
theta = theta + increment;
char++;
if (char > characters.length - 1) char = 0;
}
cxt.stroke(); // draw the spiral
</script>
</body>
</html>
I'm using svg shapes and I want to rotate those shapes. Here is the javascript code I'm using:
$scope.onobjectRotate = function (e)
{
$scope.isSaved = false;
var draggable = e.currentTarget;
e.clientX = e.clientX + 20;
e.clientY = e.clientY + 30;
var index = parseInt(draggable.attr('data-index'));
$scope.shapeobjects[index].isactive = true;
var R2D = 180 * 7 / 22;//radian to degree value(180/pie)
var center_x = $scope.shapeobjects[index].left + ($scope.shapeobjects[index].width / 2);
var center_y = $scope.shapeobjects[index].top + ($scope.shapeobjects[index].height / 2);
x = e.clientX - center_x;
y = e.clientY - center_y;
var radians = y / x;//slope in radians
var degree = radians * R2D;
$scope.shapeobjects[index].rotation = degree;
$scope.$apply();
}
It is working to some extent, in that it is rotating in a clockwise direction only. But how can I rotate both clockwise and anti-clockwise directions ?
Okay, so I got most of this done. Here is the code:
function gi(a) {
return document.getElementById(a)
}
gameworld = document.getElementById('GameWorld');
character = document.getElementById('character');
var oldvX = 30;
var oldvY = 30;
gameworld.addEventListener('click', function(e) {
var offsetX = e.offsetX;
var offsetY = e.offsetY;
var element = e.target;
character.style.left = offsetX + 'px';
character.style.top = offsetY + 'px';
});
setInterval(function() {
monster = gi('monster');
oldvX += 10;
oldvY += 10;
gb = gameworld.getBoundingClientRect();
cb = character.getBoundingClientRect();
oldvX += cb.left / 10;
oldvY += cb.top / 10;
if (oldvX >= (cb.left)) {
return
}
if (oldvY >= (cb.top)) {
return
}
monster.style.left = oldvX + 'px';
monster.style.top = oldvY + 'px';
}, 500);
And here is the jsfiddle:
https://jsfiddle.net/g43nxhcw/12/
As you can see, the monster is making its way towards the player via the players' getBoundingClientRect(). My dilemma is: When I move around the red square, the monster is not following my character. I am not sure how to accomplish this or if this is even possible.
You should calculate a direction vector
vx = cb.left - parseInt(monster.style.left);
vy = cb.top - parseInt(monster.style.top);
vl = Math.sqrt(vx*vx+vy*vy);
vx = vx / vl
vy = vy / vl
it always have the length 1so you can multiply with the step size
vx = vx * 10
vy = vy * 10
and make it chase you like your little friend:
monster.style.left=(parseInt(monster.style.left) + vx) +'px';
monster.style.top=(parseInt(monster.style.top) + vy)+'px';
there is something wrong with your detection of collision also..
but I wont cover that here
https://jsfiddle.net/g43nxhcw/13/