We Keep Coding

3D cubes draggable to grid

I'm working on a project for school in HTML5 en CSS3.
The goal of the project is to teach young children how to calculate simple equations.
The first step towards learning this is teaching them to recognize numbers in different shapes.
A first exercise would be:
showing a random number and letting the child select a 3D cube and dragging it inside of a grid.
The number of cubes in the grid should correspond ofcourse with the given number.
Example given below:
I have no idea where to start. I know about a canvas in HTML5 but I'm not really familiar with it.
How can I snap the cubes into position when they come close?
How do I even draw a 3D cube in HTML5?
How can I check how many cubes were drawn on screen?
Can I draw something more pleasing for the children to look at than cubes, but still have a 3D effect?
Above all will it be capable of running on a iPad?
A dedicated App is out of the question as it should also be able to run on a desktop.
Hoping some of you might have a good solution.
Thanks

Only way to make genuin 3D cube that will work on ios browser is css3
You can put this cube(graphic representation) in to the present element that will represent its logically and use standard browser ways to manage drag and drop Usefully library and since this is DOM based implementation it can be styled with css. You can add color transition, animation delays or even deformation with the css3 transition it will have much better performance than js animations. Also it's easier to implement.
Here(video, images) is really cool animation guidance from Walt Disney Studios to help you make it visually appealing.

Drawing App - Curve Fitting

I'm currently working on a web-based drawing app, where I use the position of the pointer to generate a line. The speed determines the width of the line.
My problem is that the browser events does not produce clean data when getting the position, so the width becomes quite "jittery" other then being soft and smooth.
I'm wondering what is the best way to smooth out that sort of data as the drawing is being made? I was thinking on curve fitting, but I'm not sure which algorithm could work better in my case.
P.S. I'm not redrawing the line from start every single time on canvas, I'm only adding the "final part".
Thanks!

You might try pulling both the "smooth" and "simplify" functions out of paper.js (their MIT license allows this). It worked well for me in an edge detection project. Check it out here: http://paperjs.org/tutorials/paths/smoothing-simplifying-flattening.

canvas tile grid with hover effects, tilesheet, etc

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.

Magnifier effect for D3/GraphGL force directed network visualization?

Is it possible to create a smooth animated magnifying effect (similar to the dock on Mac OS X) when hovering over nodes in a force-directed graph visualization using the D3 or GraphGL libraries?
The nodes would need to expand and displace the others around it, while maintaining the force-directed layout.
If someone could fork this to demonstrate, that would be great! Thanks
note, this is different from a simple zoom as in this question

Great question. To answer it, I implemented a D3 plugin for fisheye distortion. It's roughly based on previous work in Flare and Sigma.js, which are in turn based on the work of Sarkar and Brown, "Graphical Fisheye Views of Graphs", CHI'92.
Here's a quick demo with the Misérables dataset. View source for the code. I'll do a writeup later today when I have time.
Note: this uses a static force layout; the layout is computed on startup and doesn't change. I think this is probably what you want in conjunction with fisheye distortion, or else the distortion will compete with your ability to move nodes around dynamically. But in theory it's possible to combine them, if that's what you want.

It'd be amazing if you could do this with pure CSS, but unfortunately it looks like attributes for various SVG elements (ie, circles) aren't reachable via CSS. Specifically 'radius', but I think this is true for a whole slew of SVG element properties.
But its not super hard to do via d3. Here is my example jsfiddle. Basically you do the following:
Use transitions (see Tutorial #2 to learn how to use these). Basically do a d3element.transition().delay(300).attr(...) to make the changes happen.
To keep the 'blown up' circles from overlapping the best I could figure out to do was to modify the force layout's charge setting. Increasing the repulsive forces when circles are larger.
Hopefully thats what you are looking for...

Pure css can do this if you accept it.
.app{
-webkit-transition-property:-webkit-transform;
-moz-transition-property:-moz-transform;
-transition-property:-transform;
-webkit-transition-duration:.15s;
-moz-transition-duration:.15s;
-transition-duration:.15s;
}
.app:hover{
-webkit-transform:scaleX(1.2) scaleY(1.2);
-moz-transform:scaleX(1.2) scaleY(1.2);
-transform:scaleX(1.2) scaleY(1.2);
}
It's used on my home page tuoxie.me

Replicate BBC iPlayer rotation effect with HTML5 / Canvas / JavaScript etc

I want to replicate the effect seen here on the BBC iPlayer where various circles and arcs rotate around a point.
I understand I need to use the Canvas element along with some drawing code to draw arcs which the have to be rotated. Here is an example of how I have tested drawing arcs. - I discounted the use of CSS3 features as I wasn't sure it'd give me the control I wanted - perhaps I'm wrong?
I'm not sure how to rotate these arcs in a way that mimics the BBC iPlayer. Ideally I want to create either a preset pattern and rotate various sections or just create a random pattern on the fly. But either way each section will require it's own rotation speed and so forth.
Can anyone help out with either a quick demo or perhaps some pointers on how to get started on this?
I'd also appreciate any advice on any browser limitations imposed by each solution. I understand not much will work in IE though :)

You could try taking a look at this: HTML5 Canvas Machines Vortex.