I wonder if it's possible to detect a simple shape like a circle or a rectangle in an image with ActionScript 3. Can somebody guide me into the right direction or even give me a link to a good tutorial? I want to detect a logo with the webcam. Thanks in advance.
Yes, it is possible I did a ball detecting algorythm for a video. Once you access the bitmap each frame, (ex. a vector>, where uint is the color of the pixyel in vector[x][y]), it is only universal detection algorithms. Hugh transform, etc.. So you go ahead, and detect rectangles. There are lots of tutorials. Its high math.. There is also FLARManager, what can detect cool qr codes in Flash. Lee Brimelow did a great video tutorial of it.
Related
I'm trying to animate a nodal with flash for teaching purposes. This is what I want to animate:
My questions:
How can I move the line through a guide?
Can guides hold z positions, so I could make the rope's top and bottom parts more real?
Can a vector image (rope) move through a guide path?
Which way is this possible, strokes or brushes?
Does as3 scripting support "decorated brush" effects?
Is there a simpler way to do this such as sandy or awake3d or beziercurves?
If you're using the IDE like CS4 or CS5 there are some menu options to do this. I only use a text editor and Flex SDK to compile. While I know what you're talking about, I can't really answer this one since I don't have the program. There's plenty of tutorials on the subject, however.
I believe the path-following tools in CS* only follow (x,y) coordinates. No Z values in the menus, but you can code them yourself. Again, I don't have the program, but from the tutorials I read it looks like no.
I suppose it could. Instead of a line drawing like you have here, you could simply use an image of one rope segment (as in a picture of rope whose length is equal to one twist of the rope), then apply transformations to get the correct 3D perspective.
Basic flash programs only draw fills. You can, however, run a shader program (called pixel bender) within flash which will draw strokes for you.
Not on it's own, no. But there is nothing stopping you from programming your own decorated brush class.
Bezier curves are probably the way to go.
I am making a game, which is having a theater as room. However right now, it's only meant for simple "swf" shows. But i was wondering, if their is a requirement of a video, then is it possible to convert a plain video, to embed itself in an isometric environment. The video's dimensions would need to be skewed. Is it feasible ?
You can probably rotate the video into position using the 3D API. Try using rotationX, rotationY, and rotationZ. Also you might need to adjust the camera to not draw perspective.
There are also a whole bunch of AS3 isometric engines out there. Some of these might even support video.
I think you will need to use the flash.geom.Matrix class for this, because Isometric is different than 3D in that it maintains its size regardless of distance from the observer.
Have a look at the docs and you will find examples of how to skew an object.
flash.geom.Matrix
I'm working with a few programming buddies to create an AS interface to the kinect and one problem we're running into is image differencing. We need to be able to throw out image data that doesn't change from image to image so we can pin-point only things that are moving(i.e. people).
Anyone have any experience with this or a direction we can go?
I would consider creating a pixel bender shader to find the difference and also do any other math or tracking. Pixel bender gets its own thread outside of the normal flash player so you can get some more horse power for your setup. Pixel Bender shaders can be applied to bitmaps, vectors, or video so I think it is perfect for this project. Good Luck!
http://www.adobe.com/devnet/flash/articles/pixel_bender_basics.html
And is is a full collection of shaders including difference
Take a look at the threshold method on BitmapData.
It'll allow you to do this stuff. Their docs have a simple example so check that out.
It might be a long shot, and this is just me rambling, but in sound theory (strange how I'm relating it to image cancellation, but here goes...) the concept of cancellation is when you take a wave sample and add its inverse. It's how you make acapellas from instrumentals + originals or instrumentals from acapellas + originals.
Perhaps you can invert the new image and "normalize" the two to get your offsets? I.e. the first image is 'black on white' and the second image is 'white on black', and then detect the differences for the bitmap data. I know I did a similar method of finding collisions with AS3 a few years back. This would, in theory, cancel out any 'repeating' pixels and leave you with just the changes from the last frame.
With BitmapData your values are going to be from 0 to 255, so if you can implement a cancellation (because a lot of parts of the image are going to stay the same from frame t frame) then you can easily find the changes from the previous frame.
Just a thought! Whatever your solution is it's going to have to be quick in order to beat the flash runtimes' slow speeds. Your Kinect read FPS rate will be greatly hindered with bad code.
Here is some frame differencing code I wrote awhile back. It uses bitmapData: http://actionsnippet.com/?p=2820
I also used this to capture moving colors in a video feed: http://actionsnippet.com/?p=2736
I am a junior developer I can't understand how canvas tag is beneficial for us?
I read lot of articles on that but I can't get the root benefit getting from the canvas tag.
Think of the difference between canvas and svg as the difference betwee Photoshop and Illustrator (or Gimp and Inkscape for you OSS folks). One deals with bitmaps and the other vector art.
With canvas, since you are drawing in bitmap, you can smudge, blur, burn, dodge your images easily. But since it's bitmap you can't easily draw a line and then decide to reposition the line. You need to delete the old line and then draw a new line.
With svg, since you are drawing vectors, you can easily move, scale, rotate, reposition, flip your drawings. But since it's vectors you can't easily blur the edges according to line thickness or seamlessly meld a red circle into a blue square. You need to simulate blurring by drawing intermediate polygons between objects.
Sometimes their use case overlaps. Like a lot of people use canvas to do simple line drawings and keep track of the objects as data structures in javascript. But really, they both serve different purposes. If you try to implement general purpose vector drawing in pure javascript on top of canvas I doubt you'd be faster than using svg which is most likely implemented in C.
Basically, thanks to canvas, we can now draw/render 2D shapes using HTML5 and the canvas API.
As an example of what's possible now with canvas, see this
Some possible uses for Canvas:
Image drawing program
Photo editing/manipulation
2D Games
Advanced image viewing such as Microsoft's Deep Zoom
If you can't understand how it's beneficial, then maybe it isn't from your point of view at least. Don't think that because it's there I have to use it somehow, pick and choose what technologies work for you based on what you're trying to build, an Accounting web app probably wouldn't need a canvas for instance.
The canvas will enable you to draw pixel perfect graphics.
The cool projects that came to mind for me are:
Visualize gps data. GPS data is just an XML list of coordinates. You could easily build something in canvas to "connect the dots".
An mobile app where the user can actual sign a document with her finger - canvas allows you to export out the rendered canvas drawing to PNG where it can be saved on the server.
In a game where you have avatars, you can allow the user to actual draw on the avatar. Moustaches anyone?
Other stuff:
In iOS / Android using lots of CSS3
effects like box-shadow can lead to
poor performance, especially when
animating. You can do a lot of these
graphics in a single canvas tag,
here's an example:
http://everytimezone.com/. This thing is flawless on an ipad.
Cool background effects. For example try going to Paul Irish's
site and move your cursor around the
background: http://paulirish.com/
In this HTML5 book sponsored by Google a lot of the effects are using
canvas:
http://www.20thingsilearned.com/ -
particularly the "page flip"
animations.
my personal take on canvas (and when I actually found a use case for canvas) is the ability to color pick and color change per pixel in a canvas element - actually moving the image from something we don't have any information about what is happening inside it to an element like all other DOM elements (and yes, I know about the current problems with canvas and DOM - sure this would be taken care of in the future)
sure - canvas made some sort of animation easier and pluginless, but that we could do before (mostly with flash) - I think the real importance is the ability to know what is happening on the page.
I am currently working on a website for a construction company and I am trying to build a very simple flash intro. I have two images in the falsh intro: a tractor and a picture of clouds in the background.
I am trying to have the clouds appear to float by in the background. It is a very wide image that I am trying to loop through very slowly. It looks pretty cool :) IMO.
For tweening, I have always used TweenLite. The problem I am having is that while the image is moving, it 'blips' and looks pretty choppy. I have adjusted fps and about every other thing I can think of. The only thing that fixes it is when I use Hardware Acceleration (Level 2 - GPU). But this creates all sorts of problems for the HTML page.
My Question Is:
I am just a terrible coder, or would I be better off using Tweener (or something of the sort) or using the native tween engine in flash cs4? Any advice would be great!
Try these:
If the image is in your Library, make sure "Allow smoothing" is checked in your Bitmap Properties (select the image in the Library and go to "Properties" in the Library menu).
Or, if you are loading the bitmap dynamically and using the BitmapData class, make sure you've set the "smoothing" property to "true" on your BitmapData.