Skip to content

Instantly share code, notes, and snippets.

@tinkerology

tinkerology/index.html

Created April 13, 2015 04:48
Show Gist options
  • Save tinkerology/9c0e8e57141c2b094852 to your computer and use it in GitHub Desktop.
Save tinkerology/9c0e8e57141c2b094852 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Background Generator V1.2 // source http://jsbin.com/jufoxi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta name="description" content="Background Generator V1.2">
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
a.export, a.export:visited {
text-decoration: none;
color:#000;
background-color:#ddd;
border: 2px solid #ccc;
padding:8px;
}
a.regen, a.regen:visited {
text-decoration: none;
color:#000;
background-color:#ddd;
border: 2px solid #ccc;
padding:8px;
}
a.download, a.download:visited {
text-decoration: none;
color:#000;
background-color:#ddd;
border: 2px solid #ccc;
padding:8px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<br/><br/>
<a id="exporeLink" href="#exportLink" class="export">Export coordinates, sizes and colors</a>
<a id="regenLink" href="#regenLink" class="regen">Regenerate</a>
<a id="downloadLink" href="#downloadLink" class="download">Download</a>
<script id="jsbin-javascript">
// Defaults
var minSize = 5;
var maxSize = 40;
var maxRadius = 500;
var maxCount = 1000;
var maxX = maxRadius;
var maxY = maxRadius;
var offset = 10;
var grad1innerR = 0;
var grad1innerG = 0;
var grad1innerB = 0;
var keepInside = true;
// Generated data
var circles = [];
function randInt(min,max)
{
return Math.floor(
Math.random() * (max-min) + min);
}
function newCircle(x,y,radius)
{
var circle = {
x : x,
y : y,
radius : radius
};
return circle;
}
function isOverlapping(circle1, circle2)
{
var xDist = Math.abs(circle1.x - circle2.x);
var yDist = Math.abs(circle1.y - circle2.y);
var max12Radius = Math.max(circle1.radius, circle2.radius);
max12Radius = circle1.radius + circle2.radius;
max12Radius += offset;
if (Math.sqrt(xDist*xDist+yDist*yDist) < max12Radius)
{
return true;
}
return false;
}
function anyOverlapping(circle)
{
if ( keepInside === true ) {
if (circle.x - circle.radius < 0 ||
circle.y - circle.radius < 0 )
{
return true;
}
}
for (i=0; i < circles.length; i++)
{
if (isOverlapping(circle,circles[i]))
{
return true;
}
}
return false;
}
function computeCircles(min,rax,radius)
{
for (i=0; i<maxCount; i++)
{
var color = Math.floor(Math.random() * 255);
var color2 = Math.floor(Math.random() * 255);
var x = randInt(0,maxX);
var y = randInt(0,maxY);
var aNewRadius = randInt(minSize,maxSize);
var aNewCircle = newCircle(x,y,aNewRadius);
//console.log("test x="+aNewCircle.x + " y=" + aNewCircle.y +
// " r=" + aNewCircle.radius);
if (!anyOverlapping(aNewCircle))
{
circles.push(aNewCircle);
console.log("[" + i + "] x="+aNewCircle.x + " y=" + aNewCircle.y +
" r=" + aNewCircle.radius);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// create radial gradient
var grd = context.createRadialGradient(
aNewCircle.x, aNewCircle.y, 10,
aNewCircle.x, aNewCircle.y, 300);
// Color 1
grd.addColorStop(0, 'rgba(' + color + ',0,0,.5)');
// Color 2
grd.addColorStop(0, 'rgba(' + color2 + ',0,' + color2 + '0,.5)');
context.beginPath();
context.arc(aNewCircle.x, aNewCircle.y, aNewCircle.radius,
0, 2 * Math.PI, false);
context.fillStyle = "rgba(0, 255, 0, 0.2)";
context.fillStyle = grd;
context.fill();
}
}
console.log("Circle count = " + circles.length);
}
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.download = filename;
}
$(document).ready(function () {
computeCircles(minSize,maxSize,maxRadius);
$(".export").on('click', function (event) {
console.log("Exporting");
});
$(".download").on('click', function (event) {
console.log("Downloading");
downloadCanvas(this, 'myCanvas', 'test.png');
});
$(".regen").on('click', function (event) {
console.log("Regenerating");
// circles = [];
computeCircles(minSize,maxSize,maxRadius);
});
});
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"><\/script>
<meta name="description" content="Background Generator V1.2">
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500"></canvas>
<br/><br/>
<a id="exporeLink" href="#exportLink" class="export">Export coordinates, sizes and colors</a>
<a id="regenLink" href="#regenLink" class="regen">Regenerate</a>
<a id="downloadLink" href="#downloadLink" class="download">Download</a>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">a.export, a.export:visited {
text-decoration: none;
color:#000;
background-color:#ddd;
border: 2px solid #ccc;
padding:8px;
}
a.regen, a.regen:visited {
text-decoration: none;
color:#000;
background-color:#ddd;
border: 2px solid #ccc;
padding:8px;
}
a.download, a.download:visited {
text-decoration: none;
color:#000;
background-color:#ddd;
border: 2px solid #ccc;
padding:8px;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">
// Defaults
var minSize = 5;
var maxSize = 40;
var maxRadius = 500;
var maxCount = 1000;
var maxX = maxRadius;
var maxY = maxRadius;
var offset = 10;
var grad1innerR = 0;
var grad1innerG = 0;
var grad1innerB = 0;
var keepInside = true;
// Generated data
var circles = [];
function randInt(min,max)
{
return Math.floor(
Math.random() * (max-min) + min);
}
function newCircle(x,y,radius)
{
var circle = {
x : x,
y : y,
radius : radius
};
return circle;
}
function isOverlapping(circle1, circle2)
{
var xDist = Math.abs(circle1.x - circle2.x);
var yDist = Math.abs(circle1.y - circle2.y);
var max12Radius = Math.max(circle1.radius, circle2.radius);
max12Radius = circle1.radius + circle2.radius;
max12Radius += offset;
if (Math.sqrt(xDist*xDist+yDist*yDist) < max12Radius)
{
return true;
}
return false;
}
function anyOverlapping(circle)
{
if ( keepInside === true ) {
if (circle.x - circle.radius < 0 ||
circle.y - circle.radius < 0 )
{
return true;
}
}
for (i=0; i < circles.length; i++)
{
if (isOverlapping(circle,circles[i]))
{
return true;
}
}
return false;
}
function computeCircles(min,rax,radius)
{
for (i=0; i<maxCount; i++)
{
var color = Math.floor(Math.random() * 255);
var color2 = Math.floor(Math.random() * 255);
var x = randInt(0,maxX);
var y = randInt(0,maxY);
var aNewRadius = randInt(minSize,maxSize);
var aNewCircle = newCircle(x,y,aNewRadius);
//console.log("test x="+aNewCircle.x + " y=" + aNewCircle.y +
// " r=" + aNewCircle.radius);
if (!anyOverlapping(aNewCircle))
{
circles.push(aNewCircle);
console.log("[" + i + "] x="+aNewCircle.x + " y=" + aNewCircle.y +
" r=" + aNewCircle.radius);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// create radial gradient
var grd = context.createRadialGradient(
aNewCircle.x, aNewCircle.y, 10,
aNewCircle.x, aNewCircle.y, 300);
// Color 1
grd.addColorStop(0, 'rgba(' + color + ',0,0,.5)');
// Color 2
grd.addColorStop(0, 'rgba(' + color2 + ',0,' + color2 + '0,.5)');
context.beginPath();
context.arc(aNewCircle.x, aNewCircle.y, aNewCircle.radius,
0, 2 * Math.PI, false);
context.fillStyle = "rgba(0, 255, 0, 0.2)";
context.fillStyle = grd;
context.fill();
}
}
console.log("Circle count = " + circles.length);
}
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.download = filename;
}
$(document).ready(function () {
computeCircles(minSize,maxSize,maxRadius);
$(".export").on('click', function (event) {
console.log("Exporting");
});
$(".download").on('click', function (event) {
console.log("Downloading");
downloadCanvas(this, 'myCanvas', 'test.png');
});
$(".regen").on('click', function (event) {
console.log("Regenerating");
// circles = [];
computeCircles(minSize,maxSize,maxRadius);
});
});
</script></body>
</html>
Raw
jsbin.jufoxi.css
a.export, a.export:visited {
text-decoration: none;
color:#000;
background-color:#ddd;
border: 2px solid #ccc;
padding:8px;
}
a.regen, a.regen:visited {
text-decoration: none;
color:#000;
background-color:#ddd;
border: 2px solid #ccc;
padding:8px;
}
a.download, a.download:visited {
text-decoration: none;
color:#000;
background-color:#ddd;
border: 2px solid #ccc;
padding:8px;
}
Raw
jsbin.jufoxi.js
// Defaults
var minSize = 5;
var maxSize = 40;
var maxRadius = 500;
var maxCount = 1000;
var maxX = maxRadius;
var maxY = maxRadius;
var offset = 10;
var grad1innerR = 0;
var grad1innerG = 0;
var grad1innerB = 0;
var keepInside = true;
// Generated data
var circles = [];
function randInt(min,max)
{
return Math.floor(
Math.random() * (max-min) + min);
}
function newCircle(x,y,radius)
{
var circle = {
x : x,
y : y,
radius : radius
};
return circle;
}
function isOverlapping(circle1, circle2)
{
var xDist = Math.abs(circle1.x - circle2.x);
var yDist = Math.abs(circle1.y - circle2.y);
var max12Radius = Math.max(circle1.radius, circle2.radius);
max12Radius = circle1.radius + circle2.radius;
max12Radius += offset;
if (Math.sqrt(xDist*xDist+yDist*yDist) < max12Radius)
{
return true;
}
return false;
}
function anyOverlapping(circle)
{
if ( keepInside === true ) {
if (circle.x - circle.radius < 0 ||
circle.y - circle.radius < 0 )
{
return true;
}
}
for (i=0; i < circles.length; i++)
{
if (isOverlapping(circle,circles[i]))
{
return true;
}
}
return false;
}
function computeCircles(min,rax,radius)
{
for (i=0; i<maxCount; i++)
{
var color = Math.floor(Math.random() * 255);
var color2 = Math.floor(Math.random() * 255);
var x = randInt(0,maxX);
var y = randInt(0,maxY);
var aNewRadius = randInt(minSize,maxSize);
var aNewCircle = newCircle(x,y,aNewRadius);
//console.log("test x="+aNewCircle.x + " y=" + aNewCircle.y +
// " r=" + aNewCircle.radius);
if (!anyOverlapping(aNewCircle))
{
circles.push(aNewCircle);
console.log("[" + i + "] x="+aNewCircle.x + " y=" + aNewCircle.y +
" r=" + aNewCircle.radius);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// create radial gradient
var grd = context.createRadialGradient(
aNewCircle.x, aNewCircle.y, 10,
aNewCircle.x, aNewCircle.y, 300);
// Color 1
grd.addColorStop(0, 'rgba(' + color + ',0,0,.5)');
// Color 2
grd.addColorStop(0, 'rgba(' + color2 + ',0,' + color2 + '0,.5)');
context.beginPath();
context.arc(aNewCircle.x, aNewCircle.y, aNewCircle.radius,
0, 2 * Math.PI, false);
context.fillStyle = "rgba(0, 255, 0, 0.2)";
context.fillStyle = grd;
context.fill();
}
}
console.log("Circle count = " + circles.length);
}
function downloadCanvas(link, canvasId, filename) {
link.href = document.getElementById(canvasId).toDataURL();
link.download = filename;
}
$(document).ready(function () {
computeCircles(minSize,maxSize,maxRadius);
$(".export").on('click', function (event) {
console.log("Exporting");
});
$(".download").on('click', function (event) {
console.log("Downloading");
downloadCanvas(this, 'myCanvas', 'test.png');
});
$(".regen").on('click', function (event) {
console.log("Regenerating");
// circles = [];
computeCircles(minSize,maxSize,maxRadius);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment