dlwjiang/README.md

## README.md

      
    Raw
  

              README.md
            
          
    #Common Table Tennis Spins
####As seen from server's POV.
##Top Row:
####Topspin

Causes ball to jump off of opponents racket, often off the table.
Difficult to attack strongly.


Increases downwards G force allowing stronger attacks that still
get pulled down in time to hit the table. (i.e. higher arcs)

####Counter-Clockwise Sidespin

Causes ball to curve towards the left.
Causes ball to jump towards your righthand side
(e.g. setting up forehand)

####Counter-Clockwise Corkscrew

Causes ball to jump towards the left on table contact.
Normally minor effect on opponents paddle as major equator of spin faces the sides.


Corkscrew spin is not commonly seen/used.

####Topspin & Counter-Clockwise Sidespin

Common result of a pendulum serve.
Common serve deception is backspin as topspin and vice versa resulting in returns that pop
high or hit the net.


Adding in sidespin helps disguise amount of back/top spin.

##Bottom Row:
####Backspin

Causes ball to jump downwards from opponents paddle into net. Safely returned with a backspin stroke. Can be attacked with a topspin stroke given enough racket speed. (if racket speed is faster than ball's tangential velocity.)

####Clockwise Sidespin

Causes ball to curve towards the right.
Causes ball to jump towards your lefthand side.
(e.g. setting up backhand/forehand-step-around )

####Clockwise Corkscrew

Causes ball to jump towards the right on table contact.
Normally minor effect on opponents paddle as major equator of spin faces the sides.


Corkscrew spin is not commonly seen/used.

####Backspin & Counter-Clockwise Sidespin

Common result of a pendulum serve.
Common serve deception is backspin as topspin and vice versa resulting in returns that pop
high or hit the net.


Adding in sidespin helps disguise amount of back/top spin.


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

path {
  fill: none;
  stroke-linejoin: round;
}

.sphere,
.graticule {
  stroke: #c4c4c4;
}

.equator {
  stroke: #f0889b;
  stroke-width: 1px;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 20, left: 20};
var width  = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
var rotate = [0,-10,0];
var time   = Date.now();

var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var sphereRadius = 100;
var groupWidth   = width/4;
var groupHeight  = height/2;

//yaw, pitch, roll
var defaultRotation = [0,-10,0];
//speed multiplier
var s = 2;
//yaw, pitch, roll, start-state
var spinCombinations = [
  //topspin
  //counter-sidespin
  //counter-corkscrew
  //top & clock-side
  [[ 0.0*s,0.1*s,0.0*s,defaultRotation],
   [ 0.1*s,0.0*s,0.0*s,defaultRotation],
   [ 0.0*s,0.0*s,0.1*s,[0,-90,0]],
   [-0.1*s,0.0*s,0.0*s,[0,0,-45]]],
  //backspin
  //clock-sidespin
  //clock-corkscrew
  //back & clock-side
  [[ 0.0*s,-0.1*s, 0.0*s,defaultRotation],
   [-0.1*s, 0.0*s, 0.0*s,defaultRotation],
   [ 0.0*s, 0.0*s,-0.1*s,[0,-90,0]],
   [-0.1*s, 0.0*s, 0.0*s,[0,0,45]]]
]

for (var i = 0; i < 4; i++) {
	for (var j = 0; j < 2; j++) {
		generateSphere({
      x               : groupWidth * i + sphereRadius,
      y               : groupHeight * j + sphereRadius,
      yawSpeed        : spinCombinations[j][i][0],
      pitchSpeed      : spinCombinations[j][i][1],
      rollSpeed       : spinCombinations[j][i][2],
      initialRotation : spinCombinations[j][i][3]
		})
	}
}

function generateSphere(options){

  var projection = d3.geo.orthographic()
    .scale(100)
    .translate([options.x, options.y])
    .clipAngle(90 + 1e-6)
    .precision(.3);

	var path = d3.geo.path()
    .projection(projection);

	var graticule = d3.geo.graticule();

  var graph = svg.append("g")
  							 .attr('class', options.id);

	graph.append("path")
    .datum({type: "Sphere"})
    .attr("class", "sphere")
    .attr("d", path);

	graph.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);

	graph.append("path")
		.datum({type: "LineString", coordinates: [
  			[0, 0], [0, 90], [180, 0], [0, -90], [0, 0],
  			[-90, 0], [180,0], [90,0], [0,0],
        [-90,0], [0,90], [90,0],[0,-90],[-90,0]
			]})
    .attr("class", "equator")
    .attr("d", path);

	graph.append("path")
    .datum({type: "Point", coordinates: [180,0]})
    .attr("class", "equator")
    .attr("d", path);

	var feature = graph.selectAll("path");

  var initialRotation = options.initialRotation;

	d3.timer(function() {
  	var dt = Date.now() - time;
  	projection.rotate([
      				initialRotation[0] + options.yawSpeed * dt,
      				initialRotation[1] + options.pitchSpeed * dt,
      				initialRotation[2] + options.rollSpeed * dt
    ]);
  	feature.attr("d", path);
	});
}

</script>

## thumbnail.png

      
    Raw
  

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

	path {
	fill: none;
	stroke-linejoin: round;
	}

	.sphere,
	.graticule {
	stroke: #c4c4c4;
	}

	.equator {
	stroke: #f0889b;
	stroke-width: 1px;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
	<script>

	var margin = {top: 20, right: 20, bottom: 20, left: 20};
	var width = 960 - margin.left - margin.right;
	var height = 500 - margin.top - margin.bottom;
	var rotate = [0,-10,0];
	var time = Date.now();

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	var sphereRadius = 100;
	var groupWidth = width/4;
	var groupHeight = height/2;

	//yaw, pitch, roll
	var defaultRotation = [0,-10,0];
	//speed multiplier
	var s = 2;
	//yaw, pitch, roll, start-state
	var spinCombinations = [
	//topspin
	//counter-sidespin
	//counter-corkscrew
	//top & clock-side
	[[ 0.0s,0.1s,0.0*s,defaultRotation],
	[ 0.1s,0.0s,0.0*s,defaultRotation],
	[ 0.0s,0.0s,0.1*s,[0,-90,0]],
	[-0.1s,0.0s,0.0*s,[0,0,-45]]],
	//backspin
	//clock-sidespin
	//clock-corkscrew
	//back & clock-side
	[[ 0.0s,-0.1s, 0.0*s,defaultRotation],
	[-0.1s, 0.0s, 0.0*s,defaultRotation],
	[ 0.0s, 0.0s,-0.1*s,[0,-90,0]],
	[-0.1s, 0.0s, 0.0*s,[0,0,45]]]
	]

	for (var i = 0; i < 4; i++) {
	for (var j = 0; j < 2; j++) {
	generateSphere({
	x : groupWidth * i + sphereRadius,
	y : groupHeight * j + sphereRadius,
	yawSpeed : spinCombinations[j][i][0],
	pitchSpeed : spinCombinations[j][i][1],
	rollSpeed : spinCombinations[j][i][2],
	initialRotation : spinCombinations[j][i][3]
	})
	}
	}

	function generateSphere(options){

	var projection = d3.geo.orthographic()
	.scale(100)
	.translate([options.x, options.y])
	.clipAngle(90 + 1e-6)
	.precision(.3);

	var path = d3.geo.path()
	.projection(projection);

	var graticule = d3.geo.graticule();

	var graph = svg.append("g")
	.attr('class', options.id);

	graph.append("path")
	.datum({type: "Sphere"})
	.attr("class", "sphere")
	.attr("d", path);

	graph.append("path")
	.datum(graticule)
	.attr("class", "graticule")
	.attr("d", path);

	graph.append("path")
	.datum({type: "LineString", coordinates: [
	[0, 0], [0, 90], [180, 0], [0, -90], [0, 0],
	[-90, 0], [180,0], [90,0], [0,0],
	[-90,0], [0,90], [90,0],[0,-90],[-90,0]
	]})
	.attr("class", "equator")
	.attr("d", path);

	graph.append("path")
	.datum({type: "Point", coordinates: [180,0]})
	.attr("class", "equator")
	.attr("d", path);

	var feature = graph.selectAll("path");

	var initialRotation = options.initialRotation;

	d3.timer(function() {
	var dt = Date.now() - time;
	projection.rotate([
	initialRotation[0] + options.yawSpeed * dt,
	initialRotation[1] + options.pitchSpeed * dt,
	initialRotation[2] + options.rollSpeed * dt
	]);
	feature.attr("d", path);
	});
	}

	</script>