|
|
Line 1: |
Line 1: |
− | {{Fudan-TSI}} | + | {{Fudan-TSI}}<!-- jquery loaded by HQ 1.12.4 --> |
| <html></p></div></div></div><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"> | | <html></p></div></div></div><meta name="viewport" content="width=device-width, initial-scale=1"><meta charset="UTF-8"> |
| <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&action=raw&ctype=text/css"> | | <link rel="stylesheet" href="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/materialize.css&action=raw&ctype=text/css"> |
Line 108: |
Line 108: |
| </div><!-- #pageCover --> | | </div><!-- #pageCover --> |
| <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&action=raw&ctype=text/javascript"></script> | | <script src="https://2019.igem.org/wiki/index.php?title=Template:Fudan-TSI/bkg&action=raw&ctype=text/javascript"></script> |
− | <script>function bkgFunction(e){if(e){var t=new Stats;t.domElement.style.position="absolute",t.domElement.style.left="0",t.domElement.style.top="0",document.body.appendChild(t.domElement),requestAnimationFrame(function e(){t.update(),requestAnimationFrame(e)})}var n=document.getElementById("demo");tesselation.setup(n),gradients.setup();var o,r=1e4,a=3e3;window.requestAnimationFrame(function e(t){(!o||r<t-o)&&(o=t,tesselation.next(a),gradients.next(a)),window.requestAnimationFrame(e)})}var calcDelaunayTriangulation=function(){var E=1/1048576;function p(e,t,n,o){var r,a,i,l,c,u,s,d,h,f,p=e[t][0],m=e[t][1],g=e[n][0],y=e[n][1],w=e[o][0],I=e[o][1],b=Math.abs(m-y),v=Math.abs(y-I);if(b<E&&v<E)throw new Error("Can't get circumcircle since all 3 points are y-aligned");return i=-(g-p)/(y-m),l=-(w-g)/(I-y),c=(p+g)/2,u=(g+w)/2,s=(m+y)/2,d=(y+I)/2,{i:t,j:n,k:o,x:r=b<E?c:v<E?u:(i*c-l*u+d-s)/(i-l),y:a=v<b?i*(r-c)+s:l*(r-u)+d,r:(h=g-r)*h+(f=y-a)*f}}function m(e){var t,n,o,r,a,i;for(n=e.length;n;)for(r=e[--n],o=e[--n],t=n;t;){if(i=e[--t],o===(a=e[--t])&&r===i){e.splice(n,2),e.splice(t,2);break}if(o===i&&r===a){e.splice(n,2),e.splice(t,2);break}}}return function(n){var e,t,o,r,a,i,l,c,u,s,d,h,f=n.length;if(f<3||2e3<f)return[];for(n=n.slice(0),o=new Array(f),e=f;e--;)o[e]=e;for(o.sort(function(e,t){return n[t][0]-n[e][0]}),r=function(e){var t,n,o,r,a,i,l=Number.POSITIVE_INFINITY,c=Number.POSITIVE_INFINITY,u=Number.NEGATIVE_INFINITY,s=Number.NEGATIVE_INFINITY;for(t=e.length;t--;)e[t][0]<l&&(l=e[t][0]),e[t][0]>u&&(u=e[t][0]),e[t][1]<c&&(c=e[t][1]),e[t][1]>s&&(s=e[t][1]);return o=s-c,[[(a=l+.5*(n=u-l))-20*(r=Math.max(n,o)),(i=c+.5*o)-r],[a,i+20*r],[a+20*r,i-r]]}(n),n.push(r[0],r[1],r[2]),a=[p(n,f+0,f+1,f+2)],i=[],l=[],e=o.length;e--;l.length=0){for(h=o[e],t=a.length;t--;)0<(c=n[h][0]-a[t].x)&&c*c>a[t].r?(i.push(a[t]),a.splice(t,1)):c*c+(u=n[h][1]-a[t].y)*u-a[t].r>E||(l.push(a[t].i,a[t].j,a[t].j,a[t].k,a[t].k,a[t].i),a.splice(t,1));for(m(l),t=l.length;t;)d=l[--t],s=l[--t],a.push(p(n,s,d,h))}for(e=a.length;e--;)i.push(a[e]);for(a.length=0,e=i.length;e--;)i[e].i<f&&i[e].j<f&&i[e].k<f&&a.push(i[e].i,i[e].j,i[e].k);return a}}(),tesselation=function(){var a,h,f,i;return{setup:function(e){var t=(a=e).getAttribute("viewBox").split(/\D/g);h=t[2],f=t[3]},next:function(e){var t,n,o;if(e/=1e3,i&&i.children&&i.children.length){for(n=o=(t=i).children.length;n--;)TweenMax.to(t.children[n],.4*e,{opacity:0,delay:e*(.3*n/o)});TweenMax.delayedCall(.75*e,function(e){a.removeChild(e)},[t],this)}var r=function(){var e,t,n,o,r=window.innerWidth,a=window.innerHeight,i=[],l=h%(e=h/f<r/a?250*h/r:250*f/a)/2,c=f%e/2;for(n=Math.floor(h/e)+1;-1<=n;n--)for(o=Math.floor(f/e)+1;-1<=o;o--)i.push([l+e*(n+.75*(Math.random()-.5)),c+e*(o+.75*(Math.random()-.5))]);var u,s=calcDelaunayTriangulation(i),d=document.createElementNS("http://www.w3.org/2000/svg","g");for(t=s.length;t;)(u=document.createElementNS("http://www.w3.org/2000/svg","polygon")).setAttribute("points",i[s[--t]][0]+","+i[s[t]][1]+" "+i[s[--t]][0]+","+i[s[t]][1]+" "+i[s[--t]][0]+","+i[s[t]][1]),d.appendChild(u);return d}();for(n=o=r.children.length;n--;)TweenMax.fromTo(r.children[n],.4*e,{opacity:0},{opacity:.3+.25*Math.random(),delay:e*(.3*n/o+.3),ease:Back.easeOut});a.appendChild(r),i=r}}}(),gradients=function(){var o,r,a,i=["#3c6df0","#12a3b4","#00a78f","#00aa5e","#81b532","#e3bc13","#ffb000","#fe8500","#fe6100","#e62325","#dc267f","#c22dd5","#9753e1","#5a3ec8"];return{setup:function(){a=!1,o={stopA:document.getElementById("stop1a"),stopB:document.getElementById("stop1b"),rect:document.getElementById("rect1")},r={stopA:document.getElementById("stop2a"),stopB:document.getElementById("stop2b"),rect:document.getElementById("rect2")},o.rect.style.opacity=0,r.rect.style.opacity=0},next:function(e){var t,n;e/=1e3,t=a?(n=o,r):(n=r,o),a=!a,TweenMax.to(n.rect,.55*e,{opacity:0,delay:.2*e,ease:Sine.easeOut}),function(e){var t=Math.floor(i.length*Math.random()),n=Math.floor(3*Math.random())+3;n=(t+n*(Math.random()<.5?-1:1)+i.length)%i.length,e.stopA.setAttribute("stop-color",i[t]),e.stopB.setAttribute("stop-color",i[n])}(t),TweenMax.to(t.rect,.65*e,{opacity:1,ease:Sine.easeIn})}}}();bkgFunction(); | + | <script> |
− | </script> | + | ////////////////////////////// |
| + | // Demo Functions |
| + | ////////////////////////////// |
| + | function bkgFunction(showStats) { |
| + | // stats |
| + | if (showStats) { |
| + | var stats = new Stats(); |
| + | stats.domElement.style.position = 'absolute'; |
| + | stats.domElement.style.left = '0'; |
| + | stats.domElement.style.top = '0'; |
| + | document.body.appendChild(stats.domElement); |
| + | requestAnimationFrame(function updateStats(){ |
| + | stats.update(); |
| + | requestAnimationFrame(updateStats); |
| + | }); |
| + | } |
| + | // init |
| + | var svg = document.getElementById('demo'); |
| + | tesselation.setup(svg); |
| + | gradients.setup(); |
| + | var lastTransitionAt, transitionDelay = 10000, transitionDuration = 3000; |
| + | function playNextTransition() { |
| + | tesselation.next(transitionDuration); |
| + | gradients.next(transitionDuration); |
| + | }; |
| + | function tick(time) { |
| + | if (!lastTransitionAt || time - lastTransitionAt > transitionDelay) { |
| + | lastTransitionAt = time; |
| + | playNextTransition(); |
| + | } |
| + | window.requestAnimationFrame(tick); |
| + | } |
| + | window.requestAnimationFrame(tick); |
| + | } |
| + | ////////////////////////////// |
| + | // Delaunay Triangulation |
| + | ////////////////////////////// |
| + | var calcDelaunayTriangulation = (function() { |
| + | var EPSILON = 1.0 / 1048576.0; |
| + | function getSuperT(vertices) { |
| + | var xMin = Number.POSITIVE_INFINITY, yMin = Number.POSITIVE_INFINITY, |
| + | xMax = Number.NEGATIVE_INFINITY, yMax = Number.NEGATIVE_INFINITY, |
| + | i, xDiff, yDiff, maxDiff, xCenter, yCenter; |
| + | for(i = vertices.length; i--; ) { |
| + | if(vertices[i][0] < xMin) xMin = vertices[i][0]; |
| + | if(vertices[i][0] > xMax) xMax = vertices[i][0]; |
| + | if(vertices[i][1] < yMin) yMin = vertices[i][1]; |
| + | if(vertices[i][1] > yMax) yMax = vertices[i][1]; |
| + | } |
| + | xDiff = xMax - xMin; |
| + | yDiff = yMax - yMin; |
| + | maxDiff = Math.max(xDiff, yDiff); |
| + | xCenter = xMin + xDiff * 0.5; |
| + | yCenter = yMin + yDiff * 0.5; |
| + | return [ |
| + | [xCenter - 20 * maxDiff, yCenter - maxDiff], |
| + | [xCenter, yCenter + 20 * maxDiff], |
| + | [xCenter + 20 * maxDiff, yCenter - maxDiff] |
| + | ]; |
| + | } |
| + | function circumcircle(vertices, i, j, k) { |
| + | var xI = vertices[i][0], yI = vertices[i][1], |
| + | xJ = vertices[j][0], yJ = vertices[j][1], |
| + | xK = vertices[k][0], yK = vertices[k][1], |
| + | yDiffIJ = Math.abs(yI - yJ), yDiffJK = Math.abs(yJ - yK), |
| + | xCenter, yCenter, m1, m2, xMidIJ, xMidJK, yMidIJ, yMidJK, xDiff, yDiff; |
| + | // bail condition |
| + | if(yDiffIJ < EPSILON){ |
| + | if (yDiffJK < EPSILON){ |
| + | throw new Error("Can't get circumcircle since all 3 points are y-aligned"); |
| + | } |
| + | } |
| + | |
| + | |
| + | // calc circumcircle center x/y, radius |
| + | m1 = -((xJ - xI) / (yJ - yI)); |
| + | m2 = -((xK - xJ) / (yK - yJ)); |
| + | xMidIJ = (xI + xJ) / 2.0; |
| + | xMidJK = (xJ + xK) / 2.0; |
| + | yMidIJ = (yI + yJ) / 2.0; |
| + | yMidJK = (yJ + yK) / 2.0; |
| + | xCenter = (yDiffIJ < EPSILON) ? xMidIJ : |
| + | (yDiffJK < EPSILON) ? xMidJK : |
| + | (m1 * xMidIJ - m2 * xMidJK + yMidJK - yMidIJ) / (m1 - m2); |
| + | yCenter = (yDiffIJ > yDiffJK) ? |
| + | m1 * (xCenter - xMidIJ) + yMidIJ : |
| + | m2 * (xCenter - xMidJK) + yMidJK; |
| + | xDiff = xJ - xCenter; |
| + | yDiff = yJ - yCenter; |
| + | // return |
| + | return {i: i, j: j, k: k, x: xCenter, y: yCenter, r: xDiff * xDiff + yDiff * yDiff}; |
| + | } |
| + | function dedupeEdges(edges) { |
| + | var i, j, a, b, m, n; |
| + | for(j = edges.length; j; ) { |
| + | b = edges[--j]; a = edges[--j]; |
| + | for(i = j; i; ) { |
| + | n = edges[--i]; m = edges[--i]; |
| + | if(a === m){ |
| + | if (b===n){ |
| + | edges.splice(j, 2); edges.splice(i, 2); |
| + | break; |
| + | } |
| + | } |
| + | if(a === n){ |
| + | if (b===m){ |
| + | edges.splice(j, 2); edges.splice(i, 2); |
| + | break; |
| + | } |
| + | } |
| + | } |
| + | } |
| + | } |
| + | return function(vertices) { |
| + | var n = vertices.length, |
| + | i, j, indices, st, candidates, locked, edges, dx, dy, a, b, c; |
| + | // bail if too few / too many verts |
| + | if(n < 3 || n > 2000) |
| + | return []; |
| + | // copy verts and sort indices by x-position |
| + | vertices = vertices.slice(0); |
| + | indices = new Array(n); |
| + | for(i = n; i--; ) |
| + | indices[i] = i; |
| + | indices.sort(function(i, j) { |
| + | return vertices[j][0] - vertices[i][0]; |
| + | }); |
| + | // supertriangle |
| + | st = getSuperT(vertices); |
| + | vertices.push(st[0], st[1], st[2]); |
| + | // init candidates/locked tris list |
| + | candidates = [circumcircle(vertices, n + 0, n + 1, n + 2)]; |
| + | locked = []; |
| + | edges = []; |
| + | // scan left to right |
| + | for(i = indices.length; i--; edges.length = 0) { |
| + | c = indices[i]; |
| + | // check candidates tris against point |
| + | for(j = candidates.length; j--; ) { |
| + | // lock tri if point to right of circumcirc |
| + | dx = vertices[c][0] - candidates[j].x; |
| + | if (dx > 0.0){ |
| + | if(dx * dx > candidates[j].r){ |
| + | locked.push(candidates[j]); |
| + | candidates.splice(j, 1); |
| + | continue; |
| + | } |
| + | } |
| + | |
| + | |
| + | // point outside circumcirc = leave candidates |
| + | dy = vertices[c][1] - candidates[j].y; |
| + | if(dx * dx + dy * dy - candidates[j].r > EPSILON) |
| + | continue; |
| + | // point inside circumcirc = break apart, save edges |
| + | edges.push( |
| + | candidates[j].i, candidates[j].j, |
| + | candidates[j].j, candidates[j].k, |
| + | candidates[j].k, candidates[j].i |
| + | ); |
| + | candidates.splice(j, 1); |
| + | } |
| + | // new candidates from broken edges |
| + | dedupeEdges(edges); |
| + | for(j = edges.length; j; ) { |
| + | b = edges[--j]; |
| + | a = edges[--j]; |
| + | candidates.push(circumcircle(vertices, a, b, c)); |
| + | } |
| + | } |
| + | // close candidates tris, remove tris touching supertri verts |
| + | for(i = candidates.length; i--; ) |
| + | locked.push(candidates[i]); |
| + | candidates.length = 0; |
| + | for(i = locked.length; i--; ) |
| + | if(locked[i].i < n){ |
| + | if(locked[i].j < n){ |
| + | if(locked[i].k < n){ |
| + | candidates.push(locked[i].i, locked[i].j, locked[i].k); |
| + | } |
| + | } |
| + | } |
| + | |
| + | |
| + | // done |
| + | return candidates; |
| + | }; |
| + | })(); |
| + | var tesselation = (function() { |
| + | var svg, svgW, svgH, prevGroup; |
| + | function createRandomTesselation() { |
| + | var wW = window.innerWidth; |
| + | var wH = window.innerHeight; |
| + | var gridSpacing = 250, scatterAmount = 0.75; |
| + | var gridSize, i, x, y; |
| + | if (wW / wH > svgW / svgH) { // window wider than svg = use width for gridSize |
| + | gridSize = gridSpacing * svgW / wW; |
| + | } else { // window taller than svg = use height for gridSize |
| + | gridSize = gridSpacing * svgH / wH; |
| + | } |
| + | var vertices = []; |
| + | var xOffset = (svgW % gridSize) / 2, yOffset = (svgH % gridSize) / 2; |
| + | for (x = Math.floor(svgW/gridSize) + 1; x >= -1; x--) { |
| + | for (y = Math.floor(svgH/gridSize) + 1; y >= -1; y--) { |
| + | vertices.push( |
| + | [ |
| + | xOffset + gridSize * (x + scatterAmount * (Math.random() - 0.5)), |
| + | yOffset + gridSize * (y + scatterAmount * (Math.random() - 0.5)) |
| + | ] |
| + | ); |
| + | } |
| + | } |
| + | var triangles = calcDelaunayTriangulation(vertices); |
| + | var group = document.createElementNS('http://www.w3.org/2000/svg','g'); |
| + | var polygon; |
| + | for(i = triangles.length; i; ) { |
| + | polygon = document.createElementNS('http://www.w3.org/2000/svg','polygon'); |
| + | polygon.setAttribute('points', |
| + | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' + |
| + | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] + ' ' + |
| + | vertices[triangles[--i]][0] + ',' + vertices[triangles[i]][1] |
| + | ); |
| + | group.appendChild(polygon); |
| + | } |
| + | return group; |
| + | } |
| + | return { |
| + | setup: function(svgElement) { |
| + | svg = svgElement; |
| + | var vb = svg.getAttribute('viewBox').split(/\D/g); |
| + | svgW = vb[2]; |
| + | svgH = vb[3]; |
| + | }, |
| + | next: function(t) { |
| + | var toRemove, i, n; |
| + | t /= 1000; |
| + | if(prevGroup){ |
| + | if(prevGroup.children){ |
| + | if(prevGroup.children.length){ |
| + | toRemove = prevGroup; |
| + | n = toRemove.children.length; |
| + | for (i = n; i--; ) { |
| + | TweenMax.to(toRemove.children[i], t*0.4, {opacity: 0, delay: t*(0.3*i/n)}); |
| + | } |
| + | TweenMax.delayedCall(t * (0.7 + 0.05), function(group) { svg.removeChild(group); }, [toRemove], this); |
| + | } |
| + | } |
| + | } |
| + | |
| + | var g = createRandomTesselation(); |
| + | n = g.children.length; |
| + | for (i = n; i--; ) { |
| + | TweenMax.fromTo(g.children[i], t*0.4, {opacity: 0}, {opacity: 0.3 + 0.25 * Math.random(), delay: t*(0.3*i/n + 0.3), ease: Back.easeOut}); |
| + | } |
| + | svg.appendChild(g); |
| + | prevGroup = g; |
| + | } |
| + | } |
| + | })(); |
| + | ////////////////////////////// |
| + | // Gradients |
| + | ////////////////////////////// |
| + | var gradients = (function() { |
| + | var grad1, grad2, showingGrad1; |
| + | // using colors from IBM Design Colors this time |
| + | var colors = [ // 14 colors - use 3-5 span |
| + | '#3c6df0', // ultramarine50 |
| + | '#12a3b4', // aqua40 |
| + | '#00a78f', // teal40 |
| + | '#00aa5e', // green40 |
| + | '#81b532', // lime30 |
| + | '#e3bc13', // yellow20 |
| + | '#ffb000', // gold20 |
| + | '#fe8500', // orange30 |
| + | '#fe6100', // peach40 |
| + | '#e62325', // red50 |
| + | '#dc267f', // magenta50 |
| + | '#c22dd5', // purple50 |
| + | '#9753e1', // violet50 |
| + | '#5a3ec8' // indigo60 |
| + | ]; |
| + | function assignRandomColors(gradObj) { |
| + | var rA = Math.floor(colors.length * Math.random()); |
| + | var rB = Math.floor(Math.random() * 3) + 3; // [3 - 5] |
| + | rB = (rA + (rB * (Math.random() < 0.5 ? -1 : 1)) + colors.length) % colors.length; |
| + | gradObj.stopA.setAttribute('stop-color', colors[rA]); |
| + | gradObj.stopB.setAttribute('stop-color', colors[rB]); |
| + | } |
| + | return { |
| + | setup: function() { |
| + | showingGrad1 = false; |
| + | grad1 = { |
| + | stopA: document.getElementById('stop1a'), |
| + | stopB: document.getElementById('stop1b'), |
| + | rect: document.getElementById('rect1') |
| + | }; |
| + | grad2 = { |
| + | stopA: document.getElementById('stop2a'), |
| + | stopB: document.getElementById('stop2b'), |
| + | rect: document.getElementById('rect2') |
| + | }; |
| + | grad1.rect.style.opacity = 0; |
| + | grad2.rect.style.opacity = 0; |
| + | }, |
| + | next: function(t) { |
| + | t /= 1000; |
| + | var show, hide; |
| + | if (showingGrad1) { |
| + | hide = grad1; |
| + | show = grad2; |
| + | } else { |
| + | hide = grad2; |
| + | show = grad1; |
| + | } |
| + | showingGrad1 = !showingGrad1; |
| + | TweenMax.to(hide.rect, 0.55*t, {opacity: 0, delay: 0.2*t, ease: Sine.easeOut}); |
| + | assignRandomColors(show); |
| + | TweenMax.to(show.rect, 0.65*t, {opacity: 1, ease: Sine.easeIn}); |
| + | } |
| + | }; |
| + | })(); |
| + | ////////////////////////////// |
| + | // Start |
| + | ////////////////////////////// |
| + | bkgFunction(); |
| + | </script> |
| <div style="position:absolute;top:100px;left:9%"><center><img style="height:120px;width:auto" alt="cover gif 1st added" src="https://static.igem.org/mediawiki/2019/8/81/T--Fudan-TSI--coverBasicParts.gif" /></center></div> | | <div style="position:absolute;top:100px;left:9%"><center><img style="height:120px;width:auto" alt="cover gif 1st added" src="https://static.igem.org/mediawiki/2019/8/81/T--Fudan-TSI--coverBasicParts.gif" /></center></div> |
| </div> | | </div> |