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
//////////////////////////////////////////////////////////// // ============= micro HTML5 library ===================== // @author Gerard Ferrandez / http://www.dhteumeuleu.com/ // last update: December 23, 2012 // Released under the MIT license // http://www.dhteumeuleu.com/LICENSE.html //////////////////////////////////////////////////////////// // ===== ge1doot global ===== var ge1doot = ge1doot || { json: null, screen: null, pointer: null, camera: null, loadJS: function (url, callback, data) { if (typeof url == "string") url = [url]; var load = function (src) { var script = document.createElement("script"); if (callback) { if (script.readyState){ script.onreadystatechange = function () { if (script.readyState == "loaded" || script.readyState == "complete"){ script.onreadystatechange = null; if (--n === 0) callback(data || false); } } } else { script.onload = function() { if (--n === 0) callback(data || false); } } } script.src = src; document.getElementsByTagName("head")[0].appendChild(script); } for (var i = 0, n = url.length; i < n; i++) load(url[i]); } } // ===== html/canvas container ===== ge1doot.Screen = function (setup) { ge1doot.screen = this; this.elem = document.getElementById(setup.container) || setup.container; this.ctx = this.elem.tagName == "CANVAS" ? this.elem.getContext("2d") : false; this.style = this.elem.style; this.left = 0; this.top = 0; this.width = 0; this.height = 0; this.cursor = "default"; this.setup = setup; this.resize = function () { var o = this.elem; this.width = o.offsetWidth; this.height = o.offsetHeight; for (this.left = 0, this.top = 0; o != null; o = o.offsetParent) { this.left += o.offsetLeft; this.top += o.offsetTop; } if (this.ctx) { this.elem.width = this.width; this.elem.height = this.height; } this.setup.resize && this.setup.resize(); } this.setCursor = function (type) { if (type !== this.cursor) { this.cursor = type; this.style.cursor = type; } } window.addEventListener('resize', function () { ge1doot.screen.resize(); }, false); !this.setup.resize && this.resize(); } // ==== unified touch events handler ==== ge1doot.Pointer = function (setup) { ge1doot.pointer = this; var self = this; var body = document.body; var html = document.documentElement; this.setup = setup; this.screen = ge1doot.screen; this.elem = this.screen.elem; this.X = 0; this.Y = 0; this.Xi = 0; this.Yi = 0; this.Xr = 0; this.Yr = 0; this.isDraging = false; this.hasMoved = false; this.isDown = false; var bXi = 0; var bYi = 0; var sX = 0; var sY = 0; if (setup.tap) this.elem.onclick = function () { return false; } if (!setup.documentMove) { document.ontouchmove = function(e) { e.preventDefault(); } } this.pointerDown = function (e) { if (this.elem.setCapture) this.elem.setCapture(); this.isDraging = false; this.hasMoved = false; this.isDown = true; this.Xr = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX); this.Yr = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY); this.X = sX = this.Xr - this.screen.left; this.Y = sY = this.Yr - this.screen.top + ((html && html.scrollTop) || body.scrollTop); this.setup.down && this.setup.down(e); } this.pointerMove = function(e) { this.Xr = (e.clientX !== undefined ? e.clientX : e.touches[0].clientX); this.Yr = (e.clientY !== undefined ? e.clientY : e.touches[0].clientY); this.X = this.Xr - this.screen.left; this.Y = this.Yr - this.screen.top + ((html && html.scrollTop) || body.scrollTop); if (this.isDown) { this.Xi = bXi + (this.X - sX); this.Yi = bYi - (this.Y - sY); } if (Math.abs(this.X - sX) > 11 || Math.abs(this.Y - sY) > 11) { this.hasMoved = true; if (this.isDown) this.isDraging = true; else { sX = this.X; sY = this.Y; } } this.setup.move && this.setup.move(e); } this.pointerUp = function(e) { bXi = this.Xi; bYi = this.Yi; if (!this.hasMoved) { this.X = sX; this.Y = sY; this.setup.tap && this.setup.tap(e); } else { this.setup.up && this.setup.up(e); } this.isDraging = false; this.isDown = false; this.hasMoved = false; if (this.elem.releaseCapture) this.elem.releaseCapture(); } this.pointerCancel = function(e) { if (this.elem.releaseCapture) this.elem.releaseCapture(); this.isDraging = false; this.hasMoved = false; this.isDown = false; bXi = this.Xi; bYi = this.Yi; sX = 0; sY = 0; } if ('ontouchstart' in window) { this.elem.ontouchstart = function (e) { self.pointerDown(e); } this.elem.ontouchmove = function (e) { self.pointerMove(e); } this.elem.ontouchend = function (e) { self.pointerUp(e); } this.elem.ontouchcancel = function (e) { self.pointerCancel(e); } } else { this.elem.onmousedown = function (e) { self.pointerDown(e); } this.elem.onmousemove = function (e) { self.pointerMove(e); } this.elem.onmouseup = function (e) { self.pointerUp(e); } } } // ===== smooth animation ===== window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( run ){ window.setTimeout(run, 16); }; })(); /* * ================================================ * robot arm - inverse kinematics * http://www.dhteumeuleu.com/the-law-of-robotics * Author Gerard Ferrandez - 10 August 2011 * ------------------------------------------------ * Released under the MIT license * http://www.dhteumeuleu.com/LICENSE.html * Last updated: 24 Dec 2012 * ================================================ */ "use strict"; (function () { var scr, pointer, robots = [], transform, transformOrigin; // ----- Robot prototype ----- var Robot = function (span) { this.span = span; this.armSegments = []; this.numSegments = 1; this.y = 0; // ---- root ---- this.armSegments.push( new ArmSegment (this, false) ); // ---- html defined arms ---- var s = span.getElementsByTagName("img"); for (var img, i = 0; img = s[i++];) { this.numSegments ++; this.armSegments.push( new ArmSegment (this, img) ); } } // ----- animation function ----- Robot.prototype.anim = function () { // ----- tracking mouse ----- var seg1 = this.armSegments[this.numSegments - 1]; seg1.x += (pointer.X - seg1.x - this.span.offsetLeft) * 0.075; seg1.y += (pointer.Y - seg1.y - this.span.offsetTop) * 0.075; // ----- inverse kinematics ----- var i = this.numSegments - 1; while ( --i ) { // ---- bottom up chain ---- var seg0 = this.armSegments[i]; var seg1 = this.armSegments[i + 1]; var a = Math.atan2(seg0.y - seg1.y, seg0.x - seg1.x); seg0.x = seg1.x + Math.cos(a) * seg1.length; seg0.y = seg1.y + Math.sin(a) * seg1.length; } var i = 0, seg0, seg1; while ( seg0 = this.armSegments[i++]) { // ---- up bottom chain ---- if (i > 1) { var seg1 = this.armSegments[i - 2]; var a = seg0.a = Math.atan2(seg0.y - seg1.y, seg0.x - seg1.x); seg0.x = seg1.x + Math.cos(a) * seg0.length; seg0.y = seg1.y + Math.sin(a) * seg0.length; } // ---- CSS 2D transforms animation ----- if (seg0.img) { seg0.css[transform] = "translate(" + ((0.5 + seg0.x - seg0.sx) | 0) + "px," + ((0.5 + seg0.y - seg0.sy) | 0) + "px) rotate(" + seg0.a + "rad)"; seg0.css[transformOrigin] = ((0.5 + seg0.sx) | 0) + "px " + ((0.5 + seg0.sy) | 0) + "px"; } } } // ----- Arm prototype ----- var ArmSegment = function(parent, img) { this.img = img; this.width = 0; this.length = 0; this.sx = 0; this.a = 0; this.x = 0; if (img) { this.css = img.style; this.sy = Math.round(img.height * 0.5); this.length = img.width - this.sy; this.sx = img.width; } this.y = parent.y; parent.y += this.length; } // ----- main loop ----- var run = function () { // ---- robots ---- for (var r, i = 0; r = robots[i++];) { r.anim(); } // ---- next frame ---- requestAnimFrame(run); } // ----- initialization ----- var init = function () { // ---- screen ---- scr = new ge1doot.Screen({ container: "screen" }); /* ---- pointer ---- */ pointer = new ge1doot.Pointer({}); // ----- CSS3 2D transforms browsers prefix detection ----- var t = ["transform", "msTransform", "MozTransform", "WebkitTransform", "OTransform"]; for (var test, i = 0; test = t[i++];) { if (typeof document.body.style[test] != "undefined") { transform = test; transformOrigin = test + "Origin"; break; } } // ---- instanciate robot arms ---- var s = document.getElementById("screen").getElementsByTagName("span"); for (var r, i = 0; r = s[i++];) { robots.push( new Robot (r) ); } pointer.X = scr.width / 2; pointer.Y = scr.height / 2; // ----- start engine ----- if (transform) run(); } return { // ---- launch script ----- load : function (params) { window.addEventListener('load', function () { init(); }, false); } } })().load();
JS Bin
html { overflow: hidden; -ms-touch-action: none; -ms-content-zooming: none; } body { margin: 0; padding: 0; width: 100%; height: 100%; color:#fff; overflow: hidden; } #screen { position: absolute; background: #111; width: 100%; height: 100%; } #screen img { position: absolute; } #robot-1 { position:fixed; left:20%; top:0px; -webkit-transform: translate3d(0,0,0); } #robot-2 { position:fixed; left:20%; bottom:0px; -webkit-transform: translate3d(0,0,0); } #robot-3 { position:fixed; left:80%; top:0px; -webkit-transform: translate3d(0,0,0); } #robot-4 { position:fixed; left:80%; bottom:0px; -webkit-transform: translate3d(0,0,0); }
Pop out
Help
About
×
×