Mirad que fantastica animacion creada con Javascript y HTML5, utilizando la libreria Paper.js. Es una estrella de tiras de colores que sigue al cursor de raton. El elemento canvas hace posible la integración de los dibujos y animaciones con el resto de la página y se puede combinar con texto y animaciones interactivas.
¿Os gusta?
Este es el codigo que he utilizado para su realizacion:
<center><canvas height="500" id="canvas" resize="" width="1024"></canvas></center>
<script src="http://uploads.boxify.me/59554/paper.js" type="text/javascript">
</script>
<script canvas="canvas" type="text/paperscript">
var amount = 180;
for (var i = 0; i < amount; i++) {
var path = new Path();
path.fillColor = new HsbColor(1, 1, Math.random());
path.strokeCap = 'round';
path.closed = true;
}
var position = view.center;
var mousePos = position;
var children = project.activeLayer.children;
var count = 0;
function iterate() {
count++;
var delta = (mousePos - position);
position += delta / 10;
for (var i = 1; i < amount; i++) {
var path = children[i];
var length = Math.abs(Math.sin(i + count / 20) * 300);
path.segments = [
position + delta / 1.5,
position + { angle: i * 2, length: length },
position + { angle: (i + 1) * 2, length: length }
];
path.fillColor.hue = count - length;
}
}
function onFrame() {
iterate();
}
function onMouseMove(event) {
iterate();
mousePos = event.point;
}
</script>
