Skip to content

Instantly share code, notes, and snippets.

@LuisSevillano

LuisSevillano/index.html

Last active March 23, 2016 19:15
Show Gist options
  • Save LuisSevillano/bff3ff1defd73b2e9dba to your computer and use it in GitHub Desktop.
Save LuisSevillano/bff3ff1defd73b2e9dba to your computer and use it in GitHub Desktop.
Download ZIP
Mouse event
Raw
index.html
<html>
<head>
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="circles"></div>
<script type="text/javascript">
var width = 1900, height = 900, aleatorioX, aleatorioY, aleatorioFont;
var svg = d3.select("#circles")
.append("svg")
.attr("height", height)
.attr("width", width)
.on("mousemove", draw)
.on("click", rain)
//.append("g");
setInterval(function(){
bubbles();
}, 1);
setInterval(function(){
text();
}, 500);
setInterval(function(){
rain();
}, 10000);
function bubbles(){
svg.append("circle")
.attr("cx", Math.floor(Math.random()*1800)+1)
.attr("cy", Math.floor(Math.random()*800)+1)
.attr("r", 0)
.style("opacity", "0.1")
.attr("fill", randomColor)
.transition()
.duration(1500)
.ease("quad")
.attr("r", Math.floor(Math.random()*150)+50)
.style("opacity", "0")
.attr("stroke", "white")
.remove();
}
function rain(){
for (var i = 0; i <= 10; i++) {
aleatorioY = Math.floor(Math.random()*100)-150;
aleatorioX = Math.floor(Math.random()*1800)+50;
aleatorioFont = Math.floor(Math.random()*100)+20;
svg.append("text")
.style("opacity", "0")
.transition()
.attr("fill", randomColor)
.text(getRandomChar())
.attr("x", aleatorioX)
.attr("y", aleatorioY)
.attr("font-size", aleatorioFont)
.style("opacity", "0.5")
.transition()
.duration(2000)
.ease("bounce")
.attr("y", "1200")
.transition()
.duration(1000)
.ease("exp")
.style("opacity", "0")
.remove();
}
}
function text(){
svg.append("text")
.style("opacity", "0.3")
.attr("fill", randomColor)
.text(getRandomChar())
.attr("x", Math.floor(Math.random()*1500)+100)
.attr("y", Math.floor(Math.random()*700)+100)
.attr("font-size", Math.floor(Math.random()*100)+20)
.transition()
.duration(1000)
.ease("exp")
.style("opacity", "0")
.remove();
}
function draw(){
svg.append("circle")
.attr("cx", d3.event.pageX)
.attr("cy", d3.event.pageY)
.style("opacity", ".9")
.attr("r", "0")
.attr("fill", "none")
.transition()
.ease("bounce")
.attr("fill", randomColor)
.transition()
.duration(800)
.attr("r", 50)
.transition()
.duration(250)
.attr("r", 60)
.transition()
.style("opacity", "0.2")
.transition()
.duration(100)
.attr("r", 0)
.transition()
.duration(100)
.style("opacity", "0")
.remove();
}
function getRandomNumber(lowerBound,upperBound){
aleatorio = Math.floor(Math.random() * (upperBound - lowerBound)) + lowerBound;
return aleatorio;
}
function getRandomChar() {
var lowerChars = "abcdefghijklmnopqrstuvwxyz";
var upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var charSet = "";
charSet += lowerChars; charSet += upperChars;
caracter = charSet.charAt(Math.floor(Math.random()*charSet.length));
return caracter;
}
var randomColor = (function(){
var golden_ratio_conjugate = 0.618033988749895;
var h = Math.random();
var hslToRgb = function (h, s, l){
var r, g, b;
if(s == 0){
r = g = b = l; // achromatic
}else{
function hue2rgb(p, q, t){
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return '#'+Math.round(r * 255).toString(16)+Math.round(g * 255).toString(16)+Math.round(b * 255).toString(16);
};
return function(){
h += golden_ratio_conjugate;
h %= 1;
return hslToRgb(h, 0.5, 0.60);
};
})();
/* .attr("stroke", function() {
return "hsl(" + Math.random() * 360 + ",100%,50%)";
})*/
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment