mobius

strip

by chrisfrisina

HTML

<section>
  <h2>Möbius Strip</h2>
  <canvas id="Canvas" width="400" height="300"></canvas>
  <input id="PlayButton" type="button" value=" play " >
  <input id="StopButton" type="button" value=" stop " >
  <label>draw</label>
  <select id="SelectBox">
    <option value="16">light</option>
    <option value="24" selected>normal</option>
    <option value="32">heavy</option>
  </select>
</section>
<script>
  window.addEventListener('load', function(e) {
  var canvas = document.getElementById('Canvas');
  var selectBox = document.getElementById('SelectBox');
  var mobius = new MobiusStrip(canvas, selectBox.value);
  var playBtn = document.getElementById('PlayButton');
  var stopBtn = document.getElementById('StopButton');
  mobius.play(50, 0.03);
  playBtn.addEventListener('click', function(e) {
    mobius.play(50, 0.03);
  }, false);
  stopBtn.addEventListener('click', function(e) {
    mobius.stop();
  }, false);
  selectBox.addEventListener('change', function(e) {
    mobius.stop();
    mobius = new MobiusStrip(canvas, selectBox.value);
    mobius.play(50, 0.03);
  }, false);
}, false);
</script>

CSS

body{ font-size:12px; color:#ccc; background-color:#000; text-align:center; margin:20px; }
canvas{ border:1px solid #00ff99; margin: 10px auto; display: block; }
input[type="button"]{ font-family:Verdana, sans-serif; color:#fff; background-color:#666; border:none; padding:2px 8px; }
input[type="button"]:hover{ background-color: #333; }

JavaScript

// forked from wellflat's "Möbius Strip" http://jsdo.it/wellflat/7oEc
var Class = {
  create : function() {
    var properties = arguments[0];
    function self() {
      this.initialize.apply(this, arguments);
    }
    for(var i in properties) {
      self.prototype[i] = properties[i];
    }
    if(!self.prototype.initialize) {
      self.prototype.initialize = function() {};
    }
    return self;
  }
};
var MobiusStrip = Class.create({
  initialize : function(canvas, n) {
    if(canvas == undefined || n == undefined) return ;
    this.context = canvas.getContext('2d');
    this.WIDTH = canvas.width;
    this.HEIGHT = canvas.height;
    this.SCALE = 60;
    this.FOV = 250;
    this.points = [];
    this.numPoints = 0;
    this.isPlay = false;
    this.setStyle(this.context.createLinearGradient(0, 0, 0, 300));
    this.setPoints(n);
  },
  setStyle : function(grad) {
    grad.addColorStop(0, 'rgb(0, 0, 0)');
    grad.addColorStop(0.7, 'rgb(16, 16, 16)');
    grad.addColorStop(0.8, 'rgb(32, 32, 32)');
    grad.addColorStop(0.9, 'rgb(48, 48, 48)');
    grad.addColorStop(1, 'rgb(64, 64, 64)');
    this.context.fillStyle = grad;
    this.context.strokeStyle = 'rgb(0, 255, 160)';
    this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
  },
  setPoints : function(num) {
    var s = 0.0;
    var t = 0.0;
    var k = 0.0;
    var n = 0;
    var point;
    for(var i=0; i<=2*Math.PI*num; i++) {
      for(var j=-num/8; j<=num/8; j++) {
        s = i/num; t = j/10; k = 1 + t*Math.cos(s/2);
        point = [(this.SCALE*k*Math.cos(s)),
                 (this.SCALE*k*Math.sin(s)),
                 (this.SCALE*t*Math.sin(s/2))];
        this.points.push(point);
        n++;
      }
    }
    this.numPoints = n;
  },
  play : function(t, angle) {
    var self = this;
    if(!this.isPlay) {
      this.timerID = setInterval(function(){self.render(angle);}, t);
      this.isPlay = true;
    }
  },
  stop : function() {
    if(this.isPlay) {
      clearInterval(this.timerID);
   ...