pstuffa/README.md

## README.md

      
    Raw
  

              README.md
            
          
    A fun combination of two Mike Bostock blocks - OMG Particules and Superformula Tweening
Click on the shapes at the top to change the drag shapes.

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  margin: 0;
  background: #222;
  min-width: 960px;
}

rect {
  fill: none;
  pointer-events: all;
}

.small {
  fill: steelblue;
  fill-opacity: .5;
  stroke: white;
}

.small:hover {
  fill: white;
  fill: lightsteelblue;
}


.big {
  stroke: #666;
  stroke-width: 2;
  fill: none;
}


</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/d3.superformula.v0.min.js"></script>
<script>

var width = Math.max(1200, innerWidth),
    height = Math.max(600, innerHeight);

var i = 0;

var x = d3.scale.ordinal()
    .domain(d3.superformulaTypes)
    .rangePoints([0, 960], 1);

var small = d3.superformula()
    .type(function(d) { return d; })
    .size(960);

var big = d3.superformula()
    .size(300)
    .type("square")
    .segments(360);


var huge = d3.superformula()
    .size(30000)
    .type("square")
    .segments(360);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .on("ontouchstart" in document ? "touchmove" : "mousemove", particle);

svg.selectAll("a")
    .data(d3.superformulaTypes)
  .enter().append("a")
    .attr("xlink:title", String)
    .attr("transform", function(d, i) { return "translate(" + x(d) + ",40)"; })
  .append("path")
    .attr("class", "small")
    .attr("d", small)
    .on("click", function(d) { d3.select(".big").attr("d", big.type(d)); })
    .on("click", function(d) { d3.select(".huge").attr("d", huge.type(d)); });


function particle() {

  var m = d3.mouse(this);

  svg.insert("path","rect")

      .attr("class", "big")
      .attr("d", big)
      .style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
      .style("stroke-opacity", 1)
     .attr("transform", function(d, i) { return "translate("+ m[0] + "," + m[1] + ")"; })

    .transition()
      .duration(1000)
      .ease(Math.sqrt)
      .attr("d", huge)
      .style("fill-opacity", 1e-6)
      .style("stroke-opacity", 1e-6)
      .remove();

  d3.event.preventDefault();
}


</script>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	margin: 0;
	background: #222;
	min-width: 960px;
	}

	rect {
	fill: none;
	pointer-events: all;
	}

	.small {
	fill: steelblue;
	fill-opacity: .5;
	stroke: white;
	}

	.small:hover {
	fill: white;
	fill: lightsteelblue;
	}


	.big {
	stroke: #666;
	stroke-width: 2;
	fill: none;
	}


	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/d3.superformula.v0.min.js"></script>
	<script>

	var width = Math.max(1200, innerWidth),
	height = Math.max(600, innerHeight);

	var i = 0;

	var x = d3.scale.ordinal()
	.domain(d3.superformulaTypes)
	.rangePoints([0, 960], 1);

	var small = d3.superformula()
	.type(function(d) { return d; })
	.size(960);

	var big = d3.superformula()
	.size(300)
	.type("square")
	.segments(360);


	var huge = d3.superformula()
	.size(30000)
	.type("square")
	.segments(360);

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.append("rect")
	.attr("width", width)
	.attr("height", height)
	.on("ontouchstart" in document ? "touchmove" : "mousemove", particle);

	svg.selectAll("a")
	.data(d3.superformulaTypes)
	.enter().append("a")
	.attr("xlink:title", String)
	.attr("transform", function(d, i) { return "translate(" + x(d) + ",40)"; })
	.append("path")
	.attr("class", "small")
	.attr("d", small)
	.on("click", function(d) { d3.select(".big").attr("d", big.type(d)); })
	.on("click", function(d) { d3.select(".huge").attr("d", huge.type(d)); });


	function particle() {

	var m = d3.mouse(this);

	svg.insert("path","rect")

	.attr("class", "big")
	.attr("d", big)
	.style("stroke", d3.hsl((i = (i + 1) % 360), 1, .5))
	.style("stroke-opacity", 1)
	.attr("transform", function(d, i) { return "translate("+ m[0] + "," + m[1] + ")"; })

	.transition()
	.duration(1000)
	.ease(Math.sqrt)
	.attr("d", huge)
	.style("fill-opacity", 1e-6)
	.style("stroke-opacity", 1e-6)
	.remove();

	d3.event.preventDefault();
	}




	</script>