After Effect has the possibility to apply the a Bezier Surface over an image.
However we want to achieve that affect with AS3.
We can use DisplacementMapFilter, using a mapBitmap for each frame for the bezier effect..
How can we generate each of those bitmaps?
The only information that after effect gives are the 12 control points for 12 key frames each one.
How can we with that information generate those mapBitmap that the DisplacementMapFilter operation requests?
Maybe after effect has another information that we are missing?
Thanks in advance.
I'm asuming you're trying to come up with something like this: http://fatlinesofcode.philipandrews.org/2011/02/20/warping-bitmaps-with-a-bezier-surface/
Displacement map filter has limitations that would make this difficult.
The trick is to break up the image into triangles and warp these triangles along the bezier lines/surface you like. The more triangles you use the smoother the resulting image.
this is a good place to start : http://www.flashandmath.com/advanced/p10triangles/index.html
here is a more advanced example (without code) http://www.miaumiau.cat/2010/03/simple-surface-editor/ that is using bezier curves
more code here also: http://wonderfl.net/c/rFOlY
you can try looking up more resources with drawTriangles and distort keywords
Related
What the best way to make this kind of transformation: I have 4 pairs of coordinates, and I need to put the corners of my image exactly to them?
Like in photoshop, when you in free transform mode and moving corners of the image while holding ctrl.
Something like that.
If you can use the Flash 10 drawTriangles() method, then this link will provide you with a great explanation of what you are trying to do, with some well documented functioning code. The code is very similar to the solution that romamik provided, however, you will need to calculate the correct t value of the uvtData to get it to render correctly:
To summarize from that link:
Calculate the center point of the rectangle you are trying to draw
Get the distance between each point and the center
Calculate the ratio between the diagonals
use the formula (1/point_distance)*ratio to calculate perspective distortion for each point -- project into a faux 3d space (aka "magic" as the author of the post calls it)
That should produce the effect you are looking for.
If you can't use drawTriangles() then this link provides an alternative, however it wont produce as good of results as the drawTriangles() method.
You can use graphics.drawTriangles.
http://help.adobe.com/en_US/as3/dev/WS84753F1C-5ABE-40b1-A2E4-07D7349976C4.html
This code should do what you need (untested)
graphics.beginBitmapFill(bitmapData);
graphics.drawTriangles(
Vector.<Number>([10,10, 100,10, 10,100, 100,100]),
Vector.<int>([0,1,2, 1,3,2]),
Vector.<Number>([0,0, 1,0, 0,1, 1,1])
);
You can use the DistortImage class ported from the old 3D engine Sandy. A cleaner way would be the make use of rotateX and rotateY but it would require some mathematical pain!
Let's say I have curved path made using a serie of bezierCurveTo() calls. I'd like to make it appear progressively in an animation, by increasing the percentage of it that is drawn frame-after-frame. The problem is that I cannot find a standard way to draw only a part of a canvas path - would someon know of a good way (or even a tricky way) to achieve this?
Sure...and Simon Porritt did all the hard math for us!
jsBezier is a small lib with a function: pointAlongCurveFrom(curve, location, distance) that will let you incrementally plot each point along your Bezier curve.
jsBezier is available on GitHub: https://github.com/sporritt/jsBezier
Just found a small library that does exactly that: https://github.com/camoconnell/lazy-line-painter
It relies on the Raphael lib (http://raphaeljs.com/), and the two put together do not make too big a payload.
Im starting on some simple-to-complex canvas scripting. I want to draw a circle. That's easy. The problem is the circle is drawn right away. What if I wanted the circle to slowly grow (lets say from a vertical line, to a semi circle, to a half circle, to a full circle) Is there any way in canvas to do this (natively) or do I need to make a function that builds and deletes several circles (quickly) to simulate the effect?
If the latter is true, is there any sort of performance hits I should be looking out for?
Thank you!
Any form of animation using canvas requires the canvas to be cleared and the next drawing in the sequence to be made. The Mozilla Development Network has a good tutorial on canvas and canvas animations.
Check out the animate.js library. Its is exactly what you need. Usage is same as jQueryUI.
What you need can be done by the following piece of code:
canvas_element.animateCircle(x,y,r);
There are other optional parameters like animateCircle(x,y,r,{'lineWidth':5, 'lineColour':'red', 'stop': function() {alert('completed');}}) & some other functions. Check the Readme file for details.
I'm trying to check if two objects (e.g. a rectangle and a triangle) on a HTML5 canvas are overlapping each other.
Currently I can only check that by looking at the screen (having set globalCompositeOperation='lighter').
My first idea would have been to scan all over the canvas if the "lighter" (compare code snippet above) color exists in the canvas. But therefor I would have to look at every single pixel which was rather costly for what I need.
Is there a (better) alternative to automatically check if they are overlapping?
Best regards.
The site below explains how to use the Separating Axis Theorem to determine if two convex shapes overlap.
http://www.codezealot.org/archives/55
To use this you will need to know the coordinate data used in contstructing the shapes.
I'm using KImageMapEditor on Linux (Ubuntu) to create an image map. The shapes in the image are a little complex so I'm using the freehand tool to draw them. However, this is really the same as the polygon tool so the shapes have ended up with a lot of points, which has made the HTML pretty huge.
Does anyone know of a way to reduce the complexity of the shapes, like "smoothing out" the lines?
I should also mention the reason I want the shapes to be fairly accurate is because I'm intending to do something like this, where each shape is highlighted on mouseover: http://davidlynch.org/js/maphilight/docs/demo_usa.html
Since users aren't going to click to the pixel, give them some leeway and create a "sloppy" map which roughly outlines each shape instead of clinging to the actual pixel outline.
This is in the same way as you don't expect a click on a link to fail just because you click on the background which shines through the text. You expect the bounding box of the text to act as the click-able area instead of the "black pixels".
Algorithm: Given three consecutive points, eliminate the middle point if the angle created is less than some tolerated error e.
Polygonal path simplification with angle constraint