classicvalues/bouncy-ball.markdown

## bouncy-ball.markdown

      
    Raw
  

              bouncy-ball.markdown
            
          
    Bouncy Ball

A Pen by LaudateCorpus1 on CodePen.
License.

  
## index.html
<!doctype HTML5>
<svg class="circle" height="500" width="200"> Bouncy Ball
 <circle id="bluec" fill="blue" r="50" cx="100" cy="50" />
 <animate xlink:href="#bluec" attributeName="cy" from="50" to="450" dur="3s" begin="click" calcMode="spline" values="50; 350; 120; 350; 170; 350; 230; 350" keyTimes="0; 0.15; 0.3; 0.45; 0.6; 0.75; 0.9; 1" keySplines="0.42 0 1 1;
      0 0 0.59 1;
     	0.42 0 1 1;
     	0 0 0.59 1;
      0.42 0 1 1;
      0 0 0.59 1;
      0.42 0 1 1" fill="freeze" id="circle-ani" />

</svg>

</html>

## script.js
var context; var x=100; var y=200; var dx=5; var dy=5; unction init() { context= myCanvas.getContext('2d'); setInterval(draw,10); } function draw() { context.clearRect(0,0, 300,300); context.beginPath(); context.fillStyle="#0000ff";

var acc = $(".accelerometer");
var gyr = $(".gyro");

gyro.startTracking(function (o) {
 // o.x, o.y, o.z for accelerometer
 // o.alpha, o.beta, o.gamma for gyro

 var accData = [o.x, o.y, o.z];
 var gyroData = [o.alpha, o.beta, o.gamma];

 accData = accData.map(function (d) {
  return d.toFixed(2);
 });

 gyroData = gyroData.map(function (d) {
  return d.toFixed(2);
 });

 acc.html(accData.join(", "));
 gyr.html(gyroData.join(", "));
});

## style.css
svg {
 border: 3px solid #eee;
 display: block;
 margin: 1em auto;
}

body {
 padding: 100;
 margin: 100;
 background-color: #32c9d6;
}

#ball {
 -webkit-transition: all;
 transition: all;
 left: 400px;
 top: -0px;
 position: absolute;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 background: black;
}
#outX,
#outY {
 font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed",
  Helvetica, Arial, "sans-serif";
 font-size: 12em;
}
	<!doctype HTML5>
	<svg class="circle" height="500" width="200"> Bouncy Ball
	<circle id="bluec" fill="blue" r="50" cx="100" cy="50" />
	<animate xlink:href="#bluec" attributeName="cy" from="50" to="450" dur="3s" begin="click" calcMode="spline" values="50; 350; 120; 350; 170; 350; 230; 350" keyTimes="0; 0.15; 0.3; 0.45; 0.6; 0.75; 0.9; 1" keySplines="0.42 0 1 1;
	0 0 0.59 1;
	0.42 0 1 1;
	0 0 0.59 1;
	0.42 0 1 1;
	0 0 0.59 1;
	0.42 0 1 1" fill="freeze" id="circle-ani" />

	</svg>

	</html>
	var context; var x=100; var y=200; var dx=5; var dy=5; unction init() { context= myCanvas.getContext('2d'); setInterval(draw,10); } function draw() { context.clearRect(0,0, 300,300); context.beginPath(); context.fillStyle="#0000ff";

	var acc = $(".accelerometer");
	var gyr = $(".gyro");

	gyro.startTracking(function (o) {
	// o.x, o.y, o.z for accelerometer
	// o.alpha, o.beta, o.gamma for gyro

	var accData = [o.x, o.y, o.z];
	var gyroData = [o.alpha, o.beta, o.gamma];

	accData = accData.map(function (d) {
	return d.toFixed(2);
	});

	gyroData = gyroData.map(function (d) {
	return d.toFixed(2);
	});

	acc.html(accData.join(", "));
	gyr.html(gyroData.join(", "));
	});
	svg {
	border: 3px solid #eee;
	display: block;
	margin: 1em auto;
	}

	body {
	padding: 100;
	margin: 100;
	background-color: #32c9d6;
	}

	#ball {
	-webkit-transition: all;
	transition: all;
	left: 400px;
	top: -0px;
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: black;
	}
	#outX,
	#outY {
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed",
	Helvetica, Arial, "sans-serif";
	font-size: 12em;
	}