ndyakov/koch.html

## koch.html
<html>
  <head>
    <title> Koch Snowflake, maybe?</title>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/dark-hive/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <script>
      KochSnowflake = function(elem) {
        this.canvas = elem;
        this.context = this.canvas.get(0).getContext("2d");
        this.context.shadowColor = '#000';
        this.context.shadowBlur = 30;
        this.context.shadowOffsetX = 0;
        this.context.shadowOffsetY = 0;
        this.x = 0;
        this.y = 0;
        this.angle = 90;
        this.timeout = 0;
        this.level = -1;
        this.delta = 1;
        this.playing = 0;

        this.isPlaying = function() {
          return this.playing;
        };

        this.animateKochSnowflake = function() {
          if (this.level >= 6) {
            this.delta = -1;
          } else if (this.level <= 0) {
            this.delta = 1;
          }
          this.level += this.delta;
          this.initialize();
          this.save();
          this.drawKochSnowflake();
          this.flush();
        };

        //Create snowflake
        this.drawKochSnowflake = function() {
          this.drawKochCurve(this.level, 300);
          this.angle += 120;
          this.drawKochCurve(this.level, 300);
          this.angle += 120;
          this.drawKochCurve(this.level, 300);
        };

        //Recursive implementation
        this.drawKochCurve = function(level, sideLength) {
          if (level < 1) {
            this.draw(sideLength);
          }
          else {
            this.drawKochCurve(level - 1, sideLength / 3);
            this.angle -= 45;
            this.drawKochCurve(level - 1, sideLength / 3);
            this.angle += 90;
            this.drawKochCurve(level - 1, sideLength / 3);
            this.angle -= 45;
            this.drawKochCurve(level - 1, sideLength / 3);
          }
        };

        this.draw = function(sideLength) {
          this.x += sideLength * Math.sin(this.angle * Math.PI/180);
          this.y -= sideLength * Math.cos(this.angle * Math.PI/180);
          this.context.lineTo(this.x, this.y);
        };

        this.initialize = function() {
          this.angle = 90;
          this.x = 330 - this.level*20;
          this.y = 240 - this.level*20;
          this.context.fillStyle = "rgb(63, 160, "+(this.level*25+50)+")";
        };

        this.save = function() {
          this.context.save();
          this.context.beginPath();
          this.context.clearRect(0, 0, 1000, 700);
          this.context.translate(-this.level*10, 0);

          this.context.moveTo(this.x, this.y);
        };

        this.flush = function() {
          this.context.closePath();
          this.context.fill();
          this.context.restore();
        };

        this.animate = function(callback) {
          this.playing = 1;
          var that = this;
          this.timeout = setInterval(function() {
            that.animateKochSnowflake();
            callback(that.level);
          }, 700);
        };

        this.drawLevel = function(level) {
          this.level = level;
          this.initialize();
          this.save();
          this.drawKochSnowflake();
          this.flush();
        };

        this.stop = function() {
          this.playing = 0;
          if(this.timeout) {
            clearTimeout(this.timeout);
            this.timeout = 0;
            return true;
          }
          return false;
        };
      };

      $(function() {
        var f1 = new KochSnowflake($("#f1"));
        var select = $("#level");
        var button = $("#animate");
        var slider = $("<div id='slider'></div>").insertAfter(select).slider({
          min: 1,
          max: 7,
          range: "min",
          value: select[0].selectedIndex + 1,
          slide: function(event, ui) {
            if(f1.isPlaying()) {
              button.trigger('click');
            }
            f1.drawLevel(ui.value - 1);
            select[0].selectedIndex = ui.value - 1;
          }
        });

        select.menu().change(function() {
          if(f1.isPlaying()) {
            button.trigger('click');
          }
          f1.drawLevel(this.selectedIndex);
          slider.slider("value", this.selectedIndex + 1);
        });

        f1.drawLevel(0);
        f1.animate(function(level) {
          $("#animate").data('animated', 1);
          select[0].selectedIndex = level;
          slider.slider("value", level + 1);
        });

        var changeButtonState = function() {
          var button = $("#animate");
          var animated = button.data('animated');
          if (!animated) {
            button.data('animated', 1);
          } else {
            button.data('animated', 0);
          }
        };

        button.button().on("click", function(event) {
          var that = $(this);
          var animated = that.data('animated');
          if (!animated) {
            f1.animate(function(level) {
              select[0].selectedIndex = level;
              slider.slider("value", level + 1);
            });
          } else {
            f1.stop();
          }
          changeButtonState();
        });
      });
    </script>
    <style>
      #f1{
        border: 2px solid #e3e3e3;
        border-radius: 35px;
        background-color: #3e3e3e;
      }
      body{
        background-color: #fff;
      }
      #gotothecenterbitch {
        width: 1000px;
        height: 700px;
        margin: 0px auto;
        vertical-align: middle;
      }
      #levelform {
        margin: 10px 50px;
      }
      #levelform select {
        margin: 10px;
      }
      #animate {
        float: left;
      }
      label {
        float: left;
      }
      #level {
        width: 100px;
        height: 38px;
      }
    </style>
  </head>
  <body>
    <div id="gotothecenterbitch">
      <canvas width="1000" height="700" id="f1"></canvas>

      <form id="levelform">
        <input type="checkbox" id="animate" checked/><label for="animate">Animate</label>
        <label for="level"></label>
        <select name="level" id="level">
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
          <option>5</option>
          <option>6</option>
          <option>7</option>
        </select>
      </form>
    </div>
</html>
	<html>
	<head>
	<title> Koch Snowflake, maybe?</title>
	<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/dark-hive/jquery-ui.css">
	<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
	<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
	<script>
	KochSnowflake = function(elem) {
	this.canvas = elem;
	this.context = this.canvas.get(0).getContext("2d");
	this.context.shadowColor = '#000';
	this.context.shadowBlur = 30;
	this.context.shadowOffsetX = 0;
	this.context.shadowOffsetY = 0;
	this.x = 0;
	this.y = 0;
	this.angle = 90;
	this.timeout = 0;
	this.level = -1;
	this.delta = 1;
	this.playing = 0;

	this.isPlaying = function() {
	return this.playing;
	};

	this.animateKochSnowflake = function() {
	if (this.level >= 6) {
	this.delta = -1;
	} else if (this.level <= 0) {
	this.delta = 1;
	}
	this.level += this.delta;
	this.initialize();
	this.save();
	this.drawKochSnowflake();
	this.flush();
	};

	//Create snowflake
	this.drawKochSnowflake = function() {
	this.drawKochCurve(this.level, 300);
	this.angle += 120;
	this.drawKochCurve(this.level, 300);
	this.angle += 120;
	this.drawKochCurve(this.level, 300);
	};

	//Recursive implementation
	this.drawKochCurve = function(level, sideLength) {
	if (level < 1) {
	this.draw(sideLength);
	}
	else {
	this.drawKochCurve(level - 1, sideLength / 3);
	this.angle -= 45;
	this.drawKochCurve(level - 1, sideLength / 3);
	this.angle += 90;
	this.drawKochCurve(level - 1, sideLength / 3);
	this.angle -= 45;
	this.drawKochCurve(level - 1, sideLength / 3);
	}
	};

	this.draw = function(sideLength) {
	this.x += sideLength * Math.sin(this.angle * Math.PI/180);
	this.y -= sideLength * Math.cos(this.angle * Math.PI/180);
	this.context.lineTo(this.x, this.y);
	};

	this.initialize = function() {
	this.angle = 90;
	this.x = 330 - this.level*20;
	this.y = 240 - this.level*20;
	this.context.fillStyle = "rgb(63, 160, "+(this.level*25+50)+")";
	};

	this.save = function() {
	this.context.save();
	this.context.beginPath();
	this.context.clearRect(0, 0, 1000, 700);
	this.context.translate(-this.level*10, 0);

	this.context.moveTo(this.x, this.y);
	};

	this.flush = function() {
	this.context.closePath();
	this.context.fill();
	this.context.restore();
	};

	this.animate = function(callback) {
	this.playing = 1;
	var that = this;
	this.timeout = setInterval(function() {
	that.animateKochSnowflake();
	callback(that.level);
	}, 700);
	};

	this.drawLevel = function(level) {
	this.level = level;
	this.initialize();
	this.save();
	this.drawKochSnowflake();
	this.flush();
	};

	this.stop = function() {
	this.playing = 0;
	if(this.timeout) {
	clearTimeout(this.timeout);
	this.timeout = 0;
	return true;
	}
	return false;
	};
	};

	$(function() {
	var f1 = new KochSnowflake($("#f1"));
	var select = $("#level");
	var button = $("#animate");
	var slider = $("<div id='slider'></div>").insertAfter(select).slider({
	min: 1,
	max: 7,
	range: "min",
	value: select[0].selectedIndex + 1,
	slide: function(event, ui) {
	if(f1.isPlaying()) {
	button.trigger('click');
	}
	f1.drawLevel(ui.value - 1);
	select[0].selectedIndex = ui.value - 1;
	}
	});

	select.menu().change(function() {
	if(f1.isPlaying()) {
	button.trigger('click');
	}
	f1.drawLevel(this.selectedIndex);
	slider.slider("value", this.selectedIndex + 1);
	});

	f1.drawLevel(0);
	f1.animate(function(level) {
	$("#animate").data('animated', 1);
	select[0].selectedIndex = level;
	slider.slider("value", level + 1);
	});

	var changeButtonState = function() {
	var button = $("#animate");
	var animated = button.data('animated');
	if (!animated) {
	button.data('animated', 1);
	} else {
	button.data('animated', 0);
	}
	};

	button.button().on("click", function(event) {
	var that = $(this);
	var animated = that.data('animated');
	if (!animated) {
	f1.animate(function(level) {
	select[0].selectedIndex = level;
	slider.slider("value", level + 1);
	});
	} else {
	f1.stop();
	}
	changeButtonState();
	});
	});
	</script>
	<style>
	#f1{
	border: 2px solid #e3e3e3;
	border-radius: 35px;
	background-color: #3e3e3e;
	}
	body{
	background-color: #fff;
	}
	#gotothecenterbitch {
	width: 1000px;
	height: 700px;
	margin: 0px auto;
	vertical-align: middle;
	}
	#levelform {
	margin: 10px 50px;
	}
	#levelform select {
	margin: 10px;
	}
	#animate {
	float: left;
	}
	label {
	float: left;
	}
	#level {
	width: 100px;
	height: 38px;
	}
	</style>
	</head>
	<body>
	<div id="gotothecenterbitch">
	<canvas width="1000" height="700" id="f1"></canvas>

	<form id="levelform">
	<input type="checkbox" id="animate" checked/><label for="animate">Animate</label>
	<label for="level"></label>
	<select name="level" id="level">
	<option>1</option>
	<option>2</option>
	<option>3</option>
	<option>4</option>
	<option>5</option>
	<option>6</option>
	<option>7</option>
	</select>
	</form>
	</div>
	</html>