From c0e929bb44a33c5a9cbbde40d5262b7c0838fbab Mon Sep 17 00:00:00 2001 From: RDxR10 Date: Fri, 23 Oct 2020 23:39:45 +0530 Subject: [PATCH 1/3] Create fluid_mov.js --- UsefulSketches/fluid_mov.js | 47 +++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 UsefulSketches/fluid_mov.js diff --git a/UsefulSketches/fluid_mov.js b/UsefulSketches/fluid_mov.js new file mode 100644 index 0000000..4aab80d --- /dev/null +++ b/UsefulSketches/fluid_mov.js @@ -0,0 +1,47 @@ +const num = 7000; +const range = 6; + +let Xk = []; +let Yk = []; + +/* +var setup = function() { + canvas = document.getElementById("canvas"); + ctx = canvas.getContext("2d"); + canvas.onmousedown = mouseDown; + canvas.onmouseup = mouseUp; + canvas.onmousemove = getMousePosition; + loopTimer = setInterval(loop, frameDelay); +} +*/ + +function setup() { + createCanvas(650, 300); + for ( let i = 0; i < num; i++ ) { + Xk[i] = width / 2; + Yk[i] = height / 2; + } + frameRate(30); +} + +function draw() { + background(51); + + + for ( let i = 1; i < num; i++ ) { + Xk[i - 1] = Xk[i]; + Yk[i - 1] = Yk[i]; + } + + Xk[num - 1] += random(-range, range); + Yk[num - 1] += random(-range, range); + Xk[num - 1] = constrain(ax[num - 1], 0, width); + Yk[num - 1] = constrain(ay[num - 1], 0, height); + + + for ( let j = 1; j < num; j++ ) { + let val = j / num * 272.0 + 77; + stroke(val); + line(Xk[j - 1], Yk[j - 1], Xk[j], Yk[j]); + } +} From 06602cf81e7dd990eebfeed6b03ec900d70bd0c8 Mon Sep 17 00:00:00 2001 From: RDxR10 Date: Sat, 24 Oct 2020 12:02:03 +0530 Subject: [PATCH 2/3] Update fluid_mov.js Error fixed --- UsefulSketches/fluid_mov.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/UsefulSketches/fluid_mov.js b/UsefulSketches/fluid_mov.js index 4aab80d..3f1da39 100644 --- a/UsefulSketches/fluid_mov.js +++ b/UsefulSketches/fluid_mov.js @@ -35,8 +35,8 @@ function draw() { Xk[num - 1] += random(-range, range); Yk[num - 1] += random(-range, range); - Xk[num - 1] = constrain(ax[num - 1], 0, width); - Yk[num - 1] = constrain(ay[num - 1], 0, height); + Xk[num - 1] = constrain(Xk[num - 1], 0, width); + Yk[num - 1] = constrain(Yk[num - 1], 0, height); for ( let j = 1; j < num; j++ ) { From 22575cbefe32bff3996f31c617d8f0f5d39f8191 Mon Sep 17 00:00:00 2001 From: RDxR10 Date: Sat, 24 Oct 2020 13:33:56 +0530 Subject: [PATCH 3/3] Update fluid_mov.js Major Update --- UsefulSketches/fluid_mov.js | 270 ++++++++++++++++++++++++++++++------ 1 file changed, 227 insertions(+), 43 deletions(-) diff --git a/UsefulSketches/fluid_mov.js b/UsefulSketches/fluid_mov.js index 3f1da39..e5500d2 100644 --- a/UsefulSketches/fluid_mov.js +++ b/UsefulSketches/fluid_mov.js @@ -1,47 +1,231 @@ -const num = 7000; -const range = 6; - -let Xk = []; -let Yk = []; - -/* -var setup = function() { - canvas = document.getElementById("canvas"); - ctx = canvas.getContext("2d"); - canvas.onmousedown = mouseDown; - canvas.onmouseup = mouseUp; - canvas.onmousemove = getMousePosition; - loopTimer = setInterval(loop, frameDelay); +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; } -*/ - -function setup() { - createCanvas(650, 300); - for ( let i = 0; i < num; i++ ) { - Xk[i] = width / 2; - Yk[i] = height / 2; - } - frameRate(30); + +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() { - background(51); - - - for ( let i = 1; i < num; i++ ) { - Xk[i - 1] = Xk[i]; - Yk[i - 1] = Yk[i]; - } - - Xk[num - 1] += random(-range, range); - Yk[num - 1] += random(-range, range); - Xk[num - 1] = constrain(Xk[num - 1], 0, width); - Yk[num - 1] = constrain(Yk[num - 1], 0, height); - - - for ( let j = 1; j < num; j++ ) { - let val = j / num * 272.0 + 77; - stroke(val); - line(Xk[j - 1], Yk[j - 1], Xk[j], Yk[j]); - } +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); +}());