Art Work Images

HTML
<div class="wrap"> <canvas id="bubble"></canvas> <span class="text"></span> </div>
SCSS
body { height: 100vh; display: flex; } .wrap { overflow: hidden; position: relative; width: 400px; height: 300px; margin: auto; background-image: linear-gradient(-206deg, #835EFF 0%, #FF008D 100%); .text { z-index: 1; position: absolute; top: 15px; left: -15px; background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAEsCAMAAADaaRXwAAAAq1BMVEUAAAD////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////Nr6iZAAAAOHRSTlMA+TUiL+T1Cr8SBukDQRqnDh4W7Ew5gyjg8XXS3IlQXFcsPW9ixKFou33JtZet2dawk0bNju6bejKAdzgAABC+SURBVHja7MGBAAAAAICg/akXqQIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGbnzBYUxaEAelkEERQBFXDf9wX3/P+XTW4SBJWumZ6u6VGb80IEklD3EBIgVE5OTk5OTk5OTk5OTs7vpTprNpsu/Of0J+ZxZMED+ojWXsGU4kA2hq/DV+hjWoQDH4PiEUJU+I/R1xKtJtCfoh3S1TJAaW8WFhZkcGidiwp8gdGmRZThjRmvEy6qYxIiDeA/5kSQ9rMQj9ZOhfQJXdazTB7plumXQrbvLmRDUvQrv0OIgg1B2+6qPxLSZMcCz7gm3TD5bCE2SdH9DiHDXq+nwhf0aE3hwVBLPxKiUmOBA89YU5p1BFCq0ToqHytEIgzpm4Rgm2vAF2ADmAMjWwiU7akMWRiN1Yx6rGLYu58pRJFluYk6erJcN5RvEGL/nZAF3cH+QsjfU23RImqfKQSp4TXdx9R3CVnAF1yxZ/4lISUUcvhcIV0Uot6E+Hrt2pj5IKj0OpcT/rzHn+3XIx8Gddqw6C+6cEEeXQ/qnJZ2keUSJCi9xrozUwGx5DVesuS6asENdbTfjyu6EKLTxiryG93GejEEhRZfARBLo4yD22Zd5Yd3uixktsX5TCFav0go56vF4jcKCBKuDUihNzxC8WZHPiDCLLOmRsikQBhaBWIqa4+vWuHZ73qEU6iCwLiEhBKMTS5kINGSWf7ellCkTnwZ3KAI6BPODoftASu6gXt0PlOIdCacMVA6JGZehRulC+FIUiJkgunIFBtuQvwWiTl3qZDwUYhRJBxNehAyluItmUK2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'); } } .text, canvas { width: 100%; height: 100%; }
JAVASCRIPT
;(function() { "use strict"; var lava0; var ge1doot = { screen: { elem: null, callback: null, ctx: null, width: 0, height: 0, left: 0, top: 0, init: function (id, callback, initRes) { this.elem = document.getElementById(id); this.callback = callback || null; if (this.elem.tagName == "CANVAS") this.ctx = this.elem.getContext("2d"); window.addEventListener('resize', function () { this.resize(); }.bind(this), false); this.elem.onselectstart = function () { return false; } this.elem.ondrag = function () { return false; } initRes && this.resize(); return this; }, resize: function () { var o = this.elem; this.width = o.offsetWidth; this.height = o.offsetHeight; for (this.left = 0, this.top = 0; o != null; o = o.offsetParent) { this.left += o.offsetLeft; this.top += o.offsetTop; } if (this.ctx) { this.elem.width = this.width; this.elem.height = this.height; } this.callback && this.callback(); } } } // Point constructor var Point = function(x, y) { this.x = x; this.y = y; this.magnitude = x * x + y * y; this.computed = 0; this.force = 0; }; Point.prototype.add = function(p) { return new Point(this.x + p.x, this.y + p.y); }; // Ball constructor var Ball = function(parent) { var min = .1; var max = 1.5; this.vel = new Point( (Math.random() > 0.5 ? 1 : -1) * (0.2 + Math.random() * 0.25), (Math.random() > 0.5 ? 1 : -1) * (0.2 + Math.random()) ); this.pos = new Point( parent.width * 0.2 + Math.random() * parent.width * 0.6, parent.height * 0.2 + Math.random() * parent.height * 0.6 ); this.size = (parent.wh / 15) + ( Math.random() * (max - min) + min ) * (parent.wh / 15); this.width = parent.width; this.height = parent.height; }; // move balls Ball.prototype.move = function() { // bounce borders if (this.pos.x >= this.width - this.size) { if (this.vel.x > 0) this.vel.x = -this.vel.x; this.pos.x = this.width - this.size; } else if (this.pos.x <= this.size) { if (this.vel.x < 0) this.vel.x = -this.vel.x; this.pos.x = this.size; } if (this.pos.y >= this.height - this.size) { if (this.vel.y > 0) this.vel.y = -this.vel.y; this.pos.y = this.height - this.size; } else if (this.pos.y <= this.size) { if (this.vel.y < 0) this.vel.y = -this.vel.y; this.pos.y = this.size; } // velocity this.pos = this.pos.add(this.vel); }; // lavalamp constructor var LavaLamp = function(width, height, numBalls, c0, c1) { this.step = 5; this.width = width; this.height = height; this.wh = Math.min(width, height); this.sx = Math.floor(this.width / this.step); this.sy = Math.floor(this.height / this.step); this.paint = false; this.metaFill = createRadialGradient(width, height, width, c0, c1); this.plx = [0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0]; this.ply = [0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 1]; this.mscases = [0, 3, 0, 3, 1, 3, 0, 3, 2, 2, 0, 2, 1, 1, 0]; this.ix = [1, 0, -1, 0, 0, 1, 0, -1, -1, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1]; this.grid = []; this.balls = []; this.iter = 0; this.sign = 1; // init grid for (var i = 0; i < (this.sx + 2) * (this.sy + 2); i++) { this.grid[i] = new Point( (i % (this.sx + 2)) * this.step, (Math.floor(i / (this.sx + 2))) * this.step ) } // create metaballs for (var k = 0; k < numBalls; k++) { this.balls[k] = new Ball(this); } }; // compute cell force LavaLamp.prototype.computeForce = function(x, y, idx) { var force; var id = idx || x + y * (this.sx + 2); if (x === 0 || y === 0 || x === this.sx || y === this.sy) { force = 0.6 * this.sign; } else { force = 0; var cell = this.grid[id]; var i = 0; var ball; while (ball = this.balls[i++]) { force += ball.size * ball.size / (-2 * cell.x * ball.pos.x - 2 * cell.y * ball.pos.y + ball.pos.magnitude + cell.magnitude); } force *= this.sign } this.grid[id].force = force; return force; }; // compute cell LavaLamp.prototype.marchingSquares = function(next) { var x = next[0]; var y = next[1]; var pdir = next[2]; var id = x + y * (this.sx + 2); if (this.grid[id].computed === this.iter) { return false; } var dir, mscase = 0; // neighbors force for (var i = 0; i < 4; i++) { var idn = (x + this.ix[i + 12]) + (y + this.ix[i + 16]) * (this.sx + 2); var force = this.grid[idn].force; if ((force > 0 && this.sign < 0) || (force < 0 && this.sign > 0) || !force) { // compute force if not in buffer force = this.computeForce( x + this.ix[i + 12], y + this.ix[i + 16], idn ); } if (Math.abs(force) > 1) mscase += Math.pow(2, i); } if (mscase === 15) { // inside return [x, y - 1, false]; } else { // ambiguous cases if (mscase === 5) dir = (pdir === 2) ? 3 : 1; else if (mscase === 10) dir = (pdir === 3) ? 0 : 2; else { // lookup dir = this.mscases[mscase]; this.grid[id].computed = this.iter; } // draw line var ix = this.step / ( Math.abs(Math.abs(this.grid[(x + this.plx[4 * dir + 2]) + (y + this.ply[4 * dir + 2]) * (this.sx + 2)].force) - 1) / Math.abs(Math.abs(this.grid[(x + this.plx[4 * dir + 3]) + (y + this.ply[4 * dir + 3]) * (this.sx + 2)].force) - 1) + 1 ); ctx.lineTo( this.grid[(x + this.plx[4 * dir]) + (y + this.ply[4 * dir]) * (this.sx + 2)].x + this.ix[dir] * ix, this.grid[(x + this.plx[4 * dir + 1]) + (y + this.ply[4 * dir + 1]) * (this.sx + 2)].y + this.ix[dir + 4] * ix ); this.paint = true; // next return [ x + this.ix[dir + 4], y + this.ix[dir + 8], dir ]; } }; LavaLamp.prototype.renderMetaballs = function() { var i = 0, ball; while (ball = this.balls[i++]) ball.move(); // reset grid this.iter++; this.sign = -this.sign; this.paint = false; ctx.fillStyle = this.metaFill; ctx.beginPath(); // compute metaballs i = 0; //ctx.shadowBlur = 50; //ctx.shadowColor = "green"; while (ball = this.balls[i++]) { // first cell var next = [ Math.round(ball.pos.x / this.step), Math.round(ball.pos.y / this.step), false ]; // marching squares do { next = this.marchingSquares(next); } while (next); // fill and close path if (this.paint) { ctx.fill(); ctx.closePath(); ctx.beginPath(); this.paint = false; } } }; // gradients var createRadialGradient = function(w, h, r, c0, c1) { var gradient = ctx.createRadialGradient( w / 1, h / 1, 0, w / 1, h / 1, r ); gradient.addColorStop(0, c0); gradient.addColorStop(1, c1); return gradient; }; // canvas var screen = ge1doot.screen.init("bubble", null, true), ctx = screen.ctx; screen.resize(); // create LavaLamps lava0 = new LavaLamp(screen.width, screen.height, 6, "#FF9298", "#E4008E"); run(); })();
Expand for more options Login