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

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.

Related

Paperjs problem with using custom paths as styling handles/segmentPoints

Example
Video Example
The lack of selection styling in paperjs makes you improvise and one way to style them, is to create them yourself ( recommended on this post).
But the huge con with this is the performance! Where canvas quickly goes from usable 60fps to terrible 20 within seconds. Now the only method I thought would work to style your handles/points, is now useless.
Now I'm out of ideas as to how style them and I'm trying to seek the help of stackoverflow... The main thing that I want to achieve is the hover effect on handles/points . At this point I coded the most of the stuff in paperjs, and I really wouldn't want to switch everything to something else like PixiJs.
P.S Any help is appreciated!
In your video, the frame rate goes down because you draw a lot of paths and this would also happen at some point even with the native Paper.js selection.
So your only chance is to try to have as few as possible shapes in your scene.
Maybe you can take advantage of the less known features of Paper.js to reduce them a bit:
item.selectedColor
paper.settings.handleSize
Then, there is also the possibility of using SymbolItem for repeted shapes (like your circles) that should have better performances than regular paths.
Finally, if you're out of solutions, you could also fork the library and hook into the selection drawing code to adapt to your needs :).

Geometric effect image manipulation

I'm trying to build a website allowing users to upload a photo of their face and then return a stylized output such as this example :
I'm not a graphics expert by any means so I'm not sure of the correct term to describe this image manipulation effect.
I have looked at a few JavaScript image libraries (Fabric, Pixastic) but they only seem to offer a fairly basic Pixelation effect which is not quite what I am looking for.
If anyone can point me in the right direction of a suitable JavaScript library I would be eternally grateful!
This would need to implement:
Delaunay triangulation
Voronoi diagram
These are relatively complex areas in the field of polygons and the combination (Voroni/Delaunay tesselation) represent a very specific usage (as the effect in the image). You can probably get away with just the triangulation though, but there are libraries out there that can help you with the basics and from there you may be able to apply it to images and the color values.
Here are a couple of projects to start you off:
https://github.com/ironwallaby/delaunay
https://code.google.com/p/javascript-voronoi/

Most efficient way to implement mouse smoothing

I'm finishing up a drawing application that uses OpenGL ES 2.0 (WebGL) and JS. Things work pretty well unless I draw with very quick movements. See the image below:
This loop was drawn with a smooth motion, but because JS was only able to get mouse readings at specific locations, the result is faceted. This happens to a certain degree in Photoshop if you have mouse smoothing turned off, though obviously much less because PS has the ability to poll at a much higher rate.
So, I would like to implement some mouse smoothing, but I'm concerned about making sure it's very efficient so that it doesn't bog down the actual pixel drawing operations. I was originally thinking about using the mouse locations that JS is able to grab to generate splines and interpolate between readings to give a smoother result. I'm not sure if this is the best approach, though. If it is, how do I make sure I sample the correct locations on the intermediate spline? Most of the spline equations I've found don't have uniformly-distributed values for t = [0, 1].
Any help/guidance/advice would be very appreciated. Thanks!
Catmull-Rom might be a good one to try, if you haven't already.
http://www.mvps.org/directx/articles/catmull/
I'd pick a minimum segment length and divide up segments that are over that into 1+segmentLength/minSegmentLength sub-segments.

How to deskew a fisheye panorama using css3?

I feel that it has come time to convert my flash panoramas to js/html5/css3. I've seen some elegant solutions using separate flat images, but mine are all fisheye...
My intuition tells me that it's doable using -webkit-transform: matrix3d but I'm not quite hitting it.
Any ideas if this can really be done in css3?
Thanksya kindly.
Yes, it can be done, but you better know your mathematics. Note that you are not using CSS3 but rather a proprietary extension, this will only work in webkit browsers. You'll probably be better off using a Canvas element for the job, not only is it supported by more browsers, it also gives you far greater freedom to do whatever transformation you desire.
Edit:
Well then, cut your image into a number of thin vertical slices, each slice should be scaled by approx 1/cos([angle off centre]), and skewed to account for the angle being different at the right and the left side of the slice. This way you should end up with an "inverse fisheye" shape where the top and the bottom of the image is concave, you might want to cut it to a square.
I discovered three.js.
It looks promising.

HTML/Javascript inking or drawing control suggestions?

I am looking for something that will allow users to write out a signature in an HTML form. I am looking for something that will run locally on the machine so if it can be done through a javascript function or something else that would be great.
I have seen the canvas HTML5 object, but I haven't found any examples that work well with IE. I am continuing to look, but was just wondering if anyone knows of anythign else out there that will allow a user to write out a signature?
You could do that with Flex or Silverlight, if you're not averse to plugins.
Otherwise, the only way I can think of to do this would be to create a function that places a very small graphic of a 1 pixel dot over and over again at the point of the cursor when it is dragged with the mouse button depressed. (Depressing, eh?) The dots would replicate more profusely and create a thicker line where the cursor pauses, and make a thinner line as it moves faster. The dots would in any case be close enough together to appear as a line, the way halftone printing uses dots to make photographs appear in newspapers.
I could write this for you but you'd have to pay me. :)
not really 'anything else', but canvas can be made to work even in msie6 with google's excanvas (which maps canvas to vml iirc).
canvas painter does this, just successfully drew my signature in both ff3.6 and msie6, so that might make for a good starting point?

Categories