JSFiddle - React, Tailwind, and code Playground
JavaScript
// OMG STOLEN FROM PAUL IRISH. HAHAHHAHAH
// THANKS PAUL ~ shocks (HN)
// p.s. SO MUCH FUN. :>
window.requestAnimFrame = (function() {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
function( /* function */ callback, /* DOMElement */ element) {
window.setTimeout(callback, 1000 / 60);
};
})();
(function(window, document, undefined) {
function ribbon(context) {
this.init(context);
}
ribbon.prototype = {
context: null,
mouseX: null,
mouseY: null,
painters: null,
interval: null,
init: function(context) {
this.context = context;
this.context.lineWidth = 1;
this.context.globalCompositeOperation = 'source-over';
this.mouseX = SCREEN_WIDTH / 2;
this.mouseY = SCREEN_HEIGHT / 2;
this.painters = new Array();
for (var i = 0; i < 50; i++) {
this.painters.push({
dx: SCREEN_WIDTH / 2,
dy: SCREEN_HEIGHT / 2,
ax: 0,
ay: 0,
div: 0.1,
ease: Math.random() * 0.2 + 0.6
});
}
this.isDrawing = false;
var self = this;
(function animloop() {
self.update();
requestAnimFrame(animloop);
})();
},
destroy: function() {
clearInterval(this.interval);
},
strokeStart: function(mouseX, mouseY) {
this.mouseX = mouseX;
this.mouseY = mouseY
this.context.strokeStyle = "rgba(" + COLOR[0] + ", " + COLOR[1] + ", " + COLOR[2] + ", 0.05 )";
for (var i = 0; i < this.painters.length; i++) {
this.painters[i].dx = mouseX;
...