Team:WHU-China/Team/Gallary
From 2011.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
+ | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> | ||
<html> | <html> | ||
<head> | <head> | ||
- | < | + | <title>鐐瑰嚮灏忓浘閲嶆柊鎺掑簭鍥剧墖骞舵樉绀哄ぇ鍥綣S浠g爜_www.update8.com</title> |
- | < | + | <meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> |
- | < | + | <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> |
+ | <meta http-equiv="imagetoolbar" content="no"> | ||
<style type="text/css"> | <style type="text/css"> | ||
- | + | html { overflow: hidden; } | |
- | { | + | body { position: absolute; margin: 0px; padding: 0px; background: #000; width: 100%; height: 100%; } |
- | + | #screen { position: absolute; background: #000; left: 50%; top: 50%; width: 960px; height: 520px; margin-left: -480px; margin-top: -260px; } | |
- | } | + | #a { position: absolute; font-family: arial; font-size: 12px; color: #FFF; cursor: pointer; overflow: hidden; width: 0px; } |
- | + | #b { position: absolute; } | |
- | { | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | position: | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | # | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | width: | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | height: | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | } | + | |
- | #screen { position: absolute; background: #000; left: 50%; top: 50%; width: 960px; height: 520px; margin-left: -480px; margin-top: 260px; } | + | |
- | # | + | |
- | # | + | |
</style> | </style> | ||
+ | <script type="text/javascript"> | ||
+ | // ====================================================================== | ||
+ | // script by Gerard Ferrandez | February, 2010 | ||
+ | // -------------------------------------------------------------------- | ||
+ | // http://www.dhteumeuleu.com | http://www.twitter.com/ge1doot | ||
+ | // Javascript code licensed under CC-BY-NC - Do not remove this notice | ||
+ | // ====================================================================== | ||
+ | |||
+ | var res = function () { | ||
+ | // ---- private vars ---- | ||
+ | var scr, a0, a1, | ||
+ | divs = new Array(), | ||
+ | moves = new Array(), | ||
+ | idle = false, | ||
+ | nw, nh, wu, hu, | ||
+ | mx = [1,0,-1,0,2,0,-2,0,3,0,-3,0,4,0,-4,0], | ||
+ | my = [0,1,0,-1,0,2,0,-2,0,3,0,-3,0,4,0,-4], | ||
+ | bw = 10; | ||
+ | |||
+ | //////////////////////////////////////////////////////////////////////////// | ||
+ | // ============== grid class ============= | ||
+ | var grid = { | ||
+ | // ===== calculate grid ===== | ||
+ | calc : function () { | ||
+ | // ---- empty grid ---- | ||
+ | this.grid = new Array(24); | ||
+ | for (var i = 0; i < 24; i++) | ||
+ | this.grid[i] = 0; | ||
+ | // ---- load grid ---- | ||
+ | var i = 0, o; | ||
+ | while ( o = divs[i++] ) | ||
+ | this.add(o); | ||
+ | }, | ||
+ | // ===== return cell value ===== | ||
+ | cell : function (x, y) { | ||
+ | return this.grid[x * 4 + y]; | ||
+ | }, | ||
+ | // ===== area weight ===== | ||
+ | weight : function (x, y, w, h) { | ||
+ | var gw = 0; | ||
+ | for(var i = 0; i < w; i++) | ||
+ | for(var j = 0; j < h; j++) | ||
+ | gw += this.cell(i + x, j + y); | ||
+ | return gw; | ||
+ | }, | ||
+ | // ===== add div ===== | ||
+ | add : function (o) { | ||
+ | for(var i = 0; i < o.w; i++) | ||
+ | for(var j = 0; j < o.h; j++) | ||
+ | this.grid[(i + o.x) * 4 + (j + o.y)] += o.f ? 20 : 1; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | //////////////////////////////////////////////////////////////////////////// | ||
+ | // ============== tween class ============= | ||
+ | var tween = { | ||
+ | // ===== tween stack ===== | ||
+ | divs : new Array(), | ||
+ | // ===== create tween object ===== | ||
+ | tween : function (o, x, y, w, h) { | ||
+ | return { | ||
+ | div : o, | ||
+ | x : x, | ||
+ | y : y, | ||
+ | w : w, | ||
+ | h : h | ||
+ | }; | ||
+ | }, | ||
+ | // ===== add new tween ===== | ||
+ | add : function (o, x, y, w, h) { | ||
+ | if (o == true) return false; | ||
+ | // ---- consolidate with last move ---- | ||
+ | var t = this.divs.length - 1; | ||
+ | if (t >= 0 && this.divs[t].div == o) | ||
+ | this.divs[t] = this.tween(o, x, y, w, h); | ||
+ | else { | ||
+ | // ---- push tween ---- | ||
+ | this.divs.push( | ||
+ | this.tween(o, x, y, w, h) | ||
+ | ); | ||
+ | } | ||
+ | }, | ||
+ | // ======== start next tween ========= | ||
+ | next : function () { | ||
+ | if (this.divs.length) { | ||
+ | var t = this.divs[0]; | ||
+ | var o = t.div; | ||
+ | o.dx = t.x - o.xc; | ||
+ | o.dy = t.y - o.yc; | ||
+ | o.dw = t.w - o.wc; | ||
+ | o.dh = t.h - o.hc; | ||
+ | o.s = 1; | ||
+ | o.p = 0; | ||
+ | return o; | ||
+ | } else return false; | ||
+ | } | ||
+ | } | ||
+ | //////////////////////////////////////////////////////////////////////////// | ||
+ | // =============== Div constructor =============== | ||
+ | var Frame = function (i, div) { | ||
+ | // ---- random position ---- | ||
+ | do { | ||
+ | this.x = this.x0 = Math.floor(Math.random() * 6); | ||
+ | this.y = this.y0 = Math.floor(Math.random() * 4); | ||
+ | } while (moves[this.x * 4 + this.y]); | ||
+ | moves[this.x * 4 + this.y] = true; | ||
+ | // ---- dimensions ---- | ||
+ | var img = div.getElementsByTagName("img")[0]; | ||
+ | var wh = img.alt.split(","); | ||
+ | img.alt = ""; | ||
+ | this.w = 1; | ||
+ | this.h = 1; | ||
+ | this.xc = this.x + .5; | ||
+ | this.yc = this.y + .5; | ||
+ | this.wc = 0; | ||
+ | this.hc = 0; | ||
+ | this.w1 = wh[0] * 1; | ||
+ | this.h1 = wh[1] * 1; | ||
+ | this.i = i; | ||
+ | this.s = 0; | ||
+ | div.parent = this; | ||
+ | div.onclick = function () { this.parent.click(); } | ||
+ | this.css = div.style; | ||
+ | // ---- push tween ---- | ||
+ | tween.add(this, this.x, this.y, 1, 1); | ||
+ | } | ||
+ | |||
+ | // ========== calculate moving cost =========== | ||
+ | Frame.prototype.costMove = function (m) { | ||
+ | // ---- what direction ---- | ||
+ | var sx = mx[m] > 0 ? 1 : mx[m] < 0 ? -1 : 0, | ||
+ | sy = my[m] > 0 ? 1 : my[m] < 0 ? -1 : 0, | ||
+ | cm = 0; | ||
+ | // ---- horizontal ---- | ||
+ | if (sx != 0) { | ||
+ | for (var i = this.x; i != this.x + mx[m]; i += sx) | ||
+ | cm += grid.weight(i, this.y, this.w, this.h); | ||
+ | // ---- vertical ---- | ||
+ | } else if (sy != 0) { | ||
+ | for (var i = this.y; i != this.y + my[m]; i += sy) | ||
+ | cm += grid.weight(this.x, i, this.w, this.h); | ||
+ | } | ||
+ | // ---- return cost ---- | ||
+ | return cm; | ||
+ | } | ||
+ | |||
+ | // ============ determine moving direction ============= | ||
+ | Frame.prototype.findMove = function () { | ||
+ | var d = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], | ||
+ | mx = 1000, | ||
+ | cm, m; | ||
+ | // =========== loop distance ============ | ||
+ | for (var p = 0; p < 4 && mx >= 20; p++) { | ||
+ | // ======== vertical neighbors weights ======== | ||
+ | for (var i = 0; i < this.w; i++) { | ||
+ | // ---- up ---- | ||
+ | if (this.y - p > 0) | ||
+ | d[3 + p * 4] += grid.cell(this.x + i, this.y - (p + 1)); | ||
+ | else | ||
+ | // ---- border ---- | ||
+ | d[3 + p * 4] = 100; | ||
+ | // ---- bottom ---- | ||
+ | if (this.y + p + this.h < 4) | ||
+ | d[1 + p * 4] += grid.cell(this.x + i, this.y + this.h + p); | ||
+ | else | ||
+ | // ---- border ---- | ||
+ | d[1 + p * 4] = 100; | ||
+ | } | ||
+ | // ======== horizontal neighbors weights ======== | ||
+ | for (var j = 0; j < this.h; j++) { | ||
+ | // ---- left ---- | ||
+ | if (this.x - p > 0) | ||
+ | d[2 + p * 4] += grid.cell(this.x - (p + 1), this.y + j); | ||
+ | else | ||
+ | // ---- border ---- | ||
+ | d[2 + p * 4] = 100; | ||
+ | // ---- right ---- | ||
+ | if (this.x + this.w + p < 6) | ||
+ | d[0 + p * 4] += grid.cell(this.x + this.w + p, this.y + j); | ||
+ | else | ||
+ | // ---- border ---- | ||
+ | d[0 + p * 4] = 100; | ||
+ | } | ||
+ | // =============== find direction to the weakest neighbor ================ | ||
+ | mx = 1000; | ||
+ | for (var i = 0; i < 4 * (p + 1); i++) { | ||
+ | if ( d[i] < mx) { | ||
+ | // ---- store min values ---- | ||
+ | mx = d[i]; | ||
+ | m = i; | ||
+ | cm = this.costMove(i); | ||
+ | // ---- equality case ---- | ||
+ | } else if ( d[i] == mx) { | ||
+ | // ---- less costly move ---- | ||
+ | var cmm = this.costMove(i); | ||
+ | if (cmm < cm) { | ||
+ | cm = cmm; | ||
+ | m = i; | ||
+ | mx = d[i]; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | // ====== return direction [0 = right, 1 = bottom, 2 = left, 3 = up] ====== | ||
+ | return m; | ||
+ | } | ||
+ | |||
+ | // ============ HTML rendering ============= | ||
+ | Frame.prototype.paint = function () { | ||
+ | this.css.left = Math.round(bw + this.xc * wu) + "px"; | ||
+ | this.css.top = Math.round(bw + this.yc * hu) + "px"; | ||
+ | this.css.width = Math.round(Math.max(0, this.wc * wu - bw)) + "px"; | ||
+ | this.css.height = Math.round(Math.max(0, this.hc * hu - bw)) + "px"; | ||
+ | } | ||
+ | |||
+ | // ========== easing function ============== | ||
+ | Frame.prototype.tween = function () { | ||
+ | if (this.s != 0) { | ||
+ | // ---- easing ---- | ||
+ | this.p += this.s; | ||
+ | this.xc += this.dx * this.p * .01; | ||
+ | this.yc += this.dy * this.p * .01; | ||
+ | this.wc += this.dw * this.p * .01; | ||
+ | this.hc += this.dh * this.p * .01; | ||
+ | // ---- HTML rendering ---- | ||
+ | this.paint(); | ||
+ | // ---- percentage steps [1+2+3+4+5+6+7+8+9+10+9+8+7+6+5+4+3+2+1=100] ---- | ||
+ | if (this.p == 10) | ||
+ | // ---- reverse acceleration | ||
+ | this.s = -1; | ||
+ | else if (this.p == 0) | ||
+ | // ---- moving end | ||
+ | this.s = false; | ||
+ | } | ||
+ | return this.s; | ||
+ | } | ||
+ | |||
+ | // ============= Main IA function for moving divs =============== | ||
+ | Frame.prototype.click = function () { | ||
+ | if (moves.length) { | ||
+ | var i = 0, o; | ||
+ | while ( o = moves[i++] ) { | ||
+ | o.f = false; | ||
+ | // ---- zoom out ---- | ||
+ | if (o.w != 1 || o.h != 1) { | ||
+ | o.w = 1; | ||
+ | o.h = 1; | ||
+ | tween.add(o, o.x, o.y, o.w, o.h); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | // ---- stop here if same div ---- | ||
+ | if (moves[0] == this) | ||
+ | moves = new Array(); | ||
+ | else { | ||
+ | // ---- init grid weights ---- | ||
+ | moves = new Array(); | ||
+ | grid.calc(); | ||
+ | // =========== find the best place for the zoomed div =========== | ||
+ | var mvx = 0, | ||
+ | mvy = 0; | ||
+ | // ---- right border limit ---- | ||
+ | if (this.y + this.h1 > 3) | ||
+ | this.y -= this.y + this.h1 - 4; | ||
+ | else { | ||
+ | // ---- vertical backward move ---- | ||
+ | for (var i = this.y - 1; i > this.y - this.h - 1; i--) | ||
+ | if (i >= 0 && grid.weight(this.x, i, this.w1, 1) == 0) | ||
+ | mvy++; | ||
+ | } | ||
+ | // ---- bottom border limit ---- | ||
+ | if (this.x + this.w1 > 5) | ||
+ | this.x -= this.x + this.w1 - 6; | ||
+ | else if (!mvy) { | ||
+ | // ---- horizontal backward move ---- | ||
+ | for (var i = this.x - 1; i > this.x - this.w - 1; i--) | ||
+ | if (i >= 0 && grid.weight(i, this.y, 1, this.h1) == 0) | ||
+ | mvx++; | ||
+ | } | ||
+ | // ============ move zoomed div ============= | ||
+ | this.x -= mvx; | ||
+ | this.y -= mvy; | ||
+ | this.w = this.w1; | ||
+ | this.h = this.h1; | ||
+ | this.f = true; | ||
+ | this.findMove(); | ||
+ | grid.add(this); | ||
+ | moves.push(this); | ||
+ | // ========= cascading child moves ========== | ||
+ | var k = 0, o; | ||
+ | // ---- loop through all divs ---- | ||
+ | while ( o = divs[k++] ) { | ||
+ | // ---- skip frozen div ---- | ||
+ | if (o.f != true) { | ||
+ | // ---- loop through all cells ---- | ||
+ | for (var i = 0; i < o.w; i++) { | ||
+ | for (var j = 0; j < o.h; j++) { | ||
+ | // ---- collision (non empty cell) ---- | ||
+ | if (grid.cell(i + o.x, j + o.y) > 1) { | ||
+ | // ---- move to a better place ---- | ||
+ | var m = o.findMove(); | ||
+ | o.x += mx[m]; | ||
+ | o.y += my[m]; | ||
+ | // ---- not inside another one ? ---- | ||
+ | if (grid.weight(o.x, o.y, o.w, o.h) < 20) { | ||
+ | // ---- freeze div and push move ---- | ||
+ | o.f = true; | ||
+ | grid.add(o); | ||
+ | moves.push(o); | ||
+ | // ---- reset main loop and exit ---- | ||
+ | k = 0; | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | if (o.f) break; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | // ========= push moves in reverse order ========= | ||
+ | var i = moves.length, o; | ||
+ | while ( o = moves[--i] ) | ||
+ | tween.add(o, o.x, o.y, o.w, o.h); | ||
+ | } | ||
+ | // ---- start tweens engine ---- | ||
+ | a0 = tween.next(); | ||
+ | if (idle) { | ||
+ | idle = false; | ||
+ | run(); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | // ============== main loop ================ | ||
+ | var run = function () { | ||
+ | // ---- first tween ---- | ||
+ | if (a0) { | ||
+ | a0.tween(); | ||
+ | if (a0.p == 10) { | ||
+ | // ---- next ---- | ||
+ | a1 = a0; | ||
+ | tween.divs.splice(0,1); | ||
+ | a0 = tween.next(); | ||
+ | } | ||
+ | } | ||
+ | // ---- second tween ---- | ||
+ | if (a1) { | ||
+ | a1.tween(); | ||
+ | // ---- end anim ---- | ||
+ | if (a1.s === false) | ||
+ | a1 = false; | ||
+ | } | ||
+ | // ---- loop ---- | ||
+ | if (a0 || a1) setTimeout(run, 32); | ||
+ | else idle = true; | ||
+ | } | ||
+ | // ============== init script ============== | ||
+ | var init = function () { | ||
+ | // ---- init container ---- | ||
+ | scr = document.getElementById('screen'); | ||
+ | // ---- load divs ---- | ||
+ | var k = 0, o; | ||
+ | while ( o = scr.getElementsByTagName("div")[k++] ) | ||
+ | divs.push( | ||
+ | new Frame(k, o) | ||
+ | ); | ||
+ | // ---- ajust dimensions ---- | ||
+ | nw = scr.offsetWidth - bw; | ||
+ | nh = scr.offsetHeight - bw; | ||
+ | wu = nw / 6; | ||
+ | hu = nh / 4; | ||
+ | // ---- start animation ----- | ||
+ | a0 = tween.next(); | ||
+ | run(); | ||
+ | } | ||
+ | return { | ||
+ | // ==== public bloc ==== | ||
+ | init : init | ||
+ | } | ||
+ | }(); | ||
+ | |||
+ | </script> | ||
</head> | </head> | ||
<body> | <body> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
<div id="screen"> | <div id="screen"> | ||
- | <div id=" | + | <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/e/e6/Whu-1.jpg" width="503" height="376" alt="3,3"></div> |
- | <div id=" | + | <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/f/f1/Whu-4-2.jpg" width="465" height="373" alt="3,3"></div> |
- | <div id=" | + | <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/c/c4/Whu-8.jpg" width="465" height="373" alt="3,3"></div> |
- | <div id=" | + | <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/f/f6/Whu-10.jpg" width="301" height="503" alt="2,4"></div> |
- | <div id=" | + | <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/6/69/Whu-13.jpg" width="375" height="500" alt="2,4"></div> |
- | <div id=" | + | <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/e/e1/Whu-18.jpg" width="370" height="501" alt="2,4"></div> |
- | <div id=" | + | <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/5/57/Whu-47.jpg" width="465" height="373" alt="3,3"></div> |
- | <div id=" | + | <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/a/a8/Whu-61.jpg" width="307" height="499" alt="2,4"></div> |
- | <div id=" | + | <div id="a"><img id="b" src="https://static.igem.org/mediawiki/2011/f/fc/Whu-43.jpg" width="500" height="376" alt="3,3"></div> |
+ | |||
</div> | </div> | ||
- | <script type="text/javascript | + | <script type="text/javascript"> |
// ==== start script ==== | // ==== start script ==== | ||
setTimeout(function() { | setTimeout(function() { | ||
Line 118: | Line 414: | ||
}, 100); | }, 100); | ||
</script> | </script> | ||
- | |||
- | |||
- | |||
</body> | </body> | ||
- | |||
</html> | </html> | ||
- |
Revision as of 15:26, 1 October 2011
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">