joyrexus/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Simple bouncing ball demo utilizing svg.js.
Click anywhere to pause/resume.
See example 1.1 in the Nature of Code.

  
## bounce.coffee
runTime = 5   # running time in seconds
w = 960       # canvas width
h = 500       # canvas height
d = 50        # diameter of bug

draw = SVG('canvas').size(w, h)

border = draw.rect(w, h)
  .attr
    fill: "none"
    stroke: "#999"
    'stroke-width': 3

class Point
  constructor: (@x, @y) ->

velocity = new Point 5, 6
begin = new Point d/2, d,2

bug = draw.circle(d)
  .center(begin.x, begin.y)
  .attr
    id: "bug"
    fill: "aliceblue"
    stroke: "steelblue"
    'stroke-width': 5

borderColor = (color) ->
  border.attr
    stroke: color

reverse = ->
  borderColor "orange"
  setTimeout (-> borderColor "#999"), 100
  -1

move = =>
  x = bug.x()
  y = bug.y()
  velocity.x *= reverse() if (x+d > w) or (x < 0)
  velocity.y *= reverse() if (y+d > h) or (y < 0)
  bug.move(x+velocity.x, y+velocity.y)

paused = false

# enable toggling of animation with a click
toggle = ->
  if paused
    paused = false
    run()
  else
    paused = true

canvas = document.getElementById("canvas")
canvas.addEventListener('click', toggle);

run = ->
  move()
  return if paused
  requestAnimationFrame(run)

runFor = (secs=10) ->
  setTimeout (-> paused = true), secs * 1000
  run()

runFor runTime

## bounce.js
// Generated by CoffeeScript 1.6.3
(function() {
  var Point, begin, border, borderColor, bug, canvas, d, draw, h, move, paused, reverse, run, runFor, runTime, toggle, velocity, w,
    _this = this;

  runTime = 5;

  w = 960;

  h = 500;

  d = 50;

  draw = SVG('canvas').size(w, h);

  border = draw.rect(w, h).attr({
    fill: "none",
    stroke: "#999",
    'stroke-width': 3
  });

  Point = (function() {
    function Point(x, y) {
      this.x = x;
      this.y = y;
    }

    return Point;

  })();

  velocity = new Point(5, 6);

  begin = new Point(d / 2, d, 2);

  bug = draw.circle(d).center(begin.x, begin.y).attr({
    id: "bug",
    fill: "aliceblue",
    stroke: "steelblue",
    'stroke-width': 5
  });

  borderColor = function(color) {
    return border.attr({
      stroke: color
    });
  };

  reverse = function() {
    borderColor("orange");
    setTimeout((function() {
      return borderColor("#999");
    }), 100);
    return -1;
  };

  move = function() {
    var x, y;
    x = bug.x();
    y = bug.y();
    if ((x + d > w) || (x < 0)) {
      velocity.x *= reverse();
    }
    if ((y + d > h) || (y < 0)) {
      velocity.y *= reverse();
    }
    return bug.move(x + velocity.x, y + velocity.y);
  };

  paused = false;

  toggle = function() {
    if (paused) {
      paused = false;
      return run();
    } else {
      return paused = true;
    }
  };

  canvas = document.getElementById("canvas");

  canvas.addEventListener('click', toggle);

  run = function() {
    move();
    if (paused) {
      return;
    }
    return requestAnimationFrame(run);
  };

  runFor = function(secs) {
    if (secs == null) {
      secs = 10;
    }
    setTimeout((function() {
      return paused = true;
    }), secs * 1000);
    return run();
  };

  runFor(runTime);

}).call(this);

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.js"></script>
<body>
  <div id="canvas"></div>
  <script src="bounce.js"></script>
	runTime = 5 # running time in seconds
	w = 960 # canvas width
	h = 500 # canvas height
	d = 50 # diameter of bug

	draw = SVG('canvas').size(w, h)

	border = draw.rect(w, h)
	.attr
	fill: "none"
	stroke: "#999"
	'stroke-width': 3

	class Point
	constructor: (@x, @y) ->

	velocity = new Point 5, 6
	begin = new Point d/2, d,2

	bug = draw.circle(d)
	.center(begin.x, begin.y)
	.attr
	id: "bug"
	fill: "aliceblue"
	stroke: "steelblue"
	'stroke-width': 5

	borderColor = (color) ->
	border.attr
	stroke: color

	reverse = ->
	borderColor "orange"
	setTimeout (-> borderColor "#999"), 100
	-1

	move = =>
	x = bug.x()
	y = bug.y()
	velocity.x *= reverse() if (x+d > w) or (x < 0)
	velocity.y *= reverse() if (y+d > h) or (y < 0)
	bug.move(x+velocity.x, y+velocity.y)

	paused = false

	# enable toggling of animation with a click
	toggle = ->
	if paused
	paused = false
	run()
	else
	paused = true

	canvas = document.getElementById("canvas")
	canvas.addEventListener('click', toggle);

	run = ->
	move()
	return if paused
	requestAnimationFrame(run)

	runFor = (secs=10) ->
	setTimeout (-> paused = true), secs * 1000
	run()

	runFor runTime
	// Generated by CoffeeScript 1.6.3
	(function() {
	var Point, begin, border, borderColor, bug, canvas, d, draw, h, move, paused, reverse, run, runFor, runTime, toggle, velocity, w,
	_this = this;

	runTime = 5;

	w = 960;

	h = 500;

	d = 50;

	draw = SVG('canvas').size(w, h);

	border = draw.rect(w, h).attr({
	fill: "none",
	stroke: "#999",
	'stroke-width': 3
	});

	Point = (function() {
	function Point(x, y) {
	this.x = x;
	this.y = y;
	}

	return Point;

	})();

	velocity = new Point(5, 6);

	begin = new Point(d / 2, d, 2);

	bug = draw.circle(d).center(begin.x, begin.y).attr({
	id: "bug",
	fill: "aliceblue",
	stroke: "steelblue",
	'stroke-width': 5
	});

	borderColor = function(color) {
	return border.attr({
	stroke: color
	});
	};

	reverse = function() {
	borderColor("orange");
	setTimeout((function() {
	return borderColor("#999");
	}), 100);
	return -1;
	};

	move = function() {
	var x, y;
	x = bug.x();
	y = bug.y();
	if ((x + d > w) \|\| (x < 0)) {
	velocity.x *= reverse();
	}
	if ((y + d > h) \|\| (y < 0)) {
	velocity.y *= reverse();
	}
	return bug.move(x + velocity.x, y + velocity.y);
	};

	paused = false;

	toggle = function() {
	if (paused) {
	paused = false;
	return run();
	} else {
	return paused = true;
	}
	};

	canvas = document.getElementById("canvas");

	canvas.addEventListener('click', toggle);

	run = function() {
	move();
	if (paused) {
	return;
	}
	return requestAnimationFrame(run);
	};

	runFor = function(secs) {
	if (secs == null) {
	secs = 10;
	}
	setTimeout((function() {
	return paused = true;
	}), secs * 1000);
	return run();
	};

	runFor(runTime);

	}).call(this);
	<!DOCTYPE html>
	<meta charset="utf-8">
	<script src="https://s3-eu-west-1.amazonaws.com/svgjs/svg.js"></script>
	<body>
	<div id="canvas"></div>
	<script src="bounce.js"></script>