Overcome your weaknesses through the HTML5 Coding Assessment Test! Surpass your rivals starting next school term!

or

SPEC 審査結果発表!

Möbius Strip

Follow

2010-07-27 23:57:15

License: MIT License

Fork: 3

Fav: 10

View: 1986

Play
Stop
Reload

Smart Phone

Readme
JavaScript 100 lines
HTML 33 lines
CSS 4 lines

Möbius Strip

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);
      this.isPlay = false;
    }
  },
  render : function(angle) {
    this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT);
    for(i=0; i<this.numPoints; i++)  {
      this.rotateY(this.points[i], angle);   
      this.draw(this.points[i]); 
    }
  },
  draw : function(point3d) {
    var scale = this.FOV/(this.FOV + point3d[2]); 
    var x = (point3d[0]*scale) + this.WIDTH/2;
    var y = (point3d[1]*scale) + this.HEIGHT/2;
    this.context.lineWidth= scale*2; 
    this.context.beginPath();
    this.context.moveTo(x, y); 
    this.context.lineTo(x + scale, y); 
    this.context.stroke(); 
  },
  rotateY : function(point3d, angle) {
    var x = point3d[0];
    var z = point3d[2];
    var c = Math.cos(angle);
    var s = Math.sin(angle);
    var tempZ = z;
    var tempX = x;
    x = tempX*c + tempZ*s;
    z = tempZ*c - tempX*s;
    point3d[0] = x;
    point3d[2] = z;     
  }
});

<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>

Möbius Strip

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); this.isPlay = false; } }, render : function(angle) { this.context.fillRect(0, 0, this.WIDTH, this.HEIGHT); for(i=0; i<this.numPoints; i++) { this.rotateY(this.points[i], angle); this.draw(this.points[i]); } }, draw : function(point3d) { var scale = this.FOV/(this.FOV + point3d[2]); var x = (point3d[0]*scale) + this.WIDTH/2; var y = (point3d[1]*scale) + this.HEIGHT/2; this.context.lineWidth= scale*2; this.context.beginPath(); this.context.moveTo(x, y); this.context.lineTo(x + scale, y); this.context.stroke(); }, rotateY : function(point3d, angle) { var x = point3d[0]; var z = point3d[2]; var c = Math.cos(angle); var s = Math.sin(angle); var tempZ = z; var tempX = x; x = tempX*c + tempZ*s; z = tempZ*c - tempX*s; point3d[0] = x; point3d[2] = z; } });<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>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; }

Tweet
QR code
Embed

Design view
Code view
<script type="text/javascript" src="http://jsdo.it/blogparts/7oEc/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/wellflat/7oEc" title="Möbius Strip">Möbius Strip - jsdo.it - share JavaScript, HTML5 and CSS</a></p>
zip

Tags

Favorite by

h6k

fingaholic

yoshimax

tkinjo

alt

canvastag

paq

clockmaker

os0x

Forked

sort

forked from: Möbius Strip

0
0
256views

101/33/4

forked from: Möbius Strip

0
0
494views

2/189/2

forked from: Möbius Strip

0
0
371views

101/33/4