|
|
| (23 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | {{HFLS_H2Z_Hangzhou}} | + | {{Template:HFLS_H2Z_Hangzhou}}<html> |
| − | <html> | + | <script> |
| − | <head> | + | $(function () { |
| − | <script>/* isocity generator by Nicolas Barradeau in pen at https://codepen.io/nicoptere/pen/awzbQW */
| + | menu.setItem("home"); |
| − | | + | }); |
| − | ;(function () {
| + | </script> |
| − | | + | |
| − | window.Isocity = function (cont) {
| + | |
| − | cont = $(cont); | + | |
| − | | + | |
| − | var w = cont.width();
| + | |
| − | var h = cont.height();
| + | |
| − | | + | |
| − | function getContext(w, h) {
| + | |
| − | var canvas = $(document.createElement("canvas")); | + | |
| − | | + | |
| − | cont.append(canvas);
| + | |
| − | canvas.css("height", "100%").css("width", "100%");
| + | |
| − | | + | |
| − | return canvas[0].getContext("2d");
| + | |
| − | } | + | |
| − | | + | |
| − | var ctx = getContext(w, h);
| + | |
| − | | + | |
| − | var seed = Math.random() * 100;
| + | |
| − | | + | |
| − | function reset() {
| + | |
| − | PRNG.setSeed(seed++);
| + | |
| − | | + | |
| − | w = window.innerWidth;
| + | |
| − | h = window.innerHeight;
| + | |
| − | ctx.canvas.width = w;
| + | |
| − | ctx.canvas.height = h;
| + | |
| − | var c = new Point();
| + | |
| − | c.radius = h / 1.5;
| + | |
| − | ctx.fillStyle = "#FFF";
| + | |
| − | ctx.fillRect(0, 0, w, h);
| + | |
| − | ctx.fillStyle = "#000";
| + | |
| − | ctx.globalAlpha = 0.25;
| + | |
| − | | + | |
| − | var quads = [];
| + | |
| − | var q = new Q(c.x - c.radius, c.y - c.radius, c.radius * 2, c.radius * 2);
| + | |
| − | var qs = q.split();
| + | |
| − | qs.forEach(function(q) {
| + | |
| − | var qs = q.split();
| + | |
| − | qs[1].glow = true;
| + | |
| − | qs.forEach(function(q) {
| + | |
| − | var glow = q.glow != null;
| + | |
| − | var qs = q.split();
| + | |
| − | qs.forEach(function(q) {
| + | |
| − | var qs = q.split();
| + | |
| − | qs.forEach(function(q) {
| + | |
| − | q.glow = Boolean(glow); // && PRNG.random()>.5;
| + | |
| − | quads.push(q);
| + | |
| − | });
| + | |
| − | });
| + | |
| − | });
| + | |
| − | });
| + | |
| − | | + | |
| − | var s = 1 + PRNG.random() * 2;
| + | |
| − | ctx.save();
| + | |
| − | ctx.translate(w / 2, h / 2);
| + | |
| − | ctx.scale(1 * s, 0.62 * s);
| + | |
| − | ctx.rotate(Math.PI / 4);
| + | |
| − | | + | |
| − | var stairs = [];
| + | |
| − | var landuse = [];
| + | |
| − | var buildings = [];
| + | |
| − | | + | |
| − | ctx.beginPath();
| + | |
| − | quads.forEach(function(q, i) {
| + | |
| − | var cq = new Point(q.x + q.w / 2, q.y + q.h / 2);
| + | |
| − | | + | |
| − | if (!circleContainsPoint(cq, c)) return;
| + | |
| − | | + | |
| − | if (PRNG.random() > (1 - distance(cq, c) / c.radius) * 2) return;
| + | |
| − | | + | |
| − | var offset = 4;
| + | |
| − | if (q.area < Math.pow(h / 30, 2)) {
| + | |
| − | q.split().forEach(function(q) {
| + | |
| − | ps = offsetPolygon(q.points.concat(), offset); //q.points;//
| + | |
| − | q.points = ps;
| + | |
| − | ctx.moveTo(ps[0].x, ps[0].y);
| + | |
| − | ctx.lineTo(ps[1].x, ps[1].y);
| + | |
| − | ctx.lineTo(ps[2].x, ps[2].y);
| + | |
| − | ctx.lineTo(ps[3].x, ps[3].y);
| + | |
| − | ctx.lineTo(ps[0].x, ps[0].y);
| + | |
| − | buildings.push(q);
| + | |
| − | });
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | | + | |
| − | if (q.area < Math.pow(h / 9, 2)) {
| + | |
| − | q.split().forEach(function(q) {
| + | |
| − | ps = offsetPolygon(q.points.concat(), offset);
| + | |
| − | q.points = ps;
| + | |
| − | ctx.moveTo(ps[0].x, ps[0].y);
| + | |
| − | ctx.lineTo(ps[1].x, ps[1].y);
| + | |
| − | ctx.lineTo(ps[2].x, ps[2].y);
| + | |
| − | ctx.lineTo(ps[3].x, ps[3].y);
| + | |
| − | ctx.lineTo(ps[0].x, ps[0].y);
| + | |
| − | landuse.push(q);
| + | |
| − | });
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | | + | |
| − | if (q.area < Math.pow(h / 8, 2)) {
| + | |
| − | q.split().forEach(function(q) {
| + | |
| − | var ps = offsetPolygon(q.points.concat(), offset);
| + | |
| − | q.points = ps;
| + | |
| − | stairs.push(q);
| + | |
| − | | + | |
| − | ctx.moveTo(ps[0].x, ps[0].y);
| + | |
| − | ctx.lineTo(ps[1].x, ps[1].y);
| + | |
| − | ctx.lineTo(ps[2].x, ps[2].y);
| + | |
| − | ctx.lineTo(ps[3].x, ps[3].y);
| + | |
| − | ctx.lineTo(ps[0].x, ps[0].y);
| + | |
| − | });
| + | |
| − | } else {
| + | |
| − | var ps = offsetPolygon(q.points.concat(), offset);
| + | |
| − | q.points = ps;
| + | |
| − | landuse.push(q);
| + | |
| − | | + | |
| − | ctx.moveTo(ps[0].x, ps[0].y);
| + | |
| − | ctx.lineTo(ps[1].x, ps[1].y);
| + | |
| − | ctx.lineTo(ps[2].x, ps[2].y);
| + | |
| − | ctx.lineTo(ps[3].x, ps[3].y);
| + | |
| − | ctx.lineTo(ps[0].x, ps[0].y);
| + | |
| − | }
| + | |
| − | });
| + | |
| − | ctx.closePath();
| + | |
| − | ctx.stroke();
| + | |
| − | | + | |
| − | ctx.save();
| + | |
| − | | + | |
| − | ctx.clip();
| + | |
| − | ctx.shadowBlur = 25;
| + | |
| − | ctx.shadowColor = "#FFF";
| + | |
| − | ctx.fillRect(-w, -h, w * 2, h * 2);
| + | |
| − | stairs.forEach(function(r, i) {
| + | |
| − | r.stairs(ctx, i);
| + | |
| − | });
| + | |
| − | ctx.restore();
| + | |
| − | | + | |
| − | landuse.forEach(function(q, id) {
| + | |
| − | var i;
| + | |
| − | var inc = 10;
| + | |
| − | var tot = 10;
| + | |
| − | if (id % 3 == 0) {
| + | |
| − | ctx.save();
| + | |
| − | q.draw(ctx);
| + | |
| − | ctx.clip();
| + | |
| − | ctx.fillStyle = "#000";
| + | |
| − | for (i = 0; i < tot; i++) {
| + | |
| − | ctx.translate(inc, inc);
| + | |
| − | ctx.globalAlpha = 1 - i / tot;
| + | |
| − | q.draw(ctx);
| + | |
| − | ctx.fill();
| + | |
| − | }
| + | |
| − | ctx.restore();
| + | |
| − | return;
| + | |
| − | }
| + | |
| − | | + | |
| − | ctx.globalAlpha = 1;
| + | |
| − | ctx.globalAlpha = 0.15;
| + | |
| − | ctx.fillStyle = "#fFF";
| + | |
| − | | + | |
| − | inc = 2 + Math.sqrt(Math.sqrt(q.area));
| + | |
| − | ctx.shadowBlur = 1;
| + | |
| − | ctx.shadowColor = "#CCC";
| + | |
| − | ctx.save();
| + | |
| − | | + | |
| − | ctx.globalAlpha = 1;
| + | |
| − | ctx.translate(-inc, -inc);
| + | |
| − | q.draw(ctx);
| + | |
| − | ctx.fill();
| + | |
| − | | + | |
| − | if (PRNG.random() < 0.1) {
| + | |
| − | var s = Math.min(20, Math.min(q.w, q.h) / 2);
| + | |
| − | var ps = offsetPolygon(q.points, s);
| + | |
| − | | + | |
| − | ctx.globalAlpha = 1;
| + | |
| − | drawPath(ctx, ps);
| + | |
| − | | + | |
| − | ctx.strokeStyle = "#FFF";
| + | |
| − | if (PRNG.random() < 0.5) {
| + | |
| − | ctx.fillStyle = ctx.shadowColor = "#F06";
| + | |
| − | } else {
| + | |
| − | ctx.fillStyle = ctx.shadowColor = "#0FC";
| + | |
| − | }
| + | |
| − | if (q.area > Math.pow(h / 20, 2)) {
| + | |
| − | ctx.fillStyle = ctx.shadowColor = "#FC0";
| + | |
| − | }
| + | |
| − | | + | |
| − | ctx.shadowBlur = 10;
| + | |
| − | ctx.globalAlpha = 0.75;
| + | |
| − | ctx.lineWidth = 2;
| + | |
| − | ctx.fill();
| + | |
| − | }
| + | |
| − | | + | |
| − | ctx.restore();
| + | |
| − | });
| + | |
| − | | + | |
| − | buildings.forEach(function(q) {
| + | |
| − | ctx.globalAlpha = 1;
| + | |
| − | ctx.globalAlpha = 0.15;
| + | |
| − | ctx.fillStyle = "#FFF";
| + | |
| − | ctx.shadowBlur = 1;
| + | |
| − | ctx.shadowColor = "#AAA";
| + | |
| − | var inc = 1;
| + | |
| − | var tot = 20 + PRNG.random() * 30 * 10;
| + | |
| − | ctx.save();
| + | |
| − | for (var i = 0; i < tot; i += inc) {
| + | |
| − | ctx.translate(-inc, -inc);
| + | |
| − | ctx.globalAlpha = Math.pow(i / tot * 0.75, 2);
| + | |
| − | // ctx.shadowColor = i%10 == 0 ? "#000" : "#DDD";
| + | |
| − | q.draw(ctx);
| + | |
| − | ctx.stroke();
| + | |
| − | }
| + | |
| − | ctx.restore();
| + | |
| − | ctx.globalAlpha = 0.15;
| + | |
| − | ctx.stroke();
| + | |
| − | });
| + | |
| − | | + | |
| − | var imgData = ctx.getImageData(0, 0, w, h);
| + | |
| − | imgData.data = noise(32, imgData.data, w, h);
| + | |
| − | ctx.putImageData(imgData, 0, 0);
| + | |
| − | | + | |
| − | landuse.forEach(function(q, id) {
| + | |
| − | if (!Boolean(q.glow)) return;
| + | |
| − | if (id % 3 == 0) {
| + | |
| − | ctx.save();
| + | |
| − | q.draw(ctx);
| + | |
| − | ctx.clip();
| + | |
| − | | + | |
| − | for (var i = 0; i < 10; i += 1) {
| + | |
| − | ctx.translate(10, 10);
| + | |
| − | ctx.lineWidth = 3;
| + | |
| − | ctx.shadowBlur = 10;
| + | |
| − | ctx.globalCompositeOperation = "lighten";
| + | |
| − | ctx.shadowColor = ctx.strokeStyle = ctx.fillStyle = "#0AF";
| + | |
| − | ctx.globalAlpha = 0.8 - i / 10;
| + | |
| − | q.draw(ctx);
| + | |
| − | ctx.stroke();
| + | |
| − | }
| + | |
| − | ctx.restore();
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | ctx.restore();
| + | |
| − | ctx.globalAlpha = 1;
| + | |
| − | }
| + | |
| − | | + | |
| − | function drawPath(ctx, pts) {
| + | |
| − | ctx.beginPath();
| + | |
| − | pts.forEach(function(p) {
| + | |
| − | ctx.lineTo(p.x, p.y);
| + | |
| − | });
| + | |
| − | ctx.closePath();
| + | |
| − | }
| + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | var Q = function(x, y, w, h) {
| + | |
| − | this.x = x;
| + | |
| − | this.y = y;
| + | |
| − | this.w = w;
| + | |
| − | this.h = h;
| + | |
| − | this.points = [
| + | |
| − | new Point(this.x, this.y),
| + | |
| − | new Point(this.x + this.w, this.y),
| + | |
| − | new Point(this.x + this.w, this.y + this.h),
| + | |
| − | new Point(this.x, this.y + this.h)
| + | |
| − | ];
| + | |
| − | this.area = this.w * this.h;
| + | |
| − | };
| + | |
| − | | + | |
| − | Q.prototype = {
| + | |
| − | draw: function(ctx) {
| + | |
| − | ctx.beginPath();
| + | |
| − | ctx.moveTo(this.x, this.y);
| + | |
| − | ctx.lineTo(this.x + this.w, this.y);
| + | |
| − | ctx.lineTo(this.x + this.w, this.y + this.h);
| + | |
| − | ctx.lineTo(this.x, this.y + this.h);
| + | |
| − | ctx.closePath();
| + | |
| − | },
| + | |
| − | split: function() {
| + | |
| − | if (this.w * this.h < 100) return [];
| + | |
| − | var ratio = Math.max(this.w, this.h) / Math.min(this.w, this.h);
| + | |
| − | if (ratio < 0.25 || ratio > 5) return [];
| + | |
| − | | + | |
| − | var x = this.x;
| + | |
| − | var y = this.y;
| + | |
| − | | + | |
| − | var t0 = 0.5 + (PRNG.random() - 0.5) * 0.5;
| + | |
| − | var t1 = 0.5 + (PRNG.random() - 0.5) * 0.5;
| + | |
| − | | + | |
| − | var w = this.w * t0;
| + | |
| − | var h = this.h * t1;
| + | |
| − | var w2 = this.w * (1 - t0);
| + | |
| − | var h2 = this.h * (1 - t1);
| + | |
| − | | + | |
| − | return [
| + | |
| − | new Q(x, y, w, h),
| + | |
| − | new Q(x + w, y, w2, h),
| + | |
| − | new Q(x, y + h, w, h2),
| + | |
| − | new Q(x + w, y + h, w2, h2)
| + | |
| − | ];
| + | |
| − | },
| + | |
| − | stairs: function(ctx) {
| + | |
| − | ctx.fillStyle = "#000";
| + | |
| − | | + | |
| − | var p0, p1, p2;
| + | |
| − | var id = PRNG.random() > 0.5 ? 0 : 1;
| + | |
| − | p0 = this.points[0];
| + | |
| − | p1 = this.points[1];
| + | |
| − | p2 = this.points[3];
| + | |
| − | | + | |
| − | var a = 0;
| + | |
| − | var w = this.w;
| + | |
| − | var step = 10 / this.h;
| + | |
| − | var x0 = p0.x, y0 = p0.y, y1;
| + | |
| − | | + | |
| − | for (var i = 0; i < 1; i += step) {
| + | |
| − | x0 += 3;
| + | |
| − | if (id == 0) {
| + | |
| − | y0 = lerp(i, p0.y, p2.y);
| + | |
| − | y1 = lerp(i + step, p0.y, p2.y);
| + | |
| − | } else {
| + | |
| − | y0 = lerp(1 - i, p0.y, p2.y);
| + | |
| − | y1 = lerp(1 - i + step, p0.y, p2.y);
| + | |
| − | }
| + | |
| − | a += 0.15;
| + | |
| − | ctx.globalAlpha = a;
| + | |
| − | | + | |
| − | ctx.beginPath();
| + | |
| − | ctx.moveTo(x0, y0);
| + | |
| − | ctx.lineTo(p1.x, y0);
| + | |
| − | ctx.lineTo(p1.x, y1);
| + | |
| − | ctx.lineTo(x0, y1);
| + | |
| − | ctx.stroke();
| + | |
| − | ctx.fill();
| + | |
| − | | + | |
| − | ctx.translate(0, step * 0.5);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | var Point = function(x, y) {
| + | |
| − | this.x = x || 0;
| + | |
| − | this.y = y || 0;
| + | |
| − | return this;
| + | |
| − | };
| + | |
| − | Point.prototype = {
| + | |
| − | add: function(p) {
| + | |
| − | this.x += p.x;
| + | |
| − | this.y += p.y;
| + | |
| − | return this;
| + | |
| − | },
| + | |
| − | sub: function(p) {
| + | |
| − | this.x -= p.x;
| + | |
| − | this.y -= p.y;
| + | |
| − | return this;
| + | |
| − | },
| + | |
| − | clone: function() {
| + | |
| − | return new Point(this.x, this.y);
| + | |
| − | },
| + | |
| − | copy: function(p) {
| + | |
| − | this.x = p.x;
| + | |
| − | this.y = p.y;
| + | |
| − | return this;
| + | |
| − | },
| + | |
| − | set: function(x, y) {
| + | |
| − | this.x = x;
| + | |
| − | this.y = y;
| + | |
| − | return this;
| + | |
| − | },
| + | |
| − | length: function() {
| + | |
| − | return Math.sqrt(this.x * this.x + this.y * this.y);
| + | |
| − | },
| + | |
| − | normalize: function(value) {
| + | |
| − | var l = this.length();
| + | |
| − | this.x /= l;
| + | |
| − | this.y /= l;
| + | |
| − | if (value != null) this.multiplyScalar(value);
| + | |
| − | return this;
| + | |
| − | },
| + | |
| − | multiplyScalar: function(value) {
| + | |
| − | this.x *= value;
| + | |
| − | this.y *= value;
| + | |
| − | return this;
| + | |
| − | },
| + | |
| − | direction: function(other) {
| + | |
| − | return other.clone().sub(this).normalize();
| + | |
| − | },
| + | |
| − | negate: function() {
| + | |
| − | this.x *= -1;
| + | |
| − | this.y *= -1;
| + | |
| − | return this;
| + | |
| − | },
| + | |
| − | dot: function(p) {
| + | |
| − | return this.x * p.x + this.y * p.y;
| + | |
| − | },
| + | |
| − | equals: function(other) {
| + | |
| − | return this.x == other.x && this.y == other.y;
| + | |
| − | },
| + | |
| − | midpoint: function(other) {
| + | |
| − | return new Point((this.x + other.x) / 2, (this.y + other.y) / 2);
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | function noise(amount, data, w, h) {
| + | |
| − | for (var y = 0; y < h; y++) {
| + | |
| − | for (var x = 0; x < w; x++) {
| + | |
| − | var id = (y * w + x) * 4;
| + | |
| − | var noise = ~~((PRNG.random() - 0.5) * amount);
| + | |
| − | data[id] += noise;
| + | |
| − | data[id + 1] += noise;
| + | |
| − | data[id + 2] += noise;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | return data;
| + | |
| − | }
| + | |
| − | function squareDistance(x0, y0, x1, y1) {
| + | |
| − | return (x0 - x1) * (x0 - x1) + (y0 - y1) * (y0 - y1);
| + | |
| − | }
| + | |
| − | function distance(p0, p1) {
| + | |
| − | return Math.sqrt(squareDistance(p0.x, p0.y, p1.x, p1.y));
| + | |
| − | }
| + | |
| − | function circleContainsPoint(p, circle) {
| + | |
| − | return distance(circle, p) < circle.radius;
| + | |
| − | }
| + | |
| − | function offsetPolygon(points, offset) {
| + | |
| − | var tmp = [];
| + | |
| − | var count = points.length;
| + | |
| − | for (var j = 0; j < count; j++) {
| + | |
| − | // finds the previous, current and next point
| + | |
| − | var i = j - 1;
| + | |
| − | if (i < 0) i += count;
| + | |
| − | var k = (j + 1) % count;
| + | |
| − | | + | |
| − | var pre = points[i];
| + | |
| − | var cur = points[j];
| + | |
| − | var nex = points[k];
| + | |
| − | | + | |
| − | //create 2 lines, parallel to both edges at a given distance 'offset'
| + | |
| − | | + | |
| − | //computes a normal vector to the direction of the: prev -> current edge of length offset
| + | |
| − | var l1 = distance(cur, pre);
| + | |
| − | var n1 = new Point(
| + | |
| − | -((cur.y - pre.y) / l1) * offset,
| + | |
| − | (cur.x - pre.x) / l1 * offset
| + | |
| − | );
| + | |
| − | | + | |
| − | //does the same for the : current -> next edge
| + | |
| − | var l2 = distance(cur, nex);
| + | |
| − | var n2 = new Point(
| + | |
| − | -((nex.y - cur.y) / l2) * offset,
| + | |
| − | (nex.x - cur.x) / l2 * offset
| + | |
| − | );
| + | |
| − | | + | |
| − | //and create 2 points at both ends of the edge to obtain a parallel line
| + | |
| − | var p1 = new Point(pre.x + n1.x, pre.y + n1.y);
| + | |
| − | var p2 = new Point(cur.x + n1.x, cur.y + n1.y);
| + | |
| − | var p3 = new Point(cur.x + n2.x, cur.y + n2.y);
| + | |
| − | var p4 = new Point(nex.x + n2.x, nex.y + n2.y);
| + | |
| − | | + | |
| − | var ip = lineIntersectLine(p1, p2, p3, p4);
| + | |
| − | if (ip != null) {
| + | |
| − | tmp.push(ip);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | return tmp;
| + | |
| − | }
| + | |
| − | function lineIntersectLine(A, B, E, F, ABasSeg, EFasSeg) {
| + | |
| − | var a1, a2, b1, b2, c1, c2;
| + | |
| − | | + | |
| − | a1 = B.y - A.y;
| + | |
| − | b1 = A.x - B.x;
| + | |
| − | a2 = F.y - E.y;
| + | |
| − | b2 = E.x - F.x;
| + | |
| − | | + | |
| − | var denom = a1 * b2 - a2 * b1;
| + | |
| − | if (denom == 0) {
| + | |
| − | return null;
| + | |
| − | }
| + | |
| − | | + | |
| − | c1 = B.x * A.y - A.x * B.y;
| + | |
| − | c2 = F.x * E.y - E.x * F.y;
| + | |
| − | | + | |
| − | ip = new Point();
| + | |
| − | ip.x = (b1 * c2 - b2 * c1) / denom;
| + | |
| − | ip.y = (a2 * c1 - a1 * c2) / denom;
| + | |
| − | | + | |
| − | if (A.x == B.x) ip.x = A.x;
| + | |
| − | else if (E.x == F.x) ip.x = E.x;
| + | |
| − | if (A.y == B.y) ip.y = A.y;
| + | |
| − | else if (E.y == F.y) ip.y = E.y;
| + | |
| − | | + | |
| − | if (ABasSeg) {
| + | |
| − | if (A.x < B.x ? ip.x < A.x || ip.x > B.x : ip.x > A.x || ip.x < B.x)
| + | |
| − | return null;
| + | |
| − | if (A.y < B.y ? ip.y < A.y || ip.y > B.y : ip.y > A.y || ip.y < B.y)
| + | |
| − | return null;
| + | |
| − | }
| + | |
| − | if (EFasSeg) {
| + | |
| − | if (E.x < F.x ? ip.x < E.x || ip.x > F.x : ip.x > E.x || ip.x < F.x)
| + | |
| − | return null;
| + | |
| − | if (E.y < F.y ? ip.y < E.y || ip.y > F.y : ip.y > E.y || ip.y < F.y)
| + | |
| − | return null;
| + | |
| − | }
| + | |
| − | return ip;
| + | |
| − | }
| + | |
| − | | + | |
| − | function lerp(t, a, b) {
| + | |
| − | return a * (1 - t) + b * t;
| + | |
| − | }
| + | |
| − | | + | |
| − | var PRNG = {
| + | |
| − | a: 16807 /* multiplier */,
| + | |
| − | m: 0x7fffffff /* 2**31 - 1 */,
| + | |
| − | randomnum: 1,
| + | |
| − | div: 1 / 0x7fffffff,
| + | |
| − | nextlongrand: function(seed) {
| + | |
| − | var lo, hi;
| + | |
| − | lo = this.a * (seed & 0xffff);
| + | |
| − | hi = this.a * (seed >> 16);
| + | |
| − | lo += (hi & 0x7fff) << 16;
| + | |
| − | if (lo > this.m) {
| + | |
| − | lo &= this.m;
| + | |
| − | ++lo;
| + | |
| − | }
| + | |
| − | lo += hi >> 15;
| + | |
| − | if (lo > this.m) {
| + | |
| − | lo &= this.m;
| + | |
| − | ++lo;
| + | |
| − | }
| + | |
| − | return lo;
| + | |
| − | },
| + | |
| − | random: function() /* return next random number */ {
| + | |
| − | this.randomnum = this.nextlongrand(this.randomnum);
| + | |
| − | return this.randomnum * this.div;
| + | |
| − | },
| + | |
| − | setSeed: function(value) {
| + | |
| − | this.randomnum = value <= 0 ? 1 : value;
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | //////////////////////////////////////////////////////////////
| + | |
| − | | + | |
| − | return {
| + | |
| − | gen: function () {
| + | |
| − | reset();
| + | |
| − | }
| + | |
| − | };
| + | |
| − | }; | + | |
| − | })();
| + | |
| − | </script> | + | |
| − | </head>
| + | |
| | | | |
| | <style> | | <style> |
| Line 600: |
Line 43: |
| | font-size: 9rem; | | font-size: 9rem; |
| | text-align: center; | | text-align: center; |
| | + | color: white; |
| | } | | } |
| | | | |
| − | .page-home .blue { | + | .page-home .red { |
| − | color: #3498DB; | + | color: #E55844; |
| | } | | } |
| | | | |
| Line 611: |
Line 55: |
| | text-align: left; | | text-align: left; |
| | | | |
| − | max-width: 50rem; | + | width: 50rem; |
| − | line-height: 1.2; | + | max-width: 100%; |
| | + | |
| | + | line-height: 1.5; |
| | | | |
| | color: rgba(80, 80, 80, 1); | | color: rgba(80, 80, 80, 1); |
| | | | |
| | font-size: 1.5rem; | | font-size: 1.5rem; |
| − | font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif; | + | font-family: Brandon; |
| | } | | } |
| | | | |
| − | .page-home .isocity { | + | .page-home .article img { |
| − | position: absolute; | + | border-radius: 3px; |
| − | top: 0; left: 0; | + | margin: 2rem 0; |
| − | opacity: 0.3; | + | box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); |
| | width: 100%; | | width: 100%; |
| − | height: 100%; | + | } |
| | + | |
| | + | .page-home .article .imgbox { |
| | + | text-align: center; |
| | } | | } |
| | </style> | | </style> |
| | | | |
| | <div class="page-home"> | | <div class="page-home"> |
| − | <div class="main-block fullscr no-pad block main-title"> | + | <div class="main-block fullscr no-pad block main-title" style="background-image: url('https://static.igem.org/mediawiki/2017/a/a9/T--HFLS_H2Z_Hangzhou--img_cover3.jpg');"> |
| − | <div class="isocity"></div>
| + | |
| | <div class="main-effect"></div> | | <div class="main-effect"></div> |
| − | <div class="vcenter"> | + | <div class="vcenter" style="line-height: 0.7;"> |
| − | <span>A<span class="blue">q</span>uamade</span> | + | <span style="font-size: 45%; line-height: 1.3; padding-left: 0.3em;"> |
| | + | <span>Hangzhou</span> |
| | + | <span>HFLS<span class="red">&</span>H2Z</span> |
| | + | </span><br> |
| | + | <span>AQUAMADE</span> |
| | </div> | | </div> |
| | </div> | | </div> |
| | + | |
| | + | <style> |
| | + | </style> |
| | + | |
| | + | <div class="block white-bg"> |
| | + | <h1>Quick Link</h1> |
| | + | <div class="article" style="margin-top: 1em; padding-left: 1rem; text-align: center;"> |
| | + | <a class="quick-link" href='/Team:HFLS_H2Z_Hangzhou/sub/overview' style="background-image: url('/wiki/images/4/47/T--HFLS_H2Z_Hangzhou--img_qlink_project.png');"></a> |
| | + | <a class="quick-link" href='/Team:HFLS_H2Z_Hangzhou/sub/parts' style="background-image: url('/wiki/images/f/f8/T--HFLS_H2Z_Hangzhou--img_qlink_achiev.png');"></a> |
| | + | <a class="quick-link" href='/Team:HFLS_H2Z_Hangzhou/Model' style="background-image: url('/wiki/images/9/9b/T--HFLS_H2Z_Hangzhou--img_qlink_model.png');"></a> |
| | + | <a class="quick-link" href='/Team:HFLS_H2Z_Hangzhou/sub/member' style="background-image: url('/wiki/images/3/35/T--HFLS_H2Z_Hangzhou--img_qlink_team.png');"></a> |
| | + | <a class="quick-link" href='/Team:HFLS_H2Z_Hangzhou/HP/Silver' style="background-image: url('/wiki/images/5/5b/T--HFLS_H2Z_Hangzhou--img_qlink_hp.png');"></a> |
| | + | <a class="quick-link" href='/Team:HFLS_H2Z_Hangzhou/InterLab' style="background-image: url('/wiki/images/e/e6/T--HFLS_H2Z_Hangzhou--img_qlink_interlab.png');"></a> |
| | + | </div> |
| | + | </div> |
| | + | |
| | + | <div class="line-sep"></div> |
| | + | |
| | <div class="block"> | | <div class="block"> |
| − | <div class="title">What do we do</div> | + | <div class="title">Abstract</div> |
| | <div class="article"> | | <div class="article"> |
| − | Physijs brings a very easy to use interface to the three.js framework. One of the reasons three.js is so popular is because it is so incredibly easy for graphics newbies to get into 3D programming. Physijs takes that philosophy to heart and makes physics simulations just as easy to run. In fact, there are just five easy steps that must be taken to make a 3D scene come alive.
| + | Pickles have been an important part in the worldwide diet for a long time. But the nitrite generated in the production of pickles has always been a concerning problem to health and food safety, due to its conversion to carcinogenic nitrosamine once taken up by humans. |
| − | <br><br>
| + | |
| − | How does Physijs work?
| + | <div class="imgbox"><img src="/wiki/images/a/aa/T--HFLS_H2Z_Hangzhou--img_home_nitrate1.jpg" /></div> |
| − | <br><br>
| + | |
| − | Physijs is built on top of ammo.js (although there is also a cannon.js branch) and runs the physics simulation in a separate thread (via web worker) to avoid impacting in your application's performance and taking up your 3D rendering time.
| + | Currently, most industrial production of pickles relies on the natural decomposing process of nitrite, which is inefficient and often takes months to complete. To make an improvement, we designed a bio-device to make the degradation of nitrite rapider and more environmental-friendly. |
| − | <br><br>
| + | |
| − | A lot of effort has been made to keep the style of code the same when using Physijs. Apart from updating an object's position, all of the normal three.js conventions remain the same. If you are used to three.js, you already know how to use the Physijs plugin.
| + | <!-- <div class="imgbox"><img src="/wiki/images/0/04/T--HFLS_H2Z_Hangzhou--img_home_pickle1.jpg" /></div> --> |
| | + | |
| | + | Our device consists of a positive feedback loop followed by a fusion enzyme which can reduce nitrite to nitrogen and oxygen. The feedback loop is regulated by a nitrite/nitrate specific promoter to ensure the expression of downstream function proteins only in pickles environment. Our solution drastically shortens the production period and increases profit margin for the multibillion-dollar pickled vegetables industry. |
| | + | </div> |
| | </div> | | </div> |
| − | </div> | + | |
| − | <div class="block" style="background: rgba(250, 250, 250, 1);"> | + | < !-- <div class="block" style="background: rgba(250, 250, 250, 1);"> |
| | <div class="title">Members</div> | | <div class="title">Members</div> |
| | <div class="pad member-box" style="text-align: center;"></div> | | <div class="pad member-box" style="text-align: center;"></div> |
| − | </div> | + | </div> --> |
| | + | |
| | + | <div class="line-sep"></div> |
| | + | |
| | + | <!-- <div class="block white-bg"> |
| | + | <div style="font-size: 300%;">More coming soon</div> |
| | + | </div> --> |
| | </div> | | </div> |
| | | | |
| Line 660: |
Line 139: |
| | | | |
| | var main = $(this); | | var main = $(this); |
| − |
| |
| − | var iso = Isocity(main.find(".isocity"));
| |
| − |
| |
| − | setTimeout(iso.gen, 0);
| |
| | | | |
| | function genMember(pic, name, descr) { | | function genMember(pic, name, descr) { |
| Line 681: |
Line 156: |
| | } | | } |
| | | | |
| − | main.find(".member-box").append(genMember("/img/elliot.jpg", "Canal", "Beautiful")); | + | main.find(".learn-more-btn").click(function () { |
| − | main.find(".member-box").append(genMember("/img/matt.jpg", "Sam", "Gorgeous"));
| + | Aquamade.menu.toggle(); |
| − | main.find(".member-box").append(genMember("/img/stevie.jpg", "Daniel", "Cool")); | + | }); |
| | }); | | }); |
| | | | |
| | </script> | | </script> |
| − |
| |
| − | <script>eval("1&&1")</script>
| |
| | </html> | | </html> |
Currently, most industrial production of pickles relies on the natural decomposing process of nitrite, which is inefficient and often takes months to complete. To make an improvement, we designed a bio-device to make the degradation of nitrite rapider and more environmental-friendly.
Our device consists of a positive feedback loop followed by a fusion enzyme which can reduce nitrite to nitrogen and oxygen. The feedback loop is regulated by a nitrite/nitrate specific promoter to ensure the expression of downstream function proteins only in pickles environment. Our solution drastically shortens the production period and increases profit margin for the multibillion-dollar pickled vegetables industry.
