nsfmc/dart.png

## readme.md

      
    Raw
  

              readme.md
            
          
    a simulation of darts being translated diagonally along a slope field, but the camera stays locked on them (which is a cop-out way of saying i only felt like rotating things ok?)
looks sorta like


## dart.png

      
    Raw
  

              dart.png
            
          
## grid.html
<!doctype html>
<html>
<head>
<style type="text/css">
  .dart {
  display: inline-block;
  width: 13px;
  height: 14px;
  background-image: url(./dart.png);
  background-size: contain;
  background-repeat: no-repeat;
  margin: 3px;
  -webkit-animation:spin 8s linear infinite;
  -moz-animation:spin 8s linear infinite;
  animation:spin 8s linear infinite;
  }
  @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
  @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
  @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
</style>
</head>

<body>
<div id="content-here"></div>

<script src="https://fb.me/react-0.13.1.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

<script type="text/jsx;harmony=true">
  /** @jsx React.DOM */

  var GridBox = React.createClass({
    propTypes: {
        cols: React.PropTypes.number.isRequired,
        rows: React.PropTypes.number.isRequired
    },

    _getStyle: function(col, row) {
        // scale unit row/col indexes by ~grid distance
        var rotationRadians = (row + col) * 12.5 / 60;
        // scale rotation by 2pi to get % full rotation
        var rotationAmount = rotationRadians / (2 * Math.PI);

        // todo(marcos): set the total animation timing here?
        var animationLength = 8000;
        var delayAmount = rotationAmount * animationLength;
        return {
            "WebkitAnimationDelay": ~~(delayAmount) + "ms",
            "MozAnimationDelay": ~~(delayAmount) + "ms",
            "OAnimationDelay": ~~(delayAmount) + "ms",
            "AnimationDelay": ~~(delayAmount) + "ms"
        };
    },

    render: function(){
        var rows = _.range(this.props.rows).map(
            () => {return _.range(this.props.cols);
        });
        var grid = rows.map((row, rowIndex) => {
            var cols = row.map((col, colIndex) => {
                var styles = this._getStyle(rowIndex, colIndex);
                var key = rowIndex + "-" + colIndex;
                return (
                    <span className="dart"
                        style={styles}
                        key={key}/>
                );
            });
            return (<div key={rowIndex}>{cols}</div>);
        });
        return (<div className="ls-slope-field">{grid}</div>);
    }
});

  React.render(<GridBox rows={6} cols={40} />, document.getElementById('content-here'));
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<style type="text/css">
	.dart {
	display: inline-block;
	width: 13px;
	height: 14px;
	background-image: url(./dart.png);
	background-size: contain;
	background-repeat: no-repeat;
	margin: 3px;
	-webkit-animation:spin 8s linear infinite;
	-moz-animation:spin 8s linear infinite;
	animation:spin 8s linear infinite;
	}
	@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
	@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
	@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
	</style>
	</head>

	<body>
	<div id="content-here"></div>

	<script src="https://fb.me/react-0.13.1.js"></script>
	<script src="https://fb.me/JSXTransformer-0.13.1.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

	<script type="text/jsx;harmony=true">
	/** @jsx React.DOM */

	var GridBox = React.createClass({
	propTypes: {
	cols: React.PropTypes.number.isRequired,
	rows: React.PropTypes.number.isRequired
	},

	_getStyle: function(col, row) {
	// scale unit row/col indexes by ~grid distance
	var rotationRadians = (row + col) * 12.5 / 60;
	// scale rotation by 2pi to get % full rotation
	var rotationAmount = rotationRadians / (2 * Math.PI);

	// todo(marcos): set the total animation timing here?
	var animationLength = 8000;
	var delayAmount = rotationAmount * animationLength;
	return {
	"WebkitAnimationDelay": ~~(delayAmount) + "ms",
	"MozAnimationDelay": ~~(delayAmount) + "ms",
	"OAnimationDelay": ~~(delayAmount) + "ms",
	"AnimationDelay": ~~(delayAmount) + "ms"
	};
	},

	render: function(){
	var rows = _.range(this.props.rows).map(
	() => {return _.range(this.props.cols);
	});
	var grid = rows.map((row, rowIndex) => {
	var cols = row.map((col, colIndex) => {
	var styles = this._getStyle(rowIndex, colIndex);
	var key = rowIndex + "-" + colIndex;
	return (
	<span className="dart"
	style={styles}
	key={key}/>
	);
	});
	return (<div key={rowIndex}>{cols}</div>);
	});
	return (<div className="ls-slope-field">{grid}</div>);
	}
	});

	React.render(<GridBox rows={6} cols={40} />, document.getElementById('content-here'));
	</script>
	</body>
	</html>