A couple of days ago I was playing at work with the RaphaelJS library to do some image rotation that we may end up using on a new project we are working on. At the end I ended up creating a spinning object with variable speed, similar to this demo I show you here.
Using RaphaelJS it is very easy to embed any image into an SVG object and rotate it. With a little bit of animation, we can set angular speeds and have some fun :)
I have added an acceleration parameter which will make the speed changes very smooth, although it the new speed is very different than the current one, it will take some time to reach it.
See it in action: http://enekoalonso.com/research/color-wheel.php
The code
-
var ColorWheel = new Class({
-
Extends: Thread,
-
-
initialize: function(options) {
-
this.parent(options);
-
this.raphael = Raphael('wheel', 400, 400);
-
this.wheel = this.raphael.image('media/svg/colorwheel.svg.png', 0,0,400, 400);
-
this.lblSpeed = $('speed');
-
this.lblRPM = $('rpm');
-
this.lblFPS = $('fps');
-
-
$('btnSetSpeed').addEvent('click', function(event) {
-
this.setSpeed($('targetSpeed').get('value'));
-
}.bind(this));
-
},
-
-
execute: function() {
-
var now = new Date().getTime();
-
this.fps = (1000 / (now – this.lastTime)).toFixed(2);
-
this.lastTime = now;
-
-
if (this.targetSpeed == 0) { // stop
-
this.angularSpeed *= 0.99;
-
if (this.angularSpeed < 0.1) this.stop();
-
}
-
-
else if (this.angularSpeed < this.targetSpeed) { // accelerate
-
this.angularSpeed = Math.min(this.angularSpeed + this.acceleration, this.targetSpeed);
-
}
-
-
else if (this.angularSpeed > this.targetSpeed) { // brake
-
this.angularSpeed = Math.max(this.angularSpeed – this.acceleration, this.targetSpeed);
-
}
-
-
var currentRPM = 60*(this.angularSpeed/360)*(1000/|>this.options.interval);
-
this.lblSpeed.set('text', 'Angular speed: ' + this.angularSpeed.toFixed(2) + ' deg per frame');
-
this.lblRPM.set('text', 'Current speed: ' + currentRPM.toFixed(2) + ' rpm');
-
this.lblFPS.set('text', 'Frames: ' + this.fps + ' fps');
-
-
this.wheel.rotate(this.angularSpeed);
-
},
-
-
start: function() {
-
this.angularSpeed = 0;
-
this.setSpeed($('targetSpeed').get('value'));
-
this.acceleration = 0.1;
-
this.lastTime = new Date().getTime();
-
this.parent();
-
},
-
-
setSpeed: function(rpm) {
-
if (this.stopped) this.start();
-
this.targetSpeed = (rpm/60)*(360)*(this.options.interval/|>1000);
-
console.log('setSpeed (rpm,anglespeed): ', rpm, this.targetSpeed);
-
}
-
});
-
-
window.addEvent('domready', function() {
-
new ColorWheel({interval:1000/30}).start(); // 30 fps
-
});
Enjoy!
PS: I took the color wheel from Wikipedia, although I couldn’t figure out how to embed an SVG graphic into a Raphael SVG container.
Nice effects at rpms:
450 = 90deg spin
900 = 180deg spin
1800 = 360deg spin (static image)
Well done. Now, with animate method it should be easier to do the same thing?
Love this example. I’ve been a web-developer professionally for a year now and i constantly look for inspiration like this. You have inspired me to try and create a full svg home-page.
May take me a while as I’m busy as hell right now. But i will convert my homepage to svg i swear! check it in about a month! rickyh.co.uk
I Ricky, I looked at your site an I like the stuff you have done there. Sure SVG would help you with some effects, specially rotating images. Now you can make your plane fly up and down, do loops, etc :)
Either way, I loved the way you change the bg color.
Not bad for version 0.5.12 of raphael
I linked to it at
http://www.irunmywebsite.com/raphael/raphaelsource.php
Eneko,
I am from Santiago, Chile, and I am searching for a way to spin at the rpm I choose, any picture, say in jpg format for example. Just as you spinned the color wheel. Just to stare at it, no other output is desired.
My motivation is: I recently read about some new meanings that we could grasp about a crop circle just by looking at its spinning image. There are a few videos in Youtube showing this. For an example look at http://www.youtube.com/watch?v=KwGaZDeAWqU. I do collect hundreds of crop circle images since 1980, now that I know, I got the itch to look at them spinning at different rpms.
Since I am just a user, I wonder if you can help putting things together as per your example, but with a way to change the picture by choosing any other. I would take care of editing the pictures so they are a square and the logical center of the image is at the geometrical center of the square.
Of course I will need some guidance of how to have it running in my PC.
Well, thanks a lot and I hope to get your answer.
Best regards,
Roberto
This is great! This is a very good work. This article is just a justification of having fun with code.