Skip to content

Instantly share code, notes, and snippets.

@vinaychittora

vinaychittora/oscillating_bubbles.html

Last active October 28, 2015 16:07
Show Gist options
  • Save vinaychittora/fe047160a9113ce39db8 to your computer and use it in GitHub Desktop.
Save vinaychittora/fe047160a9113ce39db8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
oscillating_bubbles.html
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/* Reset
--------------------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code,
del, dfn, font, img, ins, kbd, q, s, samp, small, strong, em, strike, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: normal; font-style: normal; font-size: 100%; font-family: inherit; vertical-align: baseline; list-style-type: none;}
html,body {
overflow: hidden; width: 100%; height: 100%;
}
canvas {
cursor: pointer; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<canvas id="canvas_logo" width="400" height="400"></canvas>
<script>
var Nodes = {
// Settings
density: 20,
draw_distance: 0,
baseRadius: 3,
maxLineThickness: 4,
reactionSensitivity: 0.5,
lineThickness: 1,
points: [],
mouse: { x: -1000, y: -1000, down: false, move: false },
animation: null,
canvas: null,
context: null,
imageInput: null,
bgImage: null,
bgCanvas: null,
bgContext: null,
bgContextPixelData: null,
init: function() {
// Set up the visual canvas
this.canvas = document.getElementById('canvas_logo');
this.context = this.canvas.getContext( '2d' );
this.context.globalCompositeOperation = "lighter";
this.canvas.style.display = 'block';
this.canvas.addEventListener('mousemove', this.mouseMove, false);
this.canvas.addEventListener('mousedown', this.mouseDown, false);
this.canvas.addEventListener('mouseup', this.mouseUp, false);
this.canvas.addEventListener('mouseout', this.mouseOut, false);
// Init
this.preparePoints();
this.draw();
this.wiggle();
var object_int = this;
setInterval(function(){
object_int.wiggle();
}, 650);
},
getRandomInt: function(min, max) {
return Math.round(Math.random() * (max - min + 1)) + min;
},
preparePoints: function() {
this.points = [];
var width, height, i, j;
var color_list = ["210, 77, 87", "242, 38, 19", "217, 30, 24", "150, 40, 27", "239, 72, 54", "214, 69, 65", "192, 57, 43", "207, 0, 15", "231, 76, 60", "219, 10, 91", "246, 71, 71", "241, 169, 160", "210, 82, 127", "224, 130, 131", "246, 36, 89", "226, 106, 106", "220, 198, 224", "102, 51, 153", "103, 65, 114", "174, 168, 211", "145, 61, 136", "154, 18, 179", "191, 85, 236", "190, 144, 212", "142, 68, 173", "155, 89, 182", "68,108,179", "228, 241, 254", "65, 131, 215", "89, 171, 227", "129, 207, 224", "82, 179, 217", "197, 239, 247", "34, 167, 240", "52, 152, 219", "44, 62, 80", "25, 181, 254", "51, 110, 123", "34, 49, 63", "107, 185, 240", "30, 139, 195", "58, 83, 155", "52, 73, 94", "103, 128, 159", "37, 116, 169", "31, 58, 147", "137, 196, 244", "75, 119, 190", "92, 151, 191", "78,205,196", "162, 222, 208", "135, 211, 124", "144, 198, 149", "38, 166, 91", "3, 201, 169", "104, 195, 163", "101, 198, 187", "27, 188, 155", "27, 163, 156", "102, 204, 153", "54, 215, 183", "200, 247, 197", "134, 226, 213", "46, 204, 113", "22, 160, 133", "63, 195, 128", "1, 152, 117", "3, 166, 120", "77, 175, 124", "42, 187, 155", "0, 177, 106", "30, 130, 76", "4, 147, 114", "38, 194, 129", "245, 215, 110", "247, 202, 24", "244, 208, 63", "233,212,96", "253, 227, 167", "248, 148, 6", "235, 149, 50", "232, 126, 4", "244, 179, 80", "242, 120, 75", "235, 151, 78", "245, 171, 53", "211, 84, 0", "243, 156, 18", "249, 105, 14", "249, 191, 59", "242, 121, 53", "230, 126, 34", "236,236,236", "108, 122, 137", "210, 215, 211", "238, 238, 238", "189, 195, 199", "236, 240, 241", "149, 165, 166", "218, 223, 225", "171, 183, 183", "242, 241, 239", "191, 191, 191"]
var offsetTop = 110;
var offsetLeft = 110;
for (i=0 ; i<=75; i++){
var color = color_list[this.getRandomInt(0,color_list.length)];
offset = generate_dots();
this.points.push( { x: offset.x, y: offset.y, originalX: offset.x, originalY: offset.y, color: color, radius: Math.round(Math.random() * (12 - 2 + 1)) + 2, opacityDelay: Math.round(Math.random()*100)/100 } );
}
},
rdm: function(from, to){
return Math.floor(Math.random() * (to - from + 1) + from);
},
wiggle: function() {
if ( !Nodes.mouse.move ) {
for (var i = 0; i < this.points.length; i++ ){
currentPoint = this.points[i];
var newcx = currentPoint.originalX + this.rdm(-currentPoint.radius, currentPoint.radius);
var newcy = currentPoint.originalY + this.rdm(-currentPoint.radius, currentPoint.radius);
$(currentPoint).stop().animate({x: newcx, y: newcy}, currentPoint.radius * 100, 'linear');
}
}
},
updatePoints: function() {
var i, currentPoint, theta, distance;
for (i = 0; i < this.points.length; i++ ){
currentPoint = this.points[i];
theta = Math.atan2( currentPoint.y - this.mouse.y, currentPoint.x - this.mouse.x);
if ( this.mouse.down ) {
distance = this.reactionSensitivity * 200 / Math.sqrt((this.mouse.x - currentPoint.x) * (this.mouse.x - currentPoint.x) +
(this.mouse.y - currentPoint.y) * (this.mouse.y - currentPoint.y));
} else {
distance = this.reactionSensitivity * 100 / Math.sqrt((this.mouse.x - currentPoint.x) * (this.mouse.x - currentPoint.x) +
(this.mouse.y - currentPoint.y) * (this.mouse.y - currentPoint.y));
}
currentPoint.x += Math.cos(theta) * distance + (currentPoint.originalX - currentPoint.x) * 0.05;
currentPoint.y += Math.sin(theta) * distance + (currentPoint.originalY - currentPoint.y) * 0.05;
}
},
drawPoints: function() {
var i, currentPoint;
for ( i = 0; i < this.points.length; i++ ) {
currentPoint = this.points[i];
// Draw the dot.
this.context.fillStyle = 'rgba('+currentPoint.color+','+currentPoint.opacityDelay+')';
if(currentPoint.opacityDelay < 1) currentPoint.opacityDelay = currentPoint.opacityDelay + 0.025;
this.context.strokeStyle = 'rgb('+currentPoint.color+')';
this.context.beginPath();
this.context.arc(currentPoint.x, currentPoint.y, currentPoint.radius ,0 , Math.PI*2, true);
this.context.closePath();
this.context.fill();
}
},
draw: function() {
this.animation = requestAnimationFrame( function(){ Nodes.draw() } );
this.clear();
this.updatePoints();
this.drawPoints();
},
clear: function() {
this.canvas.width = this.canvas.width;
},
mouseDown: function( event ){
Nodes.mouse.down = true;
},
mouseUp: function( event ){
Nodes.mouse.down = false;
},
mouseMove: function(event){
for (var i = 0; i < Nodes.points.length; i++ ){
$(Nodes.points[i]).stop();
}
Nodes.mouse.x = event.offsetX || (event.layerX - Nodes.canvas.offsetLeft);
Nodes.mouse.y = event.offsetY || (event.layerY - Nodes.canvas.offsetTop);
Nodes.mouse.move = true;
},
mouseOut: function(event){
Nodes.mouse.x = -1000;
Nodes.mouse.y = -1000;
Nodes.mouse.down = false;
Nodes.mouse.move = false;
}
}
</script>
<script type="text/javascript">
var dotsColor = "77,78,79";
$('html,body').css({'background': 'transparent'});
$('#canvas_logo').css({'background': 'transparent'});
setTimeout(function(){
Nodes.init();
}, 250);
function generate_dots(){
var h = $("#canvas_logo").height();
var w = $("#canvas_logo").width();
var minDimension = h < w ? h : w;
var radius = (minDimension / 2) - 20;
var angle = Math.random() * Math.PI*2;
x = Math.cos(angle)*90;
y = Math.sin(angle)*90;
rnd_pos_x = Math.round(Math.random()*20*100)/100 ;
rnd_pos_y = Math.round(Math.random()*20*100)/100 ;
var offset = {
y: parseInt(y + radius + 10, 10)+rnd_pos_y,
x: parseInt(x + radius + 10, 10)+rnd_pos_x
};
return offset
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment