Fire JS Bin - ROPE

You can jump to the latest bin by adding /latest to your URL

Find

→ ←

⟲

Replace

⊗ All Replace

// forked from gct256's "pseudo random (XorShift)" http://jsdo.it/gct256/pseudoRandom

// 再現性のある擬似乱数列を生成
// 実装はXorShift
// 種の初期化方法をもうちょっとまともにしたい

// 他のオレオレライブラリにあわせてgct256.Randomにする

// バグ修正＋seedがnullの時に自動生成するように

if (typeof window.gct256 != 'object')
  window.gct256 = {};

(function() {
  function getSeed(v) {
    return (1812433253 * (v ^ (v << 30))) >>> 0;
  }

var X_BASE = 123456789;
  var Y_BASE = 362436069;
  var Z_BASE = 521288629;
  var MAX = 0x100000000;
  var MAX_1 = MAX - 1;
  
  var R = gct256.Random = function(seed) {
    if (arguments.length === 0)
      this.reset();
    else
      this.reset(seed);
  };

R.prototype.reset = function(seed) {
    this.x = X_BASE;
    this.y = Y_BASE;
    this.z = Z_BASE;
    if (arguments.length === 0 || seed == null)
      this.w = getSeed(Math.random() * MAX);
    else
      this.w = getSeed(seed);
  };
  R.prototype.generate = function() {
    var t = this.x ^ this.x << 11, w = this.w;
    this.x = this.y;
    this.y = this.z;
    this.z = w;
    return this.w = ((w ^ (w >>> 19)) ^
      (t ^ (t >>> 8))) >>> 0;
  };
  R.prototype.i = function(a, b) {
    var c;
    switch (arguments.length) {
    case 0:
      return this.generate();
    case 1:
      a |= 0;
      return Math.floor(this.generate() / MAX * a);
    case 2:
      a |= 0;
      b |= 0;
      if (a > b) { c = a; a = b; b = c; }
      return Math.floor(this.generate() / MAX *
                        (b - a + 1) + a);
    default:
      return 0;
    }
  };
  R.prototype.f = function(a, b) {
    var c;
    switch (arguments.length) {
    case 0:
      return this.generate() / MAX;
    case 1:
      a = isFinite(a=+a) ? a : 0;
      return this.generate() / MAX_1 * a;
    case 2:
      a = isFinite(a=+a) ? a : 0;
      b = isFinite(b=+b) ? b : 0;
      if (a > b) { c = a; a = b; b = c; }
      return this.generate() / MAX * (b - a) + a;
    default:
      return 0;
    }
  };

var GLOBAL = new R;

R.reset = GLOBAL.reset;
  R.generate = GLOBAL.generate;
  R.i = GLOBAL.i;
  R.f = GLOBAL.f;
})();

/* ================================================ */
/* gct256.PerlinNoise */

if (typeof window.gct256 != 'object' ||
    typeof window.gct256.Random != 'function')
  throw 'gct256.PerlinNoise required gct256.Random';

(function() {
  var SIZE = (1 << 8), SIZE_1 = SIZE - 1;

function smooth(t) {
    // 10 (1-t)^2 t^3 + 5 (1-t) t^4 + t^5
    return ((6 * t - 15) * t + 10) * t * t * t;
  }

function filter_fractal(v) {
    return v;
  }
  function filter_normal(v) {
    return v < 0 ? -v : v;
  }

function noise(x, y, size, pick) {
    var ix = Math.floor(x *= size), fx = x - ix;
    var iy = Math.floor(y *= size), fy = y - iy;

var g_00 = pick(ix,     iy,     size);
    var g_10 = pick(ix + 1, iy,     size);
    var g_01 = pick(ix,     iy + 1, size);
    var g_11 = pick(ix + 1, iy + 1, size);

g_00 = g_00[0] * (fx    ) + g_00[1] * (fy    );
    g_10 = g_10[0] * (fx - 1) + g_10[1] * (fy    );
    g_01 = g_01[0] * (fx    ) + g_01[1] * (fy - 1);
    g_11 = g_11[0] * (fx - 1) + g_11[1] * (fy - 1);

var t = smooth(fx);
    var v0 = g_00 - t * (g_00 - g_10);
    var v1 = g_01 - t * (g_01 - g_11);
    v0 = v0 - smooth(fy) * (v0 - v1);
    return v0;
  }

function generate(x, y, octaves,
                    persistence, amplitude,
                    pick, filter) {
    var octave = 1, detail = 1;
    var result = 0, value;
    for (;octave <= octaves; ++octave) {
      value = noise(x, y, detail, pick);
      result += filter(value) * amplitude;
      amplitude *= persistence;
      detail += detail;
    }
    return result;
  }

var PN = gct256.PerlinNoise = function(seed,
                                         persistence,
                                         amplitude) {
    this.reset(seed, persistence, amplitude);
  };
  PN.prototype.reset = function(seed,
                                persistence,
                                amplitude) {
    var r = new gct256.Random(seed), i, j, k;
    var pt = this.pt = [];
    var gt = this.gt = [];
    var pi2 = Math.PI * 2;

for (i = 0; i < SIZE; ++i) {
      pt[i] = i;
      j = r.f(pi2);
      gt[i] = [Math.cos(j), Math.sin(j)];
    }
    while (i > 0) {
      j = r.i(i);
      k = pt[--i];
      pt[i] = pt[j];
      pt[j] = k;
    }

this.persistence = isFinite(persistence)
      ? +persistence : 0.5;
    this.amplitude = isFinite(amplitude)
      ? +amplitude : 0.5;
  };
  PN.prototype.fillBitmap = function(context,
                                     x, y, w, h,
                                     baseX,
                                     baseY,
                                     octaves,
                                     stitch,
                                     fractal,
                                     alpha, color) {
    if (!context || !context.canvas) return;
    var cw = context.canvas.width;
    var ch = context.canvas.height;
    if ((x |= 0) < 0 || cw <= x ||
        (y |= 0) < 0 || ch <= y ||
        (w |= 0) <= 0 || (cw - x) < w ||
        (h |= 0) <= 0 || (ch - y) < h) return;
    baseX = isFinite(baseX) ? +baseX : w;
    baseY = isFinite(baseY) ? +baseY : h;
    octaves = Math.max(1, Math.min(16, octaves|0));

var pick, filter, delta, plot;

if (alpha) {
      context.save();
      context.fillStyle = color;
      context.fillRect(x, y, w, h);
      context.restore();
      plot = plot_alpha;
    } else {
      plot = plot_gray;
    }

var dt = context.getImageData(x, y, w, h);
    var dd = dt.data;
    var dw = dt.width, dh = dt.height;
    var pt = this.pt, gt = this.gt;

if (stitch) {
      var fx = Math.floor(dw / baseX);
      var fy = Math.floor(dh / baseY);
      baseX = dw / fx;
      baseY = dh / fy;
      pick = pick_stitch(pt, gt, fx, fy);
    } else {
      pick = pick_normal(pt, gt);
    }

if (fractal) {
      filter = filter_fractal;
      delta = 0.5;
    } else {
      filter = filter_normal;
      delta = 0;
    }

var ex = dw / dw / baseX;
    var ey = dh / dh / baseY;
    var dx, dy, dp0 = 0, dp1, v;
    var p = this.persistence, a = this.amplitude;
    for (dy = 0; dy < dh; ++dy) {
      dp1 = dp0;
      for (dx = 0; dx < dw; ++dx) {
        v = generate(dx * ex, dy * ey,
                     octaves,
                     p, a,
                     pick, filter);
        v = Math.floor((v + delta) * 255);
        dp1 = plot(v, dd, dp1);
      }
      dp0 += dw * 4;
    }
    context.putImageData(dt, 0, 0);
  };
})();

// forked from Event's "Button" http://jsdo.it/Event/jam_session3
/* ================================================ */
/* 掃除機のあのボタン */

/* ------------------------------------------------ */
/* utilities */
function ex(a, b) {
  for (var c in b) a[c] = b[c];
}

/* ------------------------------------------------ */
/* extend Math */
ex(Math, {
  PI2: Math.PI * 2,
  PI1_2: Math.PI / 2,
  PI3_2: Math.PI * 1.5,
  RADIAN: Math.PI / 180
});

/* ------------------------------------------------ */
/* Rope Segment Object */
var Segment = function(parent, angle, size) {
  this.parent = parent;
  this.angle = angle;
  this.size = size;
  this.relocate();
};
ex(Segment.prototype, {
  relocate: function() {
    var a = this.angle, s = this.size;
    this.x = this.parent.x + Math.cos(a) * s;
    this.y = this.parent.y + Math.sin(a) * s;
  },
  update: function() {
    var a0 = this.angle;
    var a1 = Math.atan2(this.y - this.parent.y,
                        this.x - this.parent.x);
    var a = (a0 + a1) / 2;
    if (a0 - a1 < -Math.PI) a += Math.PI;
    else if (a0 - a1 > Math.PI) a -= Math.PI;
    this.angle = a;
    this.relocate();
  },
  drawTail: function(cx, w) {
    cx.beginPath();
    cx.save();
    cx.translate(this.x, this.y);
    cx.rotate(this.angle);
    cx.arc(0, 0, w/2, 0, Math.PI2, true);
    cx.fill();
    cx.restore();
  },
  draw: function(cx, w) {
    var s = this.size, w2 = w / 2;
    cx.save();
    cx.translate(this.parent.x, this.parent.y);
    cx.rotate(this.angle);
    cx.beginPath();
    cx.arc(0, 0, w2, Math.PI1_2, Math.PI3_2, false);
    cx.lineTo(s, -w2);
    cx.lineTo(s,  w2);
    cx.fill();
    cx.restore();
  }
});

/* ------------------------------------------------ */
/* Rope Object */
var Rope = function(x, y, width, color_stops) {
  this.x = x;
  this.y = y;
  this.w = width;
  this.color_stops = color_stops;
  this.grad = null;
  this.segments = [];
};
ex(Rope.prototype, {
  add: function(x, y) {
    var s = this.segments, l = s.length;
    var parent = (l == 0 ? this : s[l - 1]);
    x -= parent.x;
    y -= parent.y;
    var angle = Math.atan2(y, x);
    var size = Math.sqrt(x * x + y * y);
    s.push(new Segment(parent, angle, size));
  },
  shorten: function(v) {
    var s = this.segments, l = s.length, i;
    for (i = 0; i < l; ++i) {
      s[i].size -= v;
      if (s[i].size < 0) {
        v = -s[i].size;
        s[i].size = 0;
      } else break;
    }
    var n = [];
    for (i = 0; i < l; ++i)
      if (s[i].size > 0) n.push(s[i]);
    if (n[0]) n[0].parent = this;
    this.segments = n;
    this.update();
  },
  getLast: function() {
    var s = this.segments, l = s.length;
    return l == 0 ? this : s[l - 1];
  },
  update: function() {
    var s = this.segments, l = s.length, i;
    for (i = 0; i < l; ++i) s[i].update();
  },
  draw: function(cx) {
    var w = this.w, w2 = w/2, i;
    if (this.grad === null) {
      var g = cx.createLinearGradient(0, -w2, 0, w2);
      var c = this.color_stops, l = c.length;
      for (i = 0; i < l; ++i)
        g.addColorStop(c[i][0], c[i][1]);
      this.grad = g;
    }
    cx.save();
    cx.fillStyle = this.grad;
    var s = this.segments;
    i = s.length - 1;
    if (i >= 0) {
      s[i].drawTail(cx, w);
      for (; i >= 0 ; --i)
        s[i].draw(cx, w);
    }
    cx.restore();
  }
});

/* ------------------------------------------------ */
/* floor */
function buildFloor() {
  var cv0 = document.createElement('canvas');
  var cv1 = document.createElement('canvas');
  var cx0 = cv0.getContext('2d');
  var cx1 = cv1.getContext('2d');
  var pn = new gct256.PerlinNoise();

cv0.width = cv0.height = 64;
  cv1.width = cv1.height = 400;
  cx1.fillStyle = '#ed9';
  cx1.fillRect(0, 0, 400, 400);

pn.fillBitmap(cx0, 0, 0, 64, 64, 32, 8, 3,
                true, false, true, '#960');
  cx1.drawImage(cv0, 0, 0, 64, 64, 0, 0, 400, 400);
  pn.fillBitmap(cx0, 0, 0, 64, 64, 32, 2, 3,
                true, true, true, '#530');
  cx1.globalAlpha = 0.1;
  cx1.drawImage(cv0, 0, 0, 64, 64, 0, 0, 400, 400);
  cx1.globalAlpha = 1;

cx1.strokeStyle = 'rgba(255,255,255,0.3)';
  cx1.shadowColor = 'rgba( 64, 64,  0,0.3)';
  cx1.shadowOffsetX = -1;
  cx1.shadowOffsetY = -1;
  cx1.shdwoBlur = 1;
  for (var o = 0, ox, y = -20; y < 400; y += 40) {
    ox = o + Math.random() * 50;
    for (var x = -100; x < 400; x += 200) {
      cx1.strokeRect(x + ox, y, 200, 40);
    }
    o = 100 - o;
  }
  return cv1;
}

/* ------------------------------------------------ */
/* drawing */

function drawBody(cx) {
  var g = cx.createRadialGradient(400,360,10,400,360,100);
  g.addColorStop(0.0, '#888');
  g.addColorStop(0.8, '#fff');
  g.addColorStop(1.0, '#ccc');

cx.fillStyle = g;
  cx.beginPath();
  cx.moveTo(400, 260);
  cx.quadraticCurveTo(370,260,370,290);
  cx.lineTo(370,380);
  cx.quadraticCurveTo(370,360,400,360);
  cx.fill();

cx.fillStyle = '#444';
  cx.beginPath();
  cx.moveTo(400, 360);
  cx.quadraticCurveTo(370,360,370,380);
  cx.lineTo(370,380);
  cx.quadraticCurveTo(370,400,400,400);
  cx.fill();
}

function drawPlug(cx, x, y, a, grad) {
  var g = cx.createLinearGradient(-20, -10, -20, 10);
  for (var l = grad.length, i = 0; i < l; ++i)
    g.addColorStop(grad[i][0], grad[i][1]);
  cx.save();
  cx.translate(x, y);
  cx.rotate(a);
  cx.fillStyle = g;
  cx.beginPath();
  cx.moveTo(  0,  -5);
  cx.bezierCurveTo(-10, -10, -10, -5, -20, -10);
  cx.lineTo(-20,  10);
  cx.bezierCurveTo(-10,   5, -10, 10,   0,   5);
  cx.quadraticCurveTo(2,0, 0,-5);
  cx.closePath();
  cx.fill();
  cx.fillStyle = '#999';
  cx.beginPath();
  cx.moveTo(-20, -10);
  cx.quadraticCurveTo(-25,0, -20, 10);
  cx.quadraticCurveTo(-15,0, -20,-10);
  cx.fill();
  cx.fillStyle = '#fff';
  cx.strokeStyle = '#ccc';
  cx.beginPath();
  cx.moveTo(-20, -5);
  cx.lineTo(-30, -5);
  cx.lineTo(-30, -3);
  cx.lineTo(-20, -3);
  cx.fill();
  cx.stroke();
  cx.beginPath();
  cx.moveTo(-20, 5);
  cx.lineTo(-30, 5);
  cx.lineTo(-30, 3);
  cx.lineTo(-20, 3);
  cx.fill();
  cx.stroke();
  cx.restore();
}

/* ------------------------------------------------ */

var CV = document.getElementById('canvas');
var CX = CV.getContext('2d');
var ROPE = null;
var GRAD = [[0.0, '#000'],
            [0.1, '#333'],
            [0.4, '#bbc'],
            [0.7, '#333'],
            [1.0, '#000']];
var FLOOR = buildFloor();
var REFLECT = document.createElement('canvas');
var REFLECT_CX = REFLECT.getContext('2d');
var RED, YELLOW;
var PRESS = false;
var MX = 0, MY = 0;

CV.width = CV.height = 400;
REFLECT.width = REFLECT.height = 400;

window.addEventListener('mousemove', function(ev) {
  MX = ev.pageX - 20;
  MY = ev.pageY - 20;
}, false);

/* ------------------------------------------------ */
/* initialize */
(function() {
  var x, mx = 370;
  var y, my = 375;
  ROPE = new Rope(mx, my, 7, GRAD);
  for (x = mx - 10; x > 300; x -= 10)
    ROPE.add(x, my);

var ox = 300, oy = 200;
  var s = 90 * Math.RADIAN, r = 50;
  var x0, y0, x1, y1;
  var a = s, a0 = s, a1 = s;
  var b = (Math.random() * 2 + 4) * Math.RADIAN;
  var b0 = (Math.random() * 4 + 8) * Math.RADIAN;
  var b1 = (Math.random() * 4 + 12) * Math.RADIAN;
  for (var i = 0; i < 200; ++i) {
    x0 = Math.cos(a0) * r + ox;
    y0 = Math.sin(a0) * r + oy;
    x1 = Math.cos(a1) * r + x0;
    y1 = Math.sin(a1) * r + y0;
    ROPE.add(x1 + Math.cos(a) * r,
             (y1 + Math.sin(a) * r) / 2 + 200 - i/5);
    a0 += b0;
    a1 += b1;
    a += b;
    ox -= 1;
    oy -= 1;
  }
  RED = ROPE.segments[3];
  YELLOW = ROPE.segments[11];
})();

var last = ROPE.getLast();

drawBody(REFLECT_CX);
    REFLECT_CX.clearRect(0, 0, 400, 400);
    ROPE.draw(REFLECT_CX);
    drawMark(REFLECT_CX);
    drawBody(REFLECT_CX);
    drawPlug(REFLECT_CX, last.x, last.y,
             (last.angle||Math.PI) + Math.PI,
             GRAD);

CX.clearRect(0, 0, 400, 400);
    CX.drawImage(FLOOR, 0, 0);
    CX.globalAlpha = 0.1;
    CX.drawImage(REFLECT, 0, 8);
    CX.globalAlpha = 1;
    ROPE.draw(CX);
    drawMark(CX);
    drawBody(CX);
    drawPlug(CX, last.x, last.y,
             (last.angle||Math.PI) + Math.PI,
             GRAD);
  }

setTimeout(arguments.callee, 1000 / 60);
})();

body {
  overflow:hidden;
  background:#eee;
  color:#000;
}

#canvas {
  position:absolute;
  left:20px;top:20px;
  background:#fff;
}

.button {
  position:absolute;
  display:block;
  left:398px;top:360px;
  width:16px;height:12px;
  overflow:hidden;
  background:#fff;
  text-indent:16px;

border-radius:50%;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;

box-shadow:
     1px  1px 2px rgba(255,255,255,0.6),
    -1px -1px 2px rgba(  0,  0,  0,0.6),
     1px  1px 2px rgba(255,255,255,0.6) inset,
    -1px -1px 2px rgba(  0,  0,  0,0.6) inset;
  -moz-box-shadow:
     1px  1px 2px rgba(255,255,255,0.6),
    -1px -1px 2px rgba(  0,  0,  0,0.6),
     1px  1px 2px rgba(255,255,255,0.6) inset,
    -1px -1px 2px rgba(  0,  0,  0,0.6) inset;
  -webkit-box-shadow:
     1px  1px 2px rgba(255,255,255,0.6),
    -1px -1px 2px rgba(  0,  0,  0,0.6),
     1px  1px 2px rgba(255,255,255,0.6) inset,
    -1px -1px 2px rgba(  0,  0,  0,0.6) inset;
}

.button:active {
  background:#ccc;
  box-shadow:
     1px  1px 2px rgba(255,255,255,0.6),
    -1px -1px 2px rgba(  0,  0,  0,0.6),
     1px  1px 2px rgba(  0,  0,  0,0.6) inset,
     1px  1px 4px rgba(  0,  0,  0,0.6) inset;
  -moz-box-shadow:
     1px  1px 2px rgba(255,255,255,0.6),
    -1px -1px 2px rgba(  0,  0,  0,0.6),
     1px  1px 2px rgba(  0,  0,  0,0.6) inset,
     1px  1px 4px rgba(  0,  0,  0,0.6) inset;
  -webkit-box-shadow:
     1px  1px 2px rgba(255,255,255,0.6),
    -1px -1px 2px rgba(  0,  0,  0,0.6),
     1px  1px 2px rgba(  0,  0,  0,0.6) inset,
     1px  1px 4px rgba(  0,  0,  0,0.6) inset;
}

Pop out