Quantum Particles

by Jessie James Cosare

HTML

<div id="quantumBall"></div>

JavaScript

var particleChangePerMs = 500;
var particleTotal = 500;
var particleSizeInRelationToCircle = 95;

var svgWidth  = (window.innerWidth > window.innerHeight) ? window.innerHeight:window.innerWidth;
var svgHeight = (window.innerHeight > window.innerWidth) ? window.innerWidth:window.innerHeight;

var circleX = svgWidth / 2;
var circleY = svgHeight / 2;
var circleRadius = (circleX / 4) + (circleY / 4);
var circleDiameter = circleRadius * 2;

var particleX =  function(){ 
    return Math.floor(Math.random() * circleDiameter) + circleX - circleRadius;
};
var particleY =  function(){
    return Math.floor(Math.random() * circleDiameter) + circleY - circleRadius;
};
var particleRadius = function(){
    return circleDiameter / particleSizeInRelationToCircle;
};
var particleColorList = [
    'blue',
    'red'
];
var particleColor = function(){
    return "url(#" + particleColorList[Math.floor(Math.random()*particleColorList.length)] + "Gradient)";
};

var svg = d3.select("#quantumBall")
        .append("svg")
        .attr("width", svgWidth)
        .attr("height", svgHeight);

var blackGradient = svg.append("svg:defs")
    .append("svg:radialGradient")
    .attr("id", "blackGradient")
    .attr("cx", "50%")
    .attr("cy", "50%")
    .attr("radius", "90%")

 blackGradient.append("svg:stop")
    .attr("offset", "80%")
    .attr("stop-color", "black")

 blackGradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "grey")

var redGradient = svg.append("svg:defs")
    .append("svg:linearGradient")
    .attr("id", "redGradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");

 redGradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "red")
    .attr("stop-opacity", 1);

 redGradient.append("svg:stop")
    .attr("offset", "100%")
    .attr("stop-color", "pink")
    .attr("stop-opacity", 1);

var blueGradient = svg.append("svg:defs")
   ...