jeeyoungk/venn.html

## venn.html
<!doctype html>
<html>
  <head>
    <title>Venn diagram of order 4</title>
  </head>
  <body>
    <div>Venn Diagram Experiment</div>
    <div>Use the controls on the bottom left.</div>
    <div id='canvas'></div>
    <script src='https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js'></script>
    <script>
(function() {
  var main;

  main = function() {
    var H, N, OX, OY, TIME, W, colors, diagrams, i, initControl, make, o, o1, o2, o3, o4, outlines, p, p1, p2, p3, p4, paper, _results;
    W = 400;
    H = 500;
    TIME = 250;
    OX = W / 2;
    OY = H / 2;
    paper = Raphael('canvas', W, H);
    N = 4;
    make = function(inner, outer, flags) {
      var angle, deg, i, next, result, state, x, y;
      deg = flags.length;
      angle = Math.PI * 2 / deg;
      x = function(r, i) {
        return OX + r * Math.cos(angle * i);
      };
      y = function(r, i) {
        return OY + r * Math.sin(angle * i);
      };
      result = [];
      if (flags[0] === 0) {
        result.push(['M', x(inner, 0), y(inner, 0)]);
        result.push(['L', x(inner, 1), y(inner, 1)]);
        state = 0;
      } else {
        result.push(['M', x(outer, 0), y(outer, 0)]);
        result.push(['L', x(outer, 1), y(outer, 1)]);
        state = 1;
      }
      for (i = 1; 1 <= deg ? i <= deg : i >= deg; 1 <= deg ? i++ : i--) {
        next = flags[i === deg ? 0 : i];
        if ((state === next && next === 0)) {
          result.push(['L', x(inner, i), y(inner, i)]);
        } else if ((state === next && next === 1)) {
          result.push(['L', x(outer, i), y(outer, i)]);
        } else if (state === 0 && next === 1) {
          result.push(['L', x(inner, i), y(inner, i)]);
          result.push(['L', x(outer, i), y(outer, i)]);
        } else if (state === 1 && next === 0) {
          result.push(['L', x(outer, i), y(outer, i)]);
          result.push(['L', x(inner, i), y(inner, i)]);
        }
        state = next;
      }
      return result;
    };
    colors = ['red', 'blue', 'green', 'yellow'];
    p1 = paper.path(make(100, 200, [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]));
    p2 = paper.path(make(100, 200, [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1]));
    p3 = paper.path(make(100, 200, [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1]));
    p4 = paper.path(make(100, 200, [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1]));
    diagrams = [p1, p2, p3, p4];
    o1 = paper.path(make(100, 200, [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]));
    o2 = paper.path(make(100, 200, [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1]));
    o3 = paper.path(make(100, 200, [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1]));
    o4 = paper.path(make(100, 200, [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1]));
    outlines = [o1, o2, o3, o4];
    for (i = 0; i <= 3; i++) {
      p = diagrams[i];
      p.attr('fill', colors[i]);
      p.attr('opacity', 0.25);
      p.attr('stroke-width', 0);
      p.data('original-color', colors[i]);
      o = outlines[i];
      o.attr('opacity', 1);
      o.attr('stroke-width', 0);
      o.attr('visible', false);
    }
    initControl = function(i) {
      var control;
      control = paper.circle(25 + i * 40, 460, 15);
      control.attr('fill', colors[i]);
      control.data('visible', true);
      control.click(function() {
        p = diagrams[i];
        if (control.data('visible')) {
          p.toFront();
          p.animate({
            opacity: 1,
            fill: 'white'
          }, TIME);
          control.animate({
            opacity: 0.25
          }, TIME);
          control.data('visible', false);
        } else {
          p.toBack();
          p.animate({
            opacity: 0.25,
            fill: p.data('original-color')
          }, TIME);
          control.animate({
            opacity: 1
          }, TIME);
          control.data('visible', true);
        }
      });
      control.mouseover(function() {
        o = outlines[i];
        o.toFront();
        o.attr('stroke-width', 5);
      });
      return control.mouseout(function() {
        o = outlines[i];
        o.attr('stroke-width', 0);
      });
    };
    _results = [];
    for (i = 0; i <= 3; i++) {
      _results.push(initControl(i));
    }
    return _results;
  };

  main();

}).call(this);
    </script>
  </body>
</html>
	<!doctype html>
	<html>
	<head>
	<title>Venn diagram of order 4</title>
	</head>
	<body>
	<div>Venn Diagram Experiment</div>
	<div>Use the controls on the bottom left.</div>
	<div id='canvas'></div>
	<script src='https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael.js'></script>
	<script>
	(function() {
	var main;

	main = function() {
	var H, N, OX, OY, TIME, W, colors, diagrams, i, initControl, make, o, o1, o2, o3, o4, outlines, p, p1, p2, p3, p4, paper, _results;
	W = 400;
	H = 500;
	TIME = 250;
	OX = W / 2;
	OY = H / 2;
	paper = Raphael('canvas', W, H);
	N = 4;
	make = function(inner, outer, flags) {
	var angle, deg, i, next, result, state, x, y;
	deg = flags.length;
	angle = Math.PI * 2 / deg;
	x = function(r, i) {
	return OX + r * Math.cos(angle * i);
	};
	y = function(r, i) {
	return OY + r * Math.sin(angle * i);
	};
	result = [];
	if (flags[0] === 0) {
	result.push(['M', x(inner, 0), y(inner, 0)]);
	result.push(['L', x(inner, 1), y(inner, 1)]);
	state = 0;
	} else {
	result.push(['M', x(outer, 0), y(outer, 0)]);
	result.push(['L', x(outer, 1), y(outer, 1)]);
	state = 1;
	}
	for (i = 1; 1 <= deg ? i <= deg : i >= deg; 1 <= deg ? i++ : i--) {
	next = flags[i === deg ? 0 : i];
	if ((state === next && next === 0)) {
	result.push(['L', x(inner, i), y(inner, i)]);
	} else if ((state === next && next === 1)) {
	result.push(['L', x(outer, i), y(outer, i)]);
	} else if (state === 0 && next === 1) {
	result.push(['L', x(inner, i), y(inner, i)]);
	result.push(['L', x(outer, i), y(outer, i)]);
	} else if (state === 1 && next === 0) {
	result.push(['L', x(outer, i), y(outer, i)]);
	result.push(['L', x(inner, i), y(inner, i)]);
	}
	state = next;
	}
	return result;
	};
	colors = ['red', 'blue', 'green', 'yellow'];
	p1 = paper.path(make(100, 200, [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]));
	p2 = paper.path(make(100, 200, [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1]));
	p3 = paper.path(make(100, 200, [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1]));
	p4 = paper.path(make(100, 200, [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1]));
	diagrams = [p1, p2, p3, p4];
	o1 = paper.path(make(100, 200, [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]));
	o2 = paper.path(make(100, 200, [0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1]));
	o3 = paper.path(make(100, 200, [0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1]));
	o4 = paper.path(make(100, 200, [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1]));
	outlines = [o1, o2, o3, o4];
	for (i = 0; i <= 3; i++) {
	p = diagrams[i];
	p.attr('fill', colors[i]);
	p.attr('opacity', 0.25);
	p.attr('stroke-width', 0);
	p.data('original-color', colors[i]);
	o = outlines[i];
	o.attr('opacity', 1);
	o.attr('stroke-width', 0);
	o.attr('visible', false);
	}
	initControl = function(i) {
	var control;
	control = paper.circle(25 + i * 40, 460, 15);
	control.attr('fill', colors[i]);
	control.data('visible', true);
	control.click(function() {
	p = diagrams[i];
	if (control.data('visible')) {
	p.toFront();
	p.animate({
	opacity: 1,
	fill: 'white'
	}, TIME);
	control.animate({
	opacity: 0.25
	}, TIME);
	control.data('visible', false);
	} else {
	p.toBack();
	p.animate({
	opacity: 0.25,
	fill: p.data('original-color')
	}, TIME);
	control.animate({
	opacity: 1
	}, TIME);
	control.data('visible', true);
	}
	});
	control.mouseover(function() {
	o = outlines[i];
	o.toFront();
	o.attr('stroke-width', 5);
	});
	return control.mouseout(function() {
	o = outlines[i];
	o.attr('stroke-width', 0);
	});
	};
	_results = [];
	for (i = 0; i <= 3; i++) {
	_results.push(initControl(i));
	}
	return _results;
	};

	main();

	}).call(this);
	</script>
	</body>
	</html>