Friday, December 13, 2013

Rotating Polymorphic Interface (RPI)

This is just an experiment. Just some fun. I doubt the practicality of such an interface, but then again, I felt compelled to create it. Its CPU intensive and won't look good if you have an older machine (IE 7 looked ok for me on my 1GB/pentium 4), but not great. Other browsers worked wonderfully. If you view it as text, of course it speeds up.

I made it a mooTools 1.2 set of classes and you can have multiple polyhedra on one page in different styles, although for simplicity I am showing one. It starts off life as a base polyhedra class, then can become a cube, a pyramid, or whatever you want! I have made a cube, a pyramid and a diamond shape, but there is no limit as long as you know the coordinates.
The buttons show how you can not only switch between text and images, but also you can morph the classes from one to another.
Aside from the core logic for making the polyhedron, here is what I added/changed:

  • Object itself or a handle can turn the cube. (its not great if you use the object itself as the handle and I have no example of this). The handle I added was the touchpad. You make it turn by clicking and dragging on the touchpad. The yellow spotlight indicates where you left off (it maps to the polyhedra).
  • If you use the ctrl key and move up or down, you can scale the entire shape.
  • Can take images as shown, or plain old text, as it was.
  • I added opacity for a more real effect for the images. (although at the moment in IE there is a small bug where opacity is not working for text).
  • You can mouseover an image for a closer view with some moo fx.
  • Click on an image to see a "details" view that I did not flesh out, its just a wireframe. I would imagine some sort of ajax request here for details. Click the image again to return it.
  • I added a scatter and a reconstruction effect.
  • Different browsers scale the images differently. Looks awesome in firefox, but not great in ie 7. Not sure what to do there.

The following options for the container are:
  • left, top: the usual, corresponds to the cube.
  • handle: the thing to manipulate.
  • polyType : a class that describes the shape.
The following options for the polyhedra are:
  • counterSpin: moves like a pilot joytick or moves naturally.
  • rotateSpeed: correlates a mousemove with a cube turn. Really its supposed to make it faster or slower, but this is so CPU intensive that its hard to notice at low numbers
  • opacity: the starting opacity.
  • spacing: space between the faces.
  • hideCenter : hides the center object if you want.
  • contents : img or text (if not images, you automatically get spans)
  • scale: Creates an arrangement of the polyFaces to the polySize overall. When you change this, you should change the default picture size, if there. Leave it at the default if your not sure
  • height, width: The usual, corresponds to each polyFace.
  • root: where to grab the images. If your showing text, use "".
  • notFound: the image or text to show if a slot is empty (I left a few).
  • data: an array of image names or text. Anything you want.

About other shapes:
This is not limited to regular shapes. Again, provided you know where to place the points, you can show and rotate any shape.

To do: make text color configurable, add example of non-regular shapes, show multiple.

The algorithm for the cube in 3 dimensions was inspired by: Thiemo M├Ąttig. The "text" version is an emulation of his work, but in this new code. This uses very little of the original code, which serves as more of an inspiration, but that core logic does drive this.

Thanks to my colleague Sualeh for his help on extending the OOP concept.

No comments: