View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
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 pick_stitch(pt, gt, fx, fy) { return function(x, y, size) { x = (x % (size * fx)) & SIZE_1; y = (y % (size * fy) + pt[x]) & SIZE_1; return gt[pt[y]]; }; } function pick_normal(pt, gt) { return function(x, y, size) { return gt[pt[(y + pt[x & SIZE_1]) & SIZE_1]]; }; } function filter_fractal(v) { return v; } function filter_normal(v) { return v < 0 ? -v : v; } function plot_array(c, data, i) { data[i++] = c; return i; } function plot_alpha(c, data, i) { data[i += 3] = c; return ++i; } function plot_gray(c, data, i) { data[i++] = c; data[i++] = c; data[i++] = c; data[i++] = 255; return i; } 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(); } function drawMark(cx) { if (RED && RED.size > 0) { cx.save(); cx.fillStyle = 'rgba(255,0,0,0.8)'; cx.translate(RED.x, RED.y); cx.rotate(RED.angle); cx.fillRect(0, -4, 10, 8); cx.restore(); } if (YELLOW && YELLOW.size > 0) { cx.save(); cx.fillStyle = 'rgba(255,255,0,0.8)'; cx.translate(YELLOW.x, YELLOW.y); cx.rotate(YELLOW.angle); cx.fillRect(0, -4, 10, 8); 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 AX = 1; (function() { if (ROPE) { if (PRESS) { ROPE.shorten(AX); AX += 1; if (AX > 50) AX = 50; } else { if (AX > 0) { ROPE.shorten(AX); AX -= 2; } else AX = 0; } ROPE.update(CX); 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); })();
掃除機のあのボタン
Click me!
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
Help
About
×
×