I have to create a web page with an image of an opened hand and a storm of particles over it. Clicking on three buttons will change the particles (wood, plastic or water particles).
Currently, I created a video for the particles and put it on a canvas to render the transparency (using https://github.com/m90/seeThru) but I see a great lack in the performances of the page, and the video has difficult to run at 30fps.
Which is the BEST practice to achieve this effect with great performances?
Related
Heelo,
I'm working on 2d endless runner game in libgdx using box2d.
My question is what is the easiest way ti implement shadow for the player which is jumping.
Shadow is just a semi transparent circle, but it needs to be animated when player starts to jump it should be shrinking, when landing it should be opposite
Hope you get an idea.
I have bunch of frames for that animation, but I'm not sure what is the best way to implement this.
My first question is how to detect where shadow should show up on Y axis, for example when player is landing on platform.
I thought of using ghost sensor that is below the player body and contact listener.
Or maybe should I ray cast to find platform beneath the player?
But then I cant know the right moment when player is close to the platform. What do you think?
Also how to calculate distance between player and platform body, so I can choose different frame of shadow animation?
Any thoughts on that?
Thanks.
I'm seeking some tutorials, how I make canvas or SVG (not sure which) images in an isometric map for a RTS game purpose. The images should only be clickable on the visible part, otherwise the user should be clicking on the background image. It can either be done by auto detecting transparent areas of PNG or from color overlay. I have no idea which is best.
Thanks.
If you won’t be changing the perspective of your scene, then I would go with SVG because they are DOM elements (clickable out-of-the-box) and you can limit the click area to the non-transparent part of the element. A very good SVG library is RaphaelJS.
The canvas is a different kind of animal. The vectors/rasters you draw on a canvas are not “retained”, meaning unlike SVG, you cannot instruct the box you just drew on the canvas to move. Instead, you are in charge of redrawing that box where you want it. After you draw everything on your canvas, it is basically becomes a big bitmap. If your scene’s perspective will be changing, you might need what canvas does best: speed and flexibility. Using matrix transforms, you can do 2D movement, rotations, scalings and skews. Since you are in charge of the transformation matrix, you can also simulate 3D movement. If your users have non-IE browsers, you also have WebGL which is a full 3D imaging system. With this power comes complexity, so you will probably check out the many game development platforms available for canvas.
With both elements, you can use websockets to do your RTS (of course degrading to long-polling for browsers that don’t support websockets).
In my web application I want the user to be able to draw some rectangles on an image, also change the size of the rectangles and drag and drop them. after that I have to get coordinates of rectangles and send them to server's database
Is it better to create a canvas on a photo or load the image in canvas ?
I don't write any code yet because I have no idea how to do this.
Any ideas,suggestions,links,libraries ?
As the comment said canvas is a good bet for this, but you'd need to do a fair bit of coding to get it working.
I actually have a tutorial on making Canvas interactive by drawing rectangles and moving them around. It should give you a good start on this project.
There are also a few libraries, such as fabricJS, but that might be hard to get the coordinates out of without digging into the library.
I decided last week that I wanted to play around with the Canvas. I am making a simple webapp (at my daughter's request), where there are ponies, and you can add them to your own picture and move them around.
I already have it so when a button is pressed, a picture of a pony comes up on the canvas.
My question now is, what is the best way to move multiple images when they are already on the canvas?
It would be great if I could drag them each, but I can only find tutorials using KineticJS, and I cannot get that to display how I want.
So, are there any other dragging images on Canvas tutorials out there?
Otherwise It would be okay to use keyboard buttons, but I cannot figure out how to do that with multiple images. When I use keyboard buttons, it moves all images at once.
Any ideas?
You have to keep track of where you draw each one, clear the entire canvas, and redraw each and every one of them (presumably moving some of them in the process).
None of this is built in to Canvas. I have a tutorial on making the Canvas interactive that covers keeping track of, placing, and moving (selecting) shapes on a Canvas. There's a live demo on that page and source code at the bottom of the article.
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.