JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
CSS
body {
background-color: beige;
-webkit-transform: translateZ(0);
}
JavaScript
var ran = function(min, max) {
return ((Math.random() * (max - min)) + min).toFixed(2);
};
var degrees = function(radians) {
return radians * (180 / Math.PI)
};
$(document).ready(function() {
//events
var events = {
mouse_move: function(event) {}
};
$(window).on('mousemove', events.mouse_move);
var SCREEN_WIDTH = 465;
var SCREEN_HEIGHT = 465;
var DAMP = 0.98;
var paper = Raphael(0, 0, 465, 465);
var url = "http://triple-tested.com/bigbee.png";
// Precompute some constants we will need
var PIBY2 = Math.PI / 2;
var ToDegrees = 180 / Math.PI;
var circle = (function() {
var x = SCREEN_WIDTH / 2,
y = SCREEN_HEIGHT / 2,
vx = Math.random() - 0.5,
vy = Math.random() - 0.5,
dot;
return {
start: function() {
var scale = ran(0.3, 1.0);
dot = paper.image(url, x, y, 76, 37).attr({
//opacity: scale
});
dot.scale(scale);
},
update: function() {
vx += Math.random() * 0.5 - 0.25;
vy += Math.random() * 0.5 - 0.25;
var newx = x + vx;
var newy = y + vy;
var dy = newy - y;
var dx = newx - x;
var a = (Math.atan2(dy, dx) + PIBY2)*ToDegrees; // The new target rotation in degrees
dot.transform("r"+a);
x += vx;
y += vy;
vx *= DAMP;
vy *= DAMP;
//check bounds invert direction
vx = x < 50 ? vx * -1 : x > 415 ? vx * -1 : vx;
vy = y < 50 ? vy * -1 : y > 415 ? vy * -1 : vy;
x = x < 0 ? SCREEN_WIDTH : x > SCREEN_WIDTH ? 0 : x;
y = y < 0 ? SCREEN_HEIGHT : y >...