Animate polygon point on a circle with Paper.js - javascript

I need to animate a point (called segment in Paper.js) of a polygon, rotating it on a circle with origin in the original polygon point. See the image below:
I'm trying to do it with this code:
// Draw the polygon
var polygon = new Path.RegularPolygon({
center: [100, 100],
sides: 8,
radius: 80,
});
// Animate
view.onFrame = function (event) {
var offset = new Point(Math.cos(event.time*2), Math.sin(event.time*2));
polygon.firstSegment.point = polygon.firstSegment.point.add(offset);
};
but I get two problems:
the origin of the circle is wrong
after some times of animation it starts to rotate in some strange and (apparently) randomly ways. It seems that it changes the circle origin
Here the whole code to see it in action:
https://codepen.io/anon/pen/xezQpb
Someone can helps? Thanks

The problem is that at each frame you refer to the position of the first segment which has moved a bit during the previous frame, so the offset sums up.
Instead, just record the center at the beginning and offset from that point :
var center = polygon.firstSegment.point.clone();
[...]
polygon.firstSegment.point = center.add(offset);
https://codepen.io/anon/pen/YMjWBZ

Related

(matterJS) Need to update vertices in Bodies.fromVertices without moving the position of the polygon

Im working in a videogame made with MatterJS,
Im using Bodies.fromVertices to create an irregular polygon.
This vertices of this polygon should be dynamic, so should change in time.
I already have the values of the new vertices in each frame, so I only need to set it to the polygon.
Body.setVertices didnt work for me, so the only way I founded to do that was removing the polygon and creating another one with the new vertices, in the same position, for each frame.
All is working smoothly except for the position of the polygon.
The position is generated around the center of mass, and its impossible to me to have always the same position, the polygon moves chaotically everywhere when I change the vertices.
I tryied by calculating the width/height of the polygon with the bounds.min/max/.x/.y, and move it but its now working, i think because the polygon can take any shape, you never know where will be positioned and how to compensate for that movement.
Do you know if there is another way to set the new vertices without remove/create the previous polygon, or if there is any way to get this work as it is?
This is the code where I remove the previous polygon, and I add the new one. The variable "vert" have new vertices each frame. "xPos" and "yPos" is where i want the polygon, this value never changes but the polygon is moving anyway.
Composite.remove(engine.world, groundFromVertices);
groundFromVertices = Bodies.fromVertices(xPos, yPos, vert, {isStatic : true,
render: {
fillStyle: 'red',
strokeStyle: 'white',
lineWidth: 5
}}, false, 0, 0, 0, 0);
Composite.add(engine.world, groundFromVertices);
Thank you so much in advice

get straight line rotation angle in Google apps script

Trying to get rotation angle of straight line with getRotation() method but it always returning 0.0
Tried this method:
https://developers.google.com/apps-script/reference/slides/line#getrotation
Getting output:
on line move from top or bottom always getting rotation 0.0.
function lineRotation() {
var selection = SlidesApp.getActivePresentation().getSelection();
if(selection.getPageElementRange() !== null){
var pageElements = selection.getPageElementRange().getPageElements()
// Iterate each page elements
pageElements.forEach(function(item, index) {
if(pageElements[index].getPageElementType() == 'LINE'){
var rotation = pageElements[index].asLine().getRotation();
}else{
SlidesApp.getUi().alert('Please select line.');
}
});
}else{
SlidesApp.getUi().alert('Please select elements.');
}
}
Desired output required: Line rotation in angle either it moved from top or bottom.
Update:
Future scope - I want to get rotation and set rotation of line. If Line inclination < 45° ==> rotate horizontally or Line inclination > 45° ==> rotate vertically. https://prnt.sc/uervkw (line screenshot)
Rotation != angle of the line:
Check Line rotation:
Like other page elements, a line's rotation isn't the vertical angle of the line, but the rotation of its bounding box. When you create a line with specified start and end points, its rotation is always 0°.
If you want to get the actual rotation of a line, based on its start and end points, you have to get the position of these points.
You can get these positions via getStart() and getEnd(). Both these two methods return a Point, whose coordinates can be accessed via getX() and getY().
Based on these coordinates, you can calculate the angle between the line and the axis you desire using some basic trigonometry.

Pan Zoom behaviour using EaselJS

I’m having some trouble incorporating pan/zoom behaviour with the ability to also drag-move some shapes around on the canvas, using EaselJS.
I want to be able to move the shape ONLY if I mousedown on it, but if I mousedown on the stage (i.e. not on a shape), then I want to be able to pan the stage.
This behaviour needs to be consistent regardless of the ‘zoom’ level (which is altered by the mousewheel).
I have read this: How to stop the event bubble in easljs? Which suggests that the stage mousedown events will fire regardless of whether I have clicked on a shape or empty space, so it would be better to create a ‘background’ shape to capture my mousedown events that are not on a ‘proper’ shape.
This fiddle is how I have set it up: https://jsfiddle.net/hmcleay/mzheuLbg/
var stage = new createjs.Stage("myCanvas");
console.log('stage.scaleX: ', stage.scaleX);
console.log('stage.scaleY: ', stage.scaleY);
function addCircle(r,x,y){
var g=new createjs.Graphics().beginFill("#ff0000").drawCircle(0,0,r);
var s=new createjs.Shape(g)
s.x=x;
s.y=y;
s.on('pressmove', function(ev) {
var localpos = stage.globalToLocal(ev.stageX, ev.stageY)
s.x = localpos.x;
s.y = localpos.y;
stage.update();
});
stage.addChild(s);
stage.update();
}
// create a rectangle 'background' Shape object to cover the stage (to allow for capturing mouse drags on anything except other shapes).
bg = new createjs.Shape();
bg.graphics.beginFill("LightGray").drawRect(10, 10, stage.canvas.width - 20, stage.canvas.height - 20); //deliberately smaller for debugging purposes (easier to see if it moves).
bg.x = 0;
bg.y = 0;
stage.addChild(bg);
stage.update();
//create a rectangle frame to represent the position of the stage.
stageborder = new createjs.Shape();
stageborder.graphics.beginStroke("Black").drawRect(0, 0, stage.canvas.width, stage.canvas.height);
stageborder.x = 0;
stageborder.y = 0;
stage.addChild(stageborder);
stage.update();
// MOUSEWHEEL ZOOM LISTENER - anywhere on canvas.
var factor
canvas.addEventListener("wheel", function(e){
if(Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)))>0){
factor = 1.1;
} else {
factor = 1/1.1;
}
var local = stage.globalToLocal(stage.mouseX, stage.mouseY);
stage.regX=local.x;
stage.regY=local.y;
stage.x=stage.mouseX;
stage.y=stage.mouseY;
stage.scaleX = stage.scaleX * factor;
stage.scaleY = stage.scaleY * factor;
//re-size the 'background' shape to be the same as the canvas size.
bg.graphics.command.w = bg.graphics.command.w / factor;
bg.graphics.command.h = bg.graphics.command.h / factor;
// re-position the 'background' shape to it's original position of (0,0) in the global space.
var localzero = stage.globalToLocal(0, 0);
bg.x = localzero.x;
bg.y = localzero.y;
stage.update();
});
// listener to add circles to the canvas.
canvas.addEventListener('dblclick', function(){
var localpos = stage.globalToLocal(stage.mouseX, stage.mouseY);
addCircle(10, localpos.x, localpos.y);
});
bg.addEventListener("mousedown", function(ev1){
// purpose of this listener is to be able to capture drag events on the 'background' to pan the whole stage.
// it needs to be a separate 'shape' object (rather than the stage itself), so that it doesn't fire when other shape objects are drag-moved around on the stage.
// get the initial positions of the stage, background, and mousedown.
var mousedownPos0 = {'x': ev1.stageX, 'y': ev1.stageY};
var stagePos0 = {'x': stage.x, 'y': stage.y};
var bgPos0 = {'x': bg.x, 'y': bg.y};
bg.addEventListener('pressmove', function(ev2){
//logic is to pan the stage, which will automatically pan all of it's children (shapes).
// except we want the 'background' shape to stay where it is, so we need to offset it in the opposite direction to the stage movement so that it stays where it is.
stageDelta = {'x': ev2.stageX - mousedownPos0.x, 'y': ev2.stageY - mousedownPos0.y};
//adjust the stage position
stage.x = stagePos0.x + stageDelta.x;
stage.y = stagePos0.y + stageDelta.y;
// return the 'background' shape to global(0,0), so that it doesn't move with the stage.
var localzero = stage.globalToLocal(0,0);
bg.x = localzero.x;
bg.y = localzero.y;
stage.update();
});
});
The grey box is my background shape. I have deliberately made it slightly smaller than the canvas, so that I can see where it is (useful for debugging).
Double click anywhere on the canvas to add some red circles.
If you drag a circle, it only moves that circle.
If you drag on the grey ‘background’ area in between circles, it moves the whole stage (and therefore all the child shapes belonging to the stage).
Because the grey background is also a child of the stage, it wants to move with it. So I have included some code to always return that grey box back to where it started.
The black border represents the position of the ‘stage’, I just added it to help visualise where the stage is.
The mousewheel zoom control is based on the answer to this question: EaselJS - broken panning on zoomed image
Similar to drag-panning, when zooming I have to adjust the size and position of the grey ‘background’ box so that it renders in the same position on the canvas.
However, it doesn’t stay exactly where I want it to… it seems to creep up towards the top left corner of the canvas when I zoom out.
I’ve spent quite some time trying to diagnose this behaviour and can’t find out why it’s happening. I suspect it may have something to do with rounding.. but I’m really not sure.
Can anyone explain why my grey box isn't staying stationary when I zoom in and out?
An alternative method would be to scrap the ‘background’ shape used for capturing mousedown events that aren’t on a ‘proper’ shape.
Instead, it might be possible to use the ‘stage’ mousedown event, but prevent it from moving the stage if the mouse is over a ‘shape’.
Would this be a better way of handling this behaviour? Any suggestions how to prevent it from moving the stage?
Thanks in advance,
Hugh.
Ok,
So as usually happens, after finally asking for help, I managed to work out the problem.
The issue was caused by making the background shape (grey rectangle) 10px smaller than the canvas, so that I could see its position more clearly (to assist with debugging). How ironic that this offset was causing the issue.
The 10px offset was not being converted into the 'local' space when the zoom was applied.
By making the grey rectangle's graphic position at (0,0) with width and height equal to that of the canvas, the problem went away!
Hope this is of use to someone at some point in time.
Cheers,
Hugh.

leaflet circle drawing / editing issue

I am working on leaflet for the very first time and facing the issue with drawing circles and editing (changing location of circle).
The problems I am facing are :-
Editing (moving) circle from one location to another changes its radius.
Note: Pls try to create circle on top of map in given fiddle and then move it to the bottom by clicking edit button.
If I create circle on top section of map it works fine. But If I create circle on bottom of map it only prints a single DOT on map.
I checked few examples and it works fine everywhere.
Here is the working example where circle creation and moving circle is completely fine.
I am not using the geographic map like google maps. I am using and static image as it is my project requirement.
Here is the fiddle of my code.
Just using following code to enable drawing circle :
enabled : this.options.circle,
handler : new L.Draw.Circle(map,this.options.circle),
title : L.drawLocal.draw.toolbar.buttons.circle
What you're seeing is distortion in distance inherent in the mercator projection (and the Google Mercator projection based off it that is inherent to most online maps). Because your map starts at zoom 1, dragging the circle marker north/south will cause a lot of distortion.
So, rather than georeference your image to a global bounding box, try georeferencing it to something much smaller. In your case, your are adding your image overlay relative to the maxZoom, so by increasing maxZoom, your image will be overlayed over a smaller area of the globe, and you will see less (or no) distortions across latitudes.
I changed the maxZoom from 4 to 14, and the result looked like it worked well: fiddle here:
var w = 553, h = 329, url = 'https://kathleenmillar.files.wordpress.com/2012/10/picture2.png';
var map = L.map('map', {
minZoom : 10,
maxZoom : 14,
center : [ w / 2, h / 2 ],
zoom : 11,
crs : L.CRS.Simple
});
// calculate the edges of the image, in coordinate space
var southWest = map.unproject([ 0, h ], map.getMaxZoom() - 3);
var northEast = map.unproject([ w, 0 ], map.getMaxZoom() - 3);
var bounds = new L.LatLngBounds(southWest, northEast);

Rotating a shape in KineticJS seems to move it out of sync with it's group

I am working on some image viewing tools in KineticJS. I have a rotate tool. When you move the mouse over an image, a line appears from the centre of the image to the mouse position, and then when you click and move, the line follows and the image rotates around that point, in sync with the line. This works great.
My issue is, I have the following set up:
Canvas->
Stage->
Layer->
GroupA->
GroupB->
Image
This is because I draw tabs for options on GroupA and regard it as a container for the image. GroupB is used because I flip GroupB to flip the image ( and down the track, any objects like Text and Paths that I add to the image ), so that it flips but stays in place. This all works well. I am also hoping when I offer zoom, to zoom groupb and thus zoom anything drawn on the image, but for groupA to create clipping and continue to support drag buttons, etc.
The object I am rotating, is GroupA. Here is the method I call to set up rotation:
this.init = function(control)
{
console.log("Initing rotate for : " + control.id());
RotateTool.isMouseDown = false;
RotateTool.startRot = isNaN(control.getRotationDeg()) ? 0 : control.getRotationDeg();
RotateTool.lastAngle = control.parent.rotation() / RotateTool.factor;
RotateTool.startAngle = control.parent.rotation();
this.image = control.parent;
var center = this.getCentrePoint();
RotateTool.middleX = this.image.getAbsolutePosition().x + center.x;
RotateTool.middleY = this.image.getAbsolutePosition().y + center.y;
this.image.x(this.image.x() + center.x - this.image.offsetX());
this.image.y(this.image.y() + center.y - this.image.offsetY());
this.image.offsetX(center.x);
this.image.offsetY(center.y);
}
getCentrePoint is a method that uses trig to get the size of the image, based on the rotation. As I draw a line to the centre of the image, I can tell it's working well, to start with. I've also stepped in to it and it always returns values only slightly higher than the actual width and height, they always look like they should be about what I'd expect, for the angle of the image.
Here is the code I use on mouse move to rotate the image:
this.layerMouseMove = function (evt, layer)
{
if (RotateTool.isRotating == false)
return;
if (!Util.isNull(this.image) && !Util.isNull(this.line))
{
if (Item.moving && !RotateTool.isRotating)
{
console.log("layer mousemove item moving");
RotateTool.layerMouseUp(evt, layer);
}
else
{
var pt = this.translatePoint(evt.x, evt.y);
var x = pt.x;
var y = pt.y;
var end = this.getPoint(x, y, .8);
RotateTool.line.points([this.middleX, this.middleY, end.x, end.y]);
RotateTool.line.parent.draw();
RotateTool.sign.x(x - 20);
RotateTool.sign.y(y - 20);
var angle = Util.findAngle({ x: RotateTool.startX, y: RotateTool.startY }, { x: x, y: y }, { x: RotateTool.middleX, y: RotateTool.middleY });
var newRot = (angle) + RotateTool.startAngle;
RotateTool.image.rotation(newRot);
console.log(newRot);
}
}
}
Much of this code is ephemeral, it's maintaining the line ( which is 80% of the length from the centre to my mouse, as I also show a rotate icon, over the mouse.
Sorry for the long windedness, I'm trying to make sure I am clear, and that it's obvious that I've done a lot of work before asking for help.
So, here is my issue. After I've rotated a few times, when I click again, the 'centre' point that the line draws to, is way off the bottom right of my screen, and if I set a break point, sure enough, the absolute position of my groups are no longer in sync. This seems to me like my rotation has moved the image in the manner I hoped, but moved my group off screen. When I set offsetX and offsetY, do I need to also set it on all the children ? But, it's the bottom child I can see, and the top group I set those things on, so I don't really understand how this is happening.
I do notice my image jumps a few pixels when I move the mouse over it ( which is when the init method is called ) so I feel like perhaps I am just out slightly somewhere, and it's causing this flow on effect. I've done some more testing, and my image always jumps slightly up and to the right when I move the mouse over it, and the rotate tool continues to work reliably, so long as I don't move the mouse over the image again, causing my init method to call. It seems like every time this is called, is when it breaks. So, I could just call it once, but I'd have to associate the data with the image then, for the simple reason that once I have many images, I'll need to change my data as my selected image changes. Either way, I'd prefer to understand and resolve the issue, than just hide it.
Any help appreciated.

Categories

Resources