Was playing around with Louis Hoebregts's pretty cool pen
A Pen by Irem Lopsum on CodePen.
Created
February 26, 2016 08:46
-
-
Save hateum/b1b73d3e66109fa20741 to your computer and use it in GitHub Desktop.
MKNaxd
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <canvas id="scene"></canvas> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var canvas = document.querySelector("#scene"), | |
| ctx = canvas.getContext("2d"), | |
| particles = [], | |
| amount = 0, | |
| mouse = { | |
| x: 0, | |
| y: 0 | |
| }, | |
| radius = 0.7; //Init radius of the force field | |
| var colors = ["rgba(26, 188, 156, .6)", "rgba(46, 204, 113, .4)", "rgba(52, 152, 219, .4)", "rgba(52, 152, 219, .4)", "rgba(241, 196, 15, .6)", "rgba(231, 76, 60, .4)"]; | |
| var colorsTwo = ["rgba(26, 188, 156, 1)", "rgba(46, 204, 113, 1)", "rgba(52, 152, 219, 1)", "rgba(52, 152, 219, 1)", "rgba(241, 196, 15, 1)", "rgba(231, 76, 60, 1)"]; | |
| var copy = "Swipes ♥"; // Text to display | |
| var initSize = Math.floor(Math.random() * .6) + 1 ; | |
| var hoverSize = initSize + .7; | |
| var ww = canvas.width = window.innerWidth; | |
| var wh = canvas.height = window.innerHeight; | |
| function Particle(x, y) { | |
| this.x = Math.random() * ww; | |
| this.y = Math.random() * wh; | |
| this.dest = { | |
| x: x, | |
| y: y | |
| }; | |
| //this.r = Math.random() * 1; // the size of bubbles | |
| this.vx = (Math.random() - 0.5) * 2; | |
| this.vy = (Math.random() - 0.5) * 2; | |
| this.accX = 0; | |
| this.accY = 0; | |
| this.friction = Math.random() * 0.015 + 0.94; // force of bounce, just try to change 0.015 to 0.5 | |
| //this.color = colors[Math.floor(Math.random() * 10)]; | |
| //this.colorTwo = colorsTwo[Math.floor(Math.random() * 10)]; | |
| } | |
| Particle.prototype.render = function() { | |
| this.accX = (this.dest.x - this.x) / 200; //acceleration for X | |
| this.accY = (this.dest.y - this.y) / 200; //acceleration for Y | |
| this.vx += this.accX; | |
| this.vy += this.accY; | |
| this.vx *= this.friction; | |
| this.vy *= this.friction; | |
| this.x += this.vx; | |
| this.y += this.vy; | |
| ctx.fillStyle = this.color; | |
| ctx.beginPath(); | |
| ctx.arc(this.x, this.y, this.r, Math.PI * 2, false); | |
| ctx.fill(); | |
| var a = this.x - mouse.x; | |
| var b = this.y - mouse.y; | |
| var distance = Math.sqrt(a * a + b * b); | |
| if (distance < (radius * 70)) { | |
| this.accX = (this.x - mouse.x) / 20; //acceleration on mouseover X, smaller faster | |
| this.accY = (this.y - mouse.y) / 20; //acceleration on mouseover Y, smaller faster | |
| this.vx += this.accX; | |
| this.vy += this.accY; | |
| //ctx.fillStyle = this.colorTwo; | |
| } | |
| if (distance < (radius * 70)) { | |
| this.colorTwo = colorsTwo[Math.floor(Math.random() * 10)]; | |
| ctx.fillStyle = this.colorTwo; | |
| this.r = hoverSize; // the size of bubbles | |
| } | |
| if (distance > (radius * 70)) { | |
| this.colorOne = colors[Math.floor(Math.random() * 10)]; | |
| ctx.fillStyle = this.colorOne; | |
| this.r = initSize | |
| } | |
| } | |
| function onMouseMove(e) { | |
| mouse.x = e.clientX; | |
| mouse.y = e.clientY; | |
| } | |
| function initScene() { | |
| ww = canvas.width = window.innerWidth; | |
| wh = canvas.height = window.innerHeight; | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| ctx.font = "bold " + (ww / 10) + "px sans-serif"; // Size of the text | |
| ctx.textAlign = "center"; | |
| ctx.fillText(copy, ww / 2, wh / 2); //Centering | |
| var data = ctx.getImageData(0, 0, ww, wh).data; | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| ctx.globalCompositeOperation = "screen"; | |
| particles = []; | |
| for (var i = 0; i < ww; i += Math.round(ww / 400)) { //400 here represents the amount of particles | |
| for (var j = 0; j < wh; j += Math.round(ww / 400)) { | |
| if (data[((i + j * ww) * 4) + 3] > 250) { | |
| particles.push(new Particle(i, j)); | |
| } | |
| } | |
| } | |
| amount = particles.length; | |
| } | |
| function onMouseClick() { | |
| radius = 4; //onclick expand radius | |
| } | |
| function offMouseClick() { | |
| radius = 0.5; //offClick init radius | |
| } | |
| function delayedInitRadius() { | |
| setTimeout(offMouseClick, 500); //delay for offClick init radius | |
| } | |
| function render(a) { | |
| requestAnimationFrame(render); | |
| ctx.clearRect(0, 0, canvas.width, canvas.height); | |
| for (var i = 0; i < amount; i++) { | |
| particles[i].render(); | |
| } | |
| }; | |
| window.addEventListener("resize", initScene); | |
| window.addEventListener("mousemove", onMouseMove); | |
| window.addEventListener("mousedown", onMouseClick); | |
| window.addEventListener("mouseup", delayedInitRadius); | |
| initScene(); | |
| requestAnimationFrame(render); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| margin:0; | |
| overflow: hidden; | |
| font-size:0; | |
| } | |
| canvas { | |
| background: rgba(0,12,47,1); | |
| width: 100vw; | |
| height: 100vh; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment