Develop Reference

creating JS Pixel Manipulation effect

I am keen to try and recreate something on my website with effects similar to what can be seen here?
http://www.williamhoza.com/text/?t=Hello
I have searched the web for canvas pixel manipulation along with other searches and cannot see anything that could help with this.
It would be great if someone has any knowledge of how this effect is achieved or even has information as to where I should be looking for help
also, would it be possible to achieve effect with an image?

Split the text into particles. Each particle should have a vector pointing to it's start position. If you move you mouse close, you should add a new vector to the particles around the mouse. This way you particles will move, but return to the original position.

jQuery circular animation based on right and left controls and friction

This is a rather biggish question that i am just hoping to find some direction with.. I dont expect anyone to do this entire thing... But to rather learn how to go about projects like this. Here we go:
I am trying to achieve an this animation:
Basically whats happening here is, I need to have a semi oval shape and a ball constrained to it and when you press the left and right arrows it needs to slowly to quickly move left to right and based on the speed of the button clicks it needs to either complete the ramp or stop and drop. Imagine a skateboard and a ramp.
I know the basics of jQuery but the circular animation and friction effect is where i get lost..
Any Help/Direction/Advice Greatly Appreciated. Thank you.

I'm trying an answer for the animation part:
If you are ok with HTML5 then for the animations there are two ways to go:
Either use HTML5 Canvas, which really works well for providing dynamic content. Its basically a canvas on which you can freely draw. It's pixel based and has a good performance and, if done right it does not decline very much when drawing many elements). You should also double-buffer it in order to avoid any flickering when drawing.
Or use HTML5 Inline Svg. It's vector based, so resolution-independent and has good support for animating svg elements. In contrast to HTML5 Canvas the elements of the svg are DOM-Nodes, so you see the graphic elements directly in your DOM-Tree.
In order to sum up the trade-offs:
HTML5 Canvas
-Pixel-based
-Good Performance
-Free drawing
HTML5 Inline Svg
-Vector-based
-Animations built-in
-Elements are DOM-Nodes
For much more information, see
http://dev.opera.com/articles/view/svg-or-canvas-choosing-between-the-two/

Spinning wheel or 360 degree rotation wheel

I am looking for some jquery plugin or any code examples for multiple spinning wheels or 360 degree rotation wheels. Attached is the demo image for which, I am looking for the solution, where all the wheel can be rotate and This is basically develop birthdate selection somewhat like desktop and mobile application...But I need for my web application. I am using PHP & Apache web server.
Thanks in advance for any idea or sameple code or similer solution to moving forward
-Himanshu

I don't know of any ready made solutions, but I can point you in two directions you can go:
You can make an image for each of the 3 different wheels with the correct sizes and next use css3 transformations to rotate the specific wheels with javascript ( https://developer.mozilla.org/en/CSS/transform#rotate )
The other option is to look into the html5 canvas tag and draw the wheels onto it by hand. Here is a tutorial which covers making a roulette game on a canvas tag, which is quite different from your requirements, but does describe the necessary techniques. http://www.switchonthecode.com/tutorials/creating-a-roulette-wheel-using-html5-canvas

Yes HTML5 canvas rotate() is the way to go with this. My site http://www.dougtesting.net has a winning wheel that uses canvas rotation, but only for one wheel image. The code is fully commented so you may find it a useful starting point.
For your project you would probably need multiple images that are rendered to the canvas and rotated to the desired angles. Also you will probably need to look in to a mouseDown, mouseMove, and mouseUp code to allow the user to drag the wheels to the desired locations, with the code being able to tell you the values pointed at (something the code in my winning wheel can also do).

I am not aware of a jQuery plugin that does exactly what you ask. In terms of browser compatibility, I recommend you to take a look at the excellent RaphaelJS JavaScript library. It allows you to draw and rotate a wheel using vector graphics. Best of all, this library is IE6+ compatible and works in most if not all modern webbrowsers, including tablets and mobile phones.
To ease the creation of the necessary vector graphics, you can draw the wheel in a vector image editor of your choice (e.g. Illustrator, Inkscape, etc..) and save the vector image as SVG file. A very convenient online companion tool called ReadySetRaphael takes an SVG file as input and produces the necessary JavaScript to draw the graphics automatically.
If you have the path of the vector graphic as an object in JavaScript, it is easy to rotate it with the Element.rotate() method.

Although I am not sure if a plugin exists for this purpose;In my current project we have made a context menu using the canvas api which is not that different from your requirement, if not a bit more complex. Therefore, I highly recommend using the HTML5 Canvas api to do this, if you are not restricted from it. You can use a few ideas from the interactive flower tutorial.
http://www.html5canvastutorials.com/labs/html5-canvas-interactive-flower/
This should help too if you're interested in bringing jQuery into play.
http://www.elated.com/res/File/articles/development/javascript/snazzy-animated-pie-chart-html5-jquery/

Combine Vector advantages with Bitmap in an HTML canvas element - how?

What I am trying to do is create a game that has an extreme amount of zoom-ability on a canvas element. I would like to make use of the advantage that vector graphics have insofar as being able to be programmatically created at runtime, with the high performance of bitmap images.
What I would like to do is programmatically create the first-frame image of a game "sprite"... this would be a vector image. After the first frame though, I do not want to keep wasting CPU cycles on drawing the image though.. i would like to cache it as a bitmap/high performance image for that zoom level.
Following this, if the user zooms in by >20%, I then redraw the image with a higher level of detail vector image. As above, this vector image would then be cached and optimized.
As you can see here, this would be a pretty basic space ship.. I would first render it programmatically as a vector and then.. raster it I guess? Goal is to avoid wasting CPU.
If the user zooms in...
A new vector image of the same shape would be drawn, albeit with a much higher level of detail. This is basically a Level Of Detail system. In this case as well, after the initial programmatic draw, I would "raster" the image for maximum performance.
Does anyone have ideas on what tools I would need to make this a reality inside of a HTML canvas? (The rest of the game will be running inside of the canvas element..)
Thank you very much for your thoughts.
**Edit: I wanted to add... perhaps the route of rendering an image via SVG (programmatically), then pushing that png file into the canvas using drawimage(), might provide some success? Something similar? Hmm...

Check out that article , but it seems there is no standard method to do what you want and it may fail in IE.
http://svgopen.org/2010/papers/62-From_SVG_to_Canvas_and_Back/#svg_to_canvas
You should perhaps go with an all SVG game , or provide a maximum zooming rate to your game and use big images as sprite assets. it would not have been a problem using flash,but i guess you wont go with flash anyway.
Maybe there is a framework that can translate SVG into a "canvas drawing sequence" but i would not bet on high performances in that case.

I managed to answer my own question.
The way to do this is to first create an SVG file, and then convert it to a PNG file on the client using "canvg". The PNG can be created at different levels of details based on what you want, and in this way you could create a dynamic LOD system.
Flash does something similar automatically by cashing a bitmap image of the SVG file... it's called "pre-rendering". If the SVG isn't scaled or the alpha isn't changed, flash will just use the bitmap instead (much faster then continuously re-rendering the SVG file, in complex cases). Size (and thus detail) of the PNG output can be modified however you like, and so pre-rendering could be done based on events as well.
From this information, I have decided to implement the LOD system such that SVG is used whilst the user is actively zooming (scaling the target "sprite"), and then as the zoom slows down, compute a PNG pre-render. Also, at extremely high levels of zoom, I simply use the SVG, as it is much easier for the CPU to compute SVG's at high resolution, then bitmap images that cover most of the screen. (just take a look at some of the HTML5 icon tests that put lots of icons on the screen... the bigger the icons are, the slower it runs).
Thanks very much to everyone's comments here and I hope that my question/answer has helped someone.

Adding sizing handles to drawn object in canvas

I have a full screen canvas I am drawing to, and I've set it up to allow the user to drag and drop objects that are within the canvas.
I also want to enable them to select an object, and then 'resize handlers' show up (the little circles in the corners) to allow them to click/drag and resize them.
I can code this manually by drawing circles in each corner and detect a click, etc.... but was wondering if anyone has any better way to do this? Maybe there's a library out there that already handles this?
Any help is appreciated!

There isn't any simpler way than doing it yourself or getting a library to do it for you.
I wrote a tutorial here on the use of sizing handles. That should get you started if you plan to make your own.