I am trying to use these easing functions from this page;
https://gist.github.com/gre/1650294
In my canvas project, I am wondering if anyone could shed some light on how to use these with say a rectangle on my canvas which has an x and y property.
I understand t is time, (I have successfully managed to get the delta time of my frame intervals, not sure if this is needed).
How can I use these functions to make the easing effects be applied to my rectangle which has an x and y property which are the co-ordinates of where it should be placed onto the canvas?
I know this question is kinda vague, but I really do not understand these functions and how they should be integrated with a rectangle on the canvas.
Thanks
You can use it like this -
(Click here to see working example at jsfiddle)
var x = 100; //final position
var t = 0; //0-1, this is what you change in animation loop
In your loop:
function myLoop() {
var tx = EasingFunctions.easeInQuad(t) * x;
// set element by tx
if (t < 1) {
t += 0.1; //determines speed
requestAnimationFrame(myLoop);
//setTimeout(myLoop, 16); //option to above
}
}
See also:
http://greweb.me/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/
I know it's nice to write you own code; but should you want to use a library then this one is pretty good:
Tween JS
It uses the easing methods you referenced as supports chaining.
Related
I'm doing a motion detection program and want to determine if a person is moving their hand in a clockwise or counterclockwise motion. Would someone know the best way to do this? (I'm coding in AS3, but any ECMA-like code would help).
I believe one way would be to determine if, for instance, a left-right is followed by a top-bottom or a bottom-top, and so on — is there a better way?
If you have a point of reference (0,0), you can sample the change in angle over time:
var sprite:Sprite = new Sprite();
var samples:Array = [];
setInterval(function(){
var len = samples.push(Math.atan2(sprite.mouseY,sprite.mouseX));
if ( len >=2 ) {
if ( samples[len-2]-samples[len-1] > 0 ) {
// clockwise
} else {
// counter-clockwise
}
}
},1000/stage.frameRate);
The reference is the top-left of the sprite (or its natural 0,0 point by atan2), so this snippet samples the mouse coordinate relative to the sprite.
Also, the more samples you consider (I'm only sampling 2 samples[len-2] and samples[len-1]) the better the decision for cw or ccw.
Lastly, and most importantly, my script does consider negative numbers in the radian calculations, it assumes everything is positive - this would require some tweeking.
PS: You'll want to clear samples every now and again since the array length will max out.
My script is incomplete, and I'd welcome edits, suggestions and elaborations. My hope is that it gives you something to consider and work from.
I'm working on a simple image crop where the user draws a line with the mouse around an area that they want to keep. When they confirm, the rest of the image will be cropped out. Here's how I'm currently handling said cropping:
var data = c.getImageData(0,0,canvas.width,canvas.height);
for (var x = 0; x < data.width; x++) {
for (var y = 0; y < data.height; y++) {
if (!c.isPointInPath(x,y)) {
var n = x + (data.width * y);
var index = n*4;
data.data[index+3] = 0;
}
}
}
However, this can bog down really quickly. The less of the image you try to retain, the faster it goes, but even saving 30% of the image (canvas is 800x800) causes it to hang for several seconds. Is there a faster way to go about this?
I don't really understand why you are diving into pixel details to manipulate your cropping image functionality. It's understandable as bigger the image is get as more time is needed for cropping out the rest of the image, because practically with iterating over a two dimensional array of pixels the processing time needed for the operation is exponentially increasing with the increasing in size of the pixels map.
So my suggestion would be to try to remake the function without to even touch the getImageData and putImageData function. It's useless. I would make in the following way:
Obtain the pixel coordinates at the mouse down.
Create an event listener for the mouse move.
Create a semi-transparent image over the original image and use the fillRect function to draw into the created canvas.
Create an event listener for mouse up.
Obtain the pixel coordinates at the mouse up.
Calculate the coordinates of the resulting square.
Draw the resulting image into the canvas using as parameters the square coordinates.
As a final step draw the content of the canvas to an image.
This way you will save a lot of overhead on image cropping processing.
Here is a script for your reference: https://github.com/codepo8/canvascropper/blob/master/canvascrop.js
There is no real way to speed it up when you have to use a user defined shape, but the bogging down can be handled with a worker.
Some ideas:
Restrict getImageData to the bounding box of the polygon the user draws.
Put data.height, data.width etc. used inside the loop in a variable.
Maybe you can split up inside/outside tests and setting the imagedata alpha value.
Maybe even draw the polygon to a black and white imagedata object, then get the difference between the two?
Can you share the isPointInPath(x,y) function?
I'm writing a paint program that uses shape brushes to draw by using the matrix function.
Everything works well aside from the fact that it's not smooth at all. There will be gaps in the painting if the mouse is moved at a high speed.
I've looked everywhere but haven't been able to find any solution.
The code basically looks like this:
//Press mouse within container. Uses Matrix to draw instances of the brush.
private function handleMouseDown_drawContainer(e:MouseEvent):void
{
_matrix.identity();
_matrix.translate(mouseX - 10, mouseY - 30);
_layout.bitmapData.draw(_layout.brush, _matrix);
_layout.drawContainer.addEventListener(MouseEvent.MOUSE_MOVE, handleMouseMove_drawContainer);
_layout.drawContainer.addEventListener(MouseEvent.MOUSE_UP, handleMouseUp_drawContainer)
}
//Move mouse within container. Uses Matrix to draw instances of the brush.
private function handleMouseMove_drawContainer(e:MouseEvent):void
{
_matrix.identity();
_matrix.translate(mouseX - 10, mouseY - 30);
_layout.bitmapData.draw(_layout.brush, _matrix);
}
If anyone could help me figure out how to smooth out the drawing, I'd be forever grateful! =p
Thanks in advance.
You probably need some kind of interpolation between the mouse positions... there are of course many ways, I'll describe one very easy to implement but a bit hard to fine tune. Basically instead of drawing in each mouse position, you use an easing equation that follows the mouse with some delay... this way the described line will be a bit smoother, and will draw a few times between each mouse position.
So instead of doing (pseudocode):
onMouseMove {
draw(mouseX, mouseY);
}
You do something like:
x = 0;
y = 0;
onEnterFrame {
x += (mouseX - x) * 0.2;
y += (mouseY - y) * 0.2;
draw(x, y);
}
Although maybe what you really need is a way to limit the maximum distance between points, so if the mouse moves more in one frame, you interpolate points between the two positions and draw as many times as it's needed.
Or if you're looking for smoother lines (avoid sharp corners) maybe you also need to use beziers to control the resulting line.
Anyway, it all depends on the kind of drawing you're looking for.
I am new to AS3 scripting. I have a wide image (movie clip "preform_mc") that I am masking and would like for right button ("right_mc") to dynamically move the image.
The code below moves the image to the right, but its not a dynamic movement (would like an animation effect) and I cant control when the image should stop moving, basically a max amount for the x coordinate.
any help is greatly appreciated!
right_mc.addEventListener(MouseEvent.CLICK, fl_MouseClickHandler_2);
function fl_MouseClickHandler_2(event:MouseEvent):void
{
preform_mc.x += -100;
}
Take a look at Greensock Tweening Library. Using that library you'll be able to easily make a smooth animation of a moving image. For the control of max X you should write an if statement to check whether preform_mc.x is more than the max amount you want.
Code will look something like this:
var min_x:int = -500;
function fl_MouseClickHandler_2(event:MouseEvent):void
{
if(min_x < preform_mc.x)
TweenLite.to(preform_mc, 0.5, {x:preform_mc.x - 100}); // using the library I provided a link to
}
I am struggling with this for 3 days now, would appreciate your help!
I am trying to make simple continuous animation on y axis.
The problem is that the animation is not smooth!!!
It has jumps and hiccups.
It is hard to see in the beginning, but once you see it, you can't get rid of it.
Here is an example:
http://dl.dropbox.com/u/19570262/movementTest.swf
Here is the source file:
http://dl.dropbox.com/u/19570262/movementTest.fla
This particular code is pretty simple:
import flash.events.Event;
addEventListener(Event.ENTER_FRAME, moveRoad);
var deltaY:Number = 0;
function moveRoad(event:Event):void
{
deltaY = (deltaY < stage.stageHeight) ? deltaY + 5 : 0;
road1.y = deltaY;
road2.y = deltaY - road1.height
}
But trust me until now I tried like 20 different solutions which also didn't work.
The solutions I tried until now:
animate by setInterval()
animate by getTime()
animate bitmaps
animate by copyPixels
The only one that worked was using stage3D and Starling! But I can't use it for my project.
Anyone?
You could try using TweenLite and BlitMask
http://www.greensock.com/blitmask/