Create fluid_mov.js

UsefulSketches/fluid_mov.js

@@ -0,0 +1,231 @@
+var canvas = document.getElementById('canvas');
+var context = canvas.getContext('2d');
+console.log(context);
+
+if (!window.requestAnimationFrame) {
+    window.requestAnimationFrame = (window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame || function (callback) {
+        return window.setTimeout(callback, 17 /*~ 1000/60*/ );
+    });
+}
+
+
+if (!window.cancelAnimationFrame) {
+    window.cancelAnimationFrame = (window.cancelRequestAnimationFrame || window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelAnimationFrame || window.mozCancelRequestAnimationFrame || window.msCancelAnimationFrame || window.msCancelRequestAnimationFrame || window.oCancelAnimationFrame || window.oCancelRequestAnimationFrame || window.clearTimeout);
+}
+
+window.utils = {};
+
+window.utils.captureMouse = function (element) {
+    var mouse = {
+        x: 0,
+        y: 0,
+        event: null
+    },
+    body_scrollLeft = document.body.scrollLeft,
+        element_scrollLeft = document.documentElement.scrollLeft,
+        body_scrollTop = document.body.scrollTop,
+        element_scrollTop = document.documentElement.scrollTop,
+        offsetLeft = element.offsetLeft,
+        offsetTop = element.offsetTop;
+
+    element.addEventListener('mousemove', function (event) {
+        var x, y;
+
+        if (event.pageX || event.pageY) {
+            x = event.pageX;
+            y = event.pageY;
+        } else {
+            x = event.clientX + body_scrollLeft + element_scrollLeft;
+            y = event.clientY + body_scrollTop + element_scrollTop;
+        }
+        x -= offsetLeft;
+        y -= offsetTop;
+
+        mouse.x = x;
+        mouse.y = y;
+        mouse.event = event;
+    }, false);
+
+    return mouse;
+};
+
+window.utils.captureTouch = function (element) {
+    var touch = {
+        x: null,
+        y: null,
+        isPressed: false,
+        event: null
+    },
+    body_scrollLeft = document.body.scrollLeft,
+        element_scrollLeft = document.documentElement.scrollLeft,
+        body_scrollTop = document.body.scrollTop,
+        element_scrollTop = document.documentElement.scrollTop,
+        offsetLeft = element.offsetLeft,
+        offsetTop = element.offsetTop;
+
+    element.addEventListener('touchstart', function (event) {
+        touch.isPressed = true;
+        touch.event = event;
+    }, false);
+
+    element.addEventListener('touchend', function (event) {
+        touch.isPressed = false;
+        touch.x = null;
+        touch.y = null;
+        touch.event = event;
+    }, false);
+
+    element.addEventListener('touchmove', function (event) {
+        var x, y,
+        touch_event = event.touches[0]; //first touch
+
+        if (touch_event.pageX || touch_event.pageY) {
+            x = touch_event.pageX;
+            y = touch_event.pageY;
+        } else {
+            x = touch_event.clientX + body_scrollLeft + element_scrollLeft;
+            y = touch_event.clientY + body_scrollTop + element_scrollTop;
+        }
+        x -= offsetLeft;
+        y -= offsetTop;
+
+        touch.x = x;
+        touch.y = y;
+        touch.event = event;
+    }, false);
+
+    return touch;
+};
+
+
+window.utils.parseColor = function (color, toNumber) {
+    if (toNumber === true) {
+        if (typeof color === 'number') {
+            return (color | 0); //chop off decimal
+        }
+        if (typeof color === 'string' && color[0] === '#') {
+            color = color.slice(1);
+        }
+        return window.parseInt(color, 16);
+    } else {
+        if (typeof color === 'number') {
+            color = '#' + ('00000' + (color | 0).toString(16)).substr(-6); //pad
+        }
+        return color;
+    }
+};
+
+window.utils.colorToRGB = function (color, alpha) {
+    //number in octal format or string prefixed with #
+    if (typeof color === 'string' && color[0] === '#') {
+        color = window.parseInt(color.slice(1), 16);
+    }
+    alpha = (alpha === undefined) ? 1 : alpha;
+    //parse hex values
+    var r = color >> 16 & 0xff,
+        g = color >> 8 & 0xff,
+        b = color & 0xff,
+        a = (alpha < 0) ? 0 : ((alpha > 1) ? 1 : alpha);
+    //only use 'rgba' if needed
+    if (a === 1) {
+        return "rgb(" + r + "," + g + "," + b + ")";
+    } else {
+        return "rgba(" + r + "," + g + "," + b + "," + a + ")";
+    }
+};
+
+/**
+ * Determine if a rectangle contains the coordinates (x,y) within it's boundaries.
+ * @param {object}  rect  Object with properties: x, y, width, height.
+ * @param {number}  x     Coordinate position x.
+ * @param {number}  y     Coordinate position y.
+ * @return {boolean}
+ */
+window.utils.containsPoint = function (rect, x, y) {
+    return !(x < rect.x || x > rect.x + rect.width || y < rect.y || y > rect.y + rect.height);
+};
+
+
+window.utils.intersects = function (rectA, rectB) {
+    return !(rectA.x + rectA.width < rectB.x || rectB.x + rectB.width < rectA.x || rectA.y + rectA.height < rectB.y || rectB.y + rectB.height < rectA.y);
+};
+
+function Ball(radius, color) {
+    if (radius === undefined) {
+        radius = 100;
+    }
+    if (color === undefined) {
+        color = "#ff0000";
+    }
+    this.x = 0;
+    this.y = 0;
+    this.radius = radius;
+    this.rotation = 0;
+    this.scaleX = 1;
+    this.scaleY = 1;
+    this.color = utils.parseColor(color);
+    this.lineWidth = 1;
+}
+
+Ball.prototype.draw = function (context) {
+    context.save();
+    context.translate(this.x, this.y);
+    context.rotate(this.rotation);
+    context.scale(this.scaleX, this.scaleY);
+
+    context.lineWidth = this.lineWidth;
+    context.fillStyle = this.color;
+    context.beginPath();
+    //x, y, radius, start_angle, end_angle, anti-clockwise
+    context.arc(0, 0, this.radius, 0, (Math.PI * 2), true);
+    context.closePath();
+    context.fill();
+    if (this.lineWidth > 0) {
+        context.stroke();
+    }
+    context.restore();
+};
+
+var canvas = document.getElementById('canvas'),
+    context = canvas.getContext('2d'),
+    dots = [],
+    numDots = 50,
+    friction = 0.95;
+    density = 0.0025;
+const numParticles = Math.round(canvas.width * canvas.height * density);
+const angle = Math.random() * 2 * Math.PI;
+for (var dot, i = 0; i < numParticles; i++) {
+    dot = new Ball(1, "#000000");
+    dot.x = Math.random() * canvas.width;
+    dot.y = Math.random() * canvas.height;
+    dot.vx = Math.cos(angle) * Math.random();
+    dot.vy = Math.sin(angle) * Math.random();
+    dots.push(dot);
+}
+
+function draw(dot) {
+    dot.vx += Math.random() * 0.2 - 0.1;
+    dot.vy += Math.random() * 0.2 - 0.1;
+    dot.x += dot.vx;
+    dot.y += dot.vy;
+    dot.vx *= friction;
+    dot.vy *= friction;
+
+    if (dot.x > canvas.width) {
+        dot.x = 0;
+    } else if (dot.x < 0) {
+        dot.x = canvas.width;
+    }
+    if (dot.y > canvas.height) {
+        dot.y = 0;
+    } else if (dot.y < 0) {
+        dot.y = canvas.height;
+    }
+    dot.draw(context);
+}
+(function drawFrame() {
+    window.requestAnimationFrame(drawFrame, canvas);
+    context.clearRect(0, 0, canvas.width, canvas.height);
+
+    dots.forEach(draw);
+}());