I have this image above. I want to parts of the image to show depending on the RPM of the car. For example when the car starts only the bottom blue block is visible, as the speed increases more blocks become visible all the way to redline. Once the speed decreases the blocks disappear. I'm at a loss with this one i don't even know where to begin. Originally i was thinking of making each block a separate image but i was wondering if there was a better way of doing this. Any ideas?
Check out the Raphael javascript library. Depending on your Javascript experience, you may have a bit of a learning curve, but I think you would have a much easier time recreating what you are showing above and attaching the desired behavior to each of the shapes, rather than trying to do it with images, particularly given the arrangement and orientation of the blocks.
UPDATE: I created this fiddle, as I thought this seemed like an interesting exercise. I just used rectangular blocks, but if you mouse over the green 'throttle' bar, you will see how the blocks are made to appear and disappear.
Related
We have a simple website; readable, professional colour-scheme etc.
We are trying to make it have an easter egg, so essentially:
1. (Upon clicking a button or something similar) the cursor becomes a circle
2. Through this circle, you can see a 'hidden' website (the same website as the normal one bit with a different colour scheme, little drawings and animations scattered around and within website components, different fonts etc)
The possible strategies we have come up with, and problems with each are:
1. Strategy: Using 'mask-position' to create a moving mask (the cursor)
Problems: Neither the top nor bottom layer would simply be an image. The top layer would be the basic website, and the bottom layer would be the same website but with a new colour scheme, little animations and illustrations hidden in and around the website components. Potentially the top layer could be an image of the website as it was at the time of clicking over to the new cursor, because the only bit that needs to be interacted with is whatever is inside the circle (the hidden website), but the problem with this is that the simple website still has some small things that move, which a simple image would not capture. Could potentially remove these but if there is a solution which avoids this, it is preferable, as the 'image as a top layer' solution seems clumsy and problematic anyway.
2. Strategy: Use an iframe to show the hidden website within the normal website.
Problems: However, we are unsure how to make the iframe a circle, and how to make it move (based on the cursor position).
We have not tried much as we are struggling to figure out what to try to begin with. Ie I am not sure how to make a mask-frame not using images, and I am not sure how to make a moving iframe which is also a circle.
Any advice, strategies/tricks, or even examples of what I am describing which I can use to explain/confirm the concept to others trying to work on it too would be much appreciated.
Thank you!! :)
I've been working on building a tile-based display grid for canvas. This is what I have so far: http://jsfiddle.net/dDmTf/7/
Some problems I'm having, and can't quite grasp are:
The initial load time is ridiculous... I don't understand what I'm doing wrong - fixed, found out I was rendering ^32 more than I was supposed to
The hover effect, which "should" just highlight the border of the tile, erases it, and I have no way of recovering the previous tile without re-rendering the entire canvas.
How do I use tilesheets, providing me a single image instead of a bunch of small ones
Resizing the window (which resizes the canvas) also erases the canvas. Do I need to re-render? Or can I maintain state of various things when width/height is changed - added an onresize callback, which re-renders the map. Might not be the best way though?
Multiple layers? How would I go about allowing transparency .png files overlaying each-other
Those are the main problems I'm stuck on right now, and any guidance would be majorly appreciated.
Also, if you have any pointers for my javascript, feel free! I'm learning it more as I go, and I'm sure I'm doing a lot of things wrong.
Edit
As an FYI, I just copy-pasted the sprite map currently being shown on the jsfiddle. It's not the one I'm planning to use, but it was easier than uploading one. I plan to maintain a 32x32 grid instead of (what appears to be) a 16x16 grid from that tilesheet
Edit
I've got the a 32x32 tilesheet displaying on there now, but the hover effect is still breaking it, and I'm not sure how to "know" what the old value was.
The problem is that you are not redrawing your tiles after 'mouseout'.
You either need to redraw the single tile after you move out of it, but this can get tricky as things get more complicated or better yet on mouse move do the following.
Clear the canvas
draw the grid
draw your tiles
then do the highlighting/clearing that cell.
If you end up having any sort of animation this is the process that will be used anyhow otherwise as something moves from one tile to another it will leave ghost images behind.
I'm struggling to build a simple animation based on those old clocks with flip-down numbers. I added an image below copied from a freebie PSD found on Premium Pixels:
The biggest problem I'm running into is building a "flipping" animation using jQuery all in HTML/CSS/JavaScript. The only tutorial I've found is from this net tuts+ article which actually uses images. It splits the top and bottom half of the clock into two different image sets and replaces them for each second that passes by...
This method isn't realistic in a website since it provides no actual context for readers. I'd prefer to have the numbers hard coded into HTML and perform the flipping animation solely through jQuery - preferably no images except background ticker boxes. Or to put it another way the numbers are coded into HTML but the clock itself is a series of rolodex-style bg images.
I hope I've explained this well enough.. I've been struggling on this for a few days and I honestly have no idea how to approach this script. Maybe by splitting the top and bottom halves into different divs, then change the internal numbers for each second that passes? I'm fairly well-off in jQuery but I am weak on animations.
Thanks in advance for any support!
I think I would attempt to do something where the text is duplicated for the top and bottom. Then using images and css to only display each half appropriately.
The next step would be creating the illusion that the text is flipping with the image. I am not sure how you want to do that. I think it is a matter of sizing and speed. The sizing of the text in relation to the image and the speed at which it flips from the top of bottom.
The final part of the animation is having the top half ready with the next number and the bottom half queue up on completion.
I don't have any actual code that will help, but I hope this concept is something that will work out.
I've been gathering ideas for my personal project in CSS/JavaScript/XHTML.
The idea is to replicate this:
And so far I have this (I know it's far away from what I need, but just playing around)
http://jsfiddle.net/dburelax/XY8CA/9/
I was wondering if http:// processingjs.org/exhibition/ is my best choice to get this done in javascript? Thanks
P.S: I have no idea how to make the character move within the tiles any suggestions are welcome :)
I'd say light years away. But don't take it as sarcasm; let me explain.
What I see when I look at the gif is an engine that supports block "primitives".
Because, you see, every time he hovers a tile with the pointer it gets decorated with a white border.
In your case, you just have two images:
A map background
A gif of sprites for the character (without his back or sideway, but let's just forget that for now).
With these two in order to achieve the block highlighting you should always calculate offset, and apply image filters on the background with the border decoration (and shadows and what not). Then, when moving outside the box remove decoration the last window.
After that what do you do if you change box size? Recalibrate all offsets? What if you have boxes/bocks (I'll call them interchangeably now) in mixed sizes?
In game engines particularly you have primitives such as boxes, where you can detect collisions and either allow passage or not from the colliding box (a character is a box as well). Think how this would be practical if you for example had "fog of war" and allowed vision only in adjacent boxes.
It's not just about processing.js, which may or may not be helpful to you, but there are key bindings, character movement, character orientation to be thought about first.
I don't know about you, but I wouldn't be able to encode all that information in Javascript objects and still have it performant. Not with current Javascript engines, at least.
While your hobby project is a fun idea, there is much much more you have to learn first to be able to pull this off.
In the case I have offended, take but this and all is mended -- The Goblin
If this is in the scope of learning programming, while having a project to keep you motivated; then go for it (use the path I've deemed hard), learn first how to move images on the HTML5 canvas and when having actual code problems come back.
The 2nd part of the question is, which javascript library is better/easier to manipulate images with? I won't be actually drawing any shapes or anything. Other info: I'll be using jQuery and don't need to support all browsers, just webkit.
Edit:
More information: the current design is to layout/draw several rows/columns of images in a grid-like layout, with the image in the center being in "focus" (a little larger, with a border or something and some text next to it). The tricky thing is that we want the whole canvas of images to appear to slide/glide over to bring another random image into focus. So obviously the number of images in this grid needs to exceed what is visible in the viewport so that when the transition occurs there are always images occupying the canvas. Other than moving the images around, I won't be blurring them or otherwise modifying them. Eventually we will add user interactions like clicking/touching on a visible image to bring it to focus manually.
Let me know if this is not clear or still confusing.
I ran across scripty2 which seems like an alternative to using canvas/SVG for my purposes. I also started farting around with EaselJS last night, and it seems like this might work, but I'm wondering if it'll end up being more work/complex than just using standard HTML/CSS and a tool like Scripty2 to aid with animations and click/touch events. Just looking for any suggestions. Thanks!
The answer depends on your manipulation and animation.
If it's just translations, CSS wins for speed compared to canvas. I haven't tested, but I feel confident it easily beats SVG for the same sort of thing.
If you're going to be doing non-affine transformations or otherwise messing with the images (e.g. blurring them) you clearly want Canvas.
If you need event handlers per object, you clearly want a retained-mode drawing system like SVG or HTML+CSS. I haven't done enough CSS3 transforms to say how they compare in terms of speed to SVG, but they clearly do not have the robust transformation DOM of SVG.
This is a rather subjective question (or suite of questions) and you haven't yet given sufficient information for a clear answer to be possible.