I modified a very complicated animated grass example found here and checked a few other examples. I want to make something very similar to this but less complicated code. safari is on its knees trying to render this... also I had to use css transforms to get it to hang from the top of the browser window as desired.
http://yak.is/hairy/
if someone could just explain the basics. I'm lost trying to comprehend the code I hacked.
here's another one I tried:
http://yak.is/hairy/2.html
the shape isn't very hair-like at all, but I do like the simplicity and the cursor input.
basically:
need to draw a realistic-looking amount of hair/fur across the top of the screen (updating canvas width to window width and drawing the correct density of lines) and give them a natural-looking automatic "sway" in the wind.
each line will bend a little bit from cursor input.
Related
I have an HTML chessboard with chess pieces, and everything works. In order to avoid the drag & drop tediousness, I made the chess pieces background-images. On mousedown, I remove the piece at the position, and on mouseup I place it back. The only thing that is missing from the aesthetic is the image of the piece to be displayed under the cursor in-between.
I tried this:
cursor:url('http://upload.wikimedia.org/wikipedia/commons/c/c7/Chess_pdt45.svg'), auto;
But there are several setbacks with this method.
The image cursor needs to be at most 32x32 pixels in order to guaranty compatibility
It's unclear whether the format I want will be supported at all.
I don't know if the cursor image has width and height properties, meaning I cannot resize the image so that it looks exactly like what's on the board.
The cursor position is top-right, whereas it should be centered-centered, since chess pieces are... well, held from their center.
The big question is whether there's a workaround to all of that. Is it, for instance, possible to make a canvas that appears under the mouse?
Unfortunately, you cannot modify cursor properties, like width/height or position...
But, I have found interesting article how to imitate cursor with div element.
http://www.ajaxblender.com/howto-create-custom-image-cursors.html
Hope this helps you!
I have big horizontal strip image in photoshop which is made of lots of smaller elements. The background is transparent and the strip goes from smaller elements (left) to bigger elements (right). My goal is to make this strip interactive to mouse events.
Each element is some kind of polygonal image which is trimmed left and right and then exported as a png. It is then imported into a canvas.
The problem is that I can put them side by side but since they are not rectangles I need a way to calculate the offset made up by the transparent pixels on each side of each element to make them stick together correctly... I am using KineticJs to get a precise hitarea for each element... So maybe there is a way to do it automatically with kineticjs,or there is some kind of operation I could do using each image data?
My problem illustrated:
Any ideas?
Also I am doing this simply because I would prefer precise mouseOver bounding box on each item (rather than a simple rectangle) and would rather avoid the solution to calculate each offset manually... But maybe that's not worth it?!
Ok, so you have yourself a custom shape you want to use, here is a tutorial for that: http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-shape-tutorial/ , the simplest thing you can do, and even that seems fairly long, is to calculate the bounding lines for that shape. (Two somewhat vertical lines, and two somewhat horizontal lines). Then you test if the right vertical line of shape one crosses with the left vertical line of shape two, if they do, then set the coordinates of the images to be the same coordinate.
http://www.mathopenref.com/coordintersection.html
line1 = ax + b ..... line2 = cx+d //see possible tests
if(...intersection test...){ // or just test if some coordinate is left of some other coordinate
shape2.setX(shape1.getX()+shape1.getWidth()); //account for image width, so they don't overlap
shape2.setY(shape1.getY()) // no need to account for height
}
UPDATE: This is a very rough solution to the workings of the problem. The next step would be to do more fine tuning dependent on each image.
http://jsfiddle.net/9jkr7/15/
If you want precise areas, use an image map. With some clever finagling and a blank image gif you should be able to have the background you want whenever you hover over any particular area of the image map (might require javascript).
The other option I can think of would be to use SVG itself or one of the many libraries in existance to build interactive vector graphics into your page.
You could also write a function that calculates the left most, top most, right most, and bottom most pixel by looking at all of the pixels in the image data. Here's a tutorial on that:
http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/
How do I prevent a user from seeing a certain parts of the page. My goal was to make a huge maze within the browser (so big that the path is big as the width of the browswer screen); the user has to navigate using the scroll bar or any other scrolling method until they find the end of the maze. Making the maze is not the challenge, but to prevent the user from crossing over the boundaries is where I am having trouble.
My thought process is to make objects/areas on the page that block the user from continuing to move in that particular direction. Maybe the user can see 50px of the block/area before he can not go any further? I have never seen this done and I was curious to know if this is even possible.
Thanks in advance. Any help or advice will be appreciated.
Maybe that won’t be that answer you were looking for, but if you have some experience in graphics, you can try to use three.js library to generate the maze with canvas or webgl. You can use point light to lighten only small part of the maze. Other part can have something like “fog of war”.
If you are not interested in canvas/webgl, then you can try to use an overlay png image with transparent hole in it. Width and height of the image has to be screen.height*2 x screen.width*2 (not sure about that, but that is how I see it). That image should be on top of whole maze. It’ll hide whole maze except for that under transparent area. And your starting point should be in the center of that transparent area. Then you need to move that image along with user input (arrow keys, mouse, whatever). Alternatively, you can move maze itself. This way overlay image can have screen dimetions.
These are two option that came to my mind.
Google has the coolest effects - once it was a Pac-man game, today is apparently the 160th anniversary of the first World Fair, and Google's logo has an image of it. They also turn the mouse into a magnifying glass that can sweep over the picture (the gold ring).
I'm wondering how they do that. It's obviously Javascript, and I looked at the page source, but it's not especially readable (no surprise).
Looking at their source code, it seems they are using rather basic techniques to achieve this.
Ignoring all the embedded nifty animated gif's, there are basically two images - large, and small of the entire scene. The larger image is repeated thrice in the document. Look at the annotated image below to get a better idea of how the zoom works.
The portion inside the magnifying circle is split up in three div's - top, mid, and bottom. The overflow for each div should be hidden. Each div is relatively positioned inside the zoom circle. On mouse move, change the absolute position of the zoom circle to the mouse coordinates. Their example also uses CSS3 for the scaling and adding some animation delays.
Here's a sorta minimal reconstructed example.
Another example where we don't hide the div overflow to reveal the entire thing as a square.
Well, firstly, for anyone who wants to use such an effect, there are loads of jQuery plugins. Here are just a few:
Power Zoomer
Featured Image
Zoomer
Cloud Zoom
Secondly, it's quite easy to achieve. Just load the full-size image, but give it a width smaller than it's actual width, so it is scaled by CSS. Then, use JavaScript+CSS to create a Div (the magnifying glass) with the same image as background, but change the background-position property to the corresponding scaled x,y coordinate that the user's mouse is currently on.
There are other ways of doing it I suppose, and Google might be doing it differently, but this is the most obvious way for me that comes to mind.
Visit http://codeblab.com/glass/ for an real life example and in depth explanation of this technique. Flash and CSS v3 have ample functionality to construct a round magnifying glass.
However, simulate-a-circle-with-overlapping-rectangles works on (many) more platforms.
(DISCLOSURE: codeblab.com is my personal hobby blog with some weak links to my work in The Netherlands.)
There is a full example of magnifying any sort of HTML, including HTML5 at http://www.aplweb.co.uk/blog/js/magnifying-glass/. Works cross-browser too - although rounded corners are a bit iffy on most browsers - so you are going to have to use a box rather than circle.
Here is how to works:
Duplicate the content you want to zoom
Place the duplicated content into another element and set the visible width/height and overflow hidden
Use JavaScript to move the duplicated content so that it moves by the zoom amount * mouse movement. Also move the visible div by the mouse movement.
That is pretty much it too it. There are lots of little things to look out for though to make it work on all browsers.
I don't know how Google does it, since the logo is no longer showing in my area; but this effect can be achieved by clipping the enlarged animated GIF over the regular image using canvas. Alternatively, it is also possible to create create a circular clipping using CSS border-radius (commonly used to implement rounded corners).
EDIT: I've hacked this up together to show the basic technique that you need if you used CSS border-radius: http://jsfiddle.net/yjBuS/
Looks like they're using two images, one for the logo and one for the zoom (the zoomed one is actually sliced, to run the animations separately...?) They probably detect if the mouse is over the normal logo, then show the yellow circle and attach it to the mouse position. Then showing the other image, shifting it opposite of the mouse. Or something similar.
I'm making a canvas-based game engine and am wondering if anyone has any good info on how to achieve an overhead view perspective. What I'm looking for is somewhere halfway between the traditional birds eye view and the old SNES mode7 view. Just a slight angle to give the illusion of 3D.
I'm trying to figure out what is going to be the best way to deal with the perspective skewing. I'm not doing rotations so 3D matrix stuff would be going overboard, but I need to be able to deal with rendering the map layers at a consistent angle and it'd be nice if the angle was adjustable. I also need to deal with the depth warp. Basically, the bottom row of pixels should be 1:1 pixel width and height, then for each row it'd get, for example, 5% smaller or something like that. What I'd like is to be able to supply a large canvas as a texture and then supply a camera angle between 0 and 90 where 0 is perfectly horizontal and 90 is birds eye view.
Anyone have any related tutorials or sample code? I've searched online a bit, but everything I've found seems to either be unsuitable for use in this particular application or overly complex, doing all sorts of crazy 3D skewing and rotation stuff. All I want is to take the normal tiled grid and lean it back a bit, no rotations or complicated stuff like that.
Here's an example of what I want;
Here's an example. http://img801.imageshack.us/img801/2176/perspectivesample.jpg
The bottom pixel row is 1:1 pixel ratio, and each row above that progressively gets shorter horizontally and vertically. The source texture of the top center region is normally about half the height of the bottom center region, but it has been shrunk vertically and horizontally to fit the perspective.
What I'm thinking might work best is to render the current viewport state to another canvas in flat, birds eye view, with approximately 50% extra space on the top and sides, then slice an upside triangular region from that and draw that to the actual visible canvas.
Only problem is, I suck at math when it comes to calculating angles and such.
if i understand you right, you just want a simple trapeze transformation. if so, maybe this or this link helps you out. for images that aren't centered it would just be an additional rhomboid tranformation, wich is easily possible with canvas, as far as i know.
What you're talking about is something that can be done simply with any 3D api. However since you've decided to try to stick to 2D canvas, you have to do everything in the 2D world which means working with rectangles, rotation, scaling, skewing, etc. Also know as affine transformations as mentioned the other answer.
What you want to do is possible, but since you want to use 2D you have to think in terms of 2D functions.
Generate your initial image.
Add a slice from the bottom of the original image to the bottom of the canvas, very slightly positioned to the left so the center of the image matches up with the center of the current canvas.
Very slightly increase the scale of the entire image
Repeat until you get to the top of the image.
The Pseudo code would look like this...
imgA = document.getElementById('source');
// grab image slices from bottom to top of image
for (var ix=height-slice_height;ix>=0;ix-=slice_height)
{
// move a section of the source image to the target canvas
ctx.drawImage(imgA, 0,ix,width,slice_height,
0-half_slice_width_increase,width,slice_height);
// stretch the whole canvas
ctx.scale(scale_ratio, 1);
}
This will take lots of tweaking, but that is the general solution.
scale_ratio will be a number slightly larger, but very close to 1.
ctx is the standard canvas 2D context
half_slice_width_increase is the 1/2 the amount the canvas will grow when scaled by the scale ratio. This keeps the scaled image centered.
To look correct you would want to transform the background tiles first before you add the icon overlays.