Difference between revisions of "Team:Bulgaria"

Line 270: Line 270:
  
 
<p class="awesome">TEST</p>
 
<p class="awesome">TEST</p>
 +
 +
<script type="text/javascript" >
 +
 +
function HSLA(h, s, l, a)
 +
{
 +
    this.h = h;
 +
    this.s = s;
 +
    this.l = l;
 +
    this.a = a === 0 ? 0 : (a ? a : 1);
 +
}
 +
 +
HSLA.prototype = {
 +
    clone : function()
 +
    {
 +
      return new HSLA(this.h, this.s, this.l, this.a);
 +
    },
 +
 +
    toString : function()
 +
    {
 +
      var h = Math.round(((this.h%360)+360)%360);
 +
      var s = Math.round(this.s);
 +
      var l = Math.round(this.l);
 +
      return "hsla(" + h + ", " + s + "%, " + l + "%, " + this.a + ")";
 +
    }
 +
}
 +
 +
 +
 +
function Particle()
 +
{
 +
    this.x = this.y = 0;
 +
    this.vx = this.vy = 0;
 +
    this.scale = 1;
 +
}
 +
 +
 +
function Line(color, id, polars)
 +
{
 +
    this.pts = [];
 +
    this.color = color;
 +
    this.segment = 15 + Math.random() * 15;
 +
    this.nPts = 15 + Math.floor(Math.random() * 10);
 +
 +
    this.id = id;
 +
    this.polars = polars;
 +
    this.ratio = 0.5 + Math.random() * 0.5;
 +
    this.ratio = Math.random();
 +
 +
    for(var i = 0; i < this.nPts; i++)
 +
    {
 +
      var p = new Particle();
 +
      p.x = 2 * (Math.random() * 2 - 1) * this.nPts * this.segment;
 +
      p.y = 2 * (Math.random() * 2 - 1) * this.nPts * this.segment;
 +
      this.pts[i] = p;
 +
    }
 +
 +
    this.pSpeed = 0.1;
 +
    this.friction = 0.99;
 +
    this.width = Math.pow(Math.random(), 2) * 4 + 0.5;
 +
 +
    this.update();
 +
}
 +
 +
Line.prototype = {
 +
 +
    update : function()
 +
    {
 +
      var p = this.pts[0];
 +
      var r = this.polars[this.id];
 +
      var a = this.polars[this.id + 1];
 +
      p.x = this.ratio * r * Math.cos(a);
 +
      p.y = this.ratio * r * Math.sin(a);
 +
      for(var i = 1; i < this.nPts; i++)
 +
      {
 +
        p = this.pts[i];
 +
        p.vx += this.pSpeed * (2 * Math.random() - 1);
 +
        p.vy += this.pSpeed * (2 * Math.random() - 1);
 +
        p.vx += 0.000025 * p.x;
 +
        p.vy += 0.000025 * p.y;
 +
        p.vx *= this.friction;
 +
        p.vy *= this.friction;
 +
        p.x += p.vx;
 +
        p.y += p.vy;
 +
 +
        var p2 = this.pts[i - 1];
 +
        var dx = p2.x - p.x;
 +
        var dy = p2.y - p.y;
 +
        var d = dx * dx + dy * dy;
 +
        //if(d < this.segment * this.segment) continue;
 +
        var r = this.segment / Math.sqrt(d);
 +
        p.x = p2.x - r * dx;
 +
        p.y = p2.y - r * dy;
 +
      }
 +
    },
 +
 +
    draw : function(out)
 +
    {
 +
      out.beginPath();
 +
      var p = this.pts[0];
 +
      out.moveTo(p.x, p.y);
 +
      for(var i = 1; i < this.nPts - 1; i++)
 +
      {
 +
        p = this.pts[i];
 +
        var p2 = this.pts[i + 1];
 +
        out.quadraticCurveTo(p.x, p.y, 0.5 * (p.x + p2.x), 0.5 * (p.y + p2.y));
 +
      }
 +
      out.lineWidth = this.width;
 +
      out.strokeStyle = this.color;
 +
      out.stroke();
 +
    }
 +
}
 +
 +
var stage = new tools.Stage(700, 700);
 +
var out = stage.out;
 +
 +
var temp = new tools.Stage(700, 700, false);
 +
 +
stage.autoSize(onResize);
 +
var nCoords = 200;
 +
var step = 2 * Math.PI / nCoords;
 +
out.lineWidth = 2;
 +
var radius = 150;
 +
var coords = [];
 +
var polars = [];
 +
 +
var particlesFriction = 0.99;
 +
var particlesSpeed = 0.05;
 +
var particles = [];
 +
var nParticles = 20;
 +
var radiusBoundaryForce = 0.00002;
 +
var separation = 0.0001;
 +
 +
 +
var hue = Math.random() * 360;
 +
var sat = 10;
 +
 +
var bg = new HSLA(hue, 90, 2);
 +
 +
var border1 = new HSLA(hue, sat, 20, 0.5);
 +
var border2 = new HSLA(hue, sat, 90, 0.5);
 +
var cellBg1 = new HSLA(hue, sat, 0, 1);
 +
var cellBg2 = new HSLA(hue, sat, 25, 1);
 +
var cellBg = temp.out.createRadialGradient(0, 0, 0, 0, 0, 2 * radius);
 +
cellBg.addColorStop(0, cellBg1.toString());
 +
cellBg.addColorStop(1, cellBg2.toString());
 +
 +
var particleBg1 = new HSLA(hue, sat, 20, 0.8);
 +
var particleBg2 = new HSLA(hue, sat, 17);
 +
var particleBg3 = new HSLA(hue, sat, 23);
 +
mutateColor(particleBg1);
 +
mutateColor(particleBg2);
 +
mutateColor(particleBg3);
 +
 +
var microParticlesColor = new HSLA(hue, sat, 35);
 +
 +
 +
var lineColor = new HSLA(hue, sat, 90, 0.2);
 +
 +
for(var i = 0; i < nParticles; i++)
 +
{
 +
    var p = new Particle();
 +
    p.size = 40 * Math.pow(i/nParticles, 4) + 5;
 +
    var a = Math.random() * 2 * Math.PI;
 +
    var r = Math.random() * radius;
 +
    p.x = r * Math.cos(a);
 +
    p.y = r * Math.sin(a);
 +
 +
    particles[i] = p;
 +
}
 +
 +
var nMicroParticles = 300;
 +
var microParticles = [];
 +
for(var i = 0; i < nMicroParticles; i++)
 +
{
 +
    var p = new Particle();
 +
    p.x = (Math.random() * 2 - 1) * radius;
 +
    p.y = (Math.random() * 2 - 1) * radius;
 +
    microParticles[i] = p;
 +
}
 +
 +
var time = 0;
 +
 +
generateCoords();
 +
 +
var lines = [];
 +
var nLines = 20;
 +
for(var i = 0; i < nLines; i++)
 +
{
 +
    var id = 2 * Math.floor(nCoords * Math.random());
 +
    var l = new Line(lineColor.toString(), id, polars);
 +
    lines[i] = l;
 +
}
 +
 +
 +
 +
function update()
 +
{
 +
    var t = Date.now();
 +
    stage.clear();
 +
    temp.clear();
 +
    out.fillStyle = bg.toString();
 +
    out.fillRect(0, 0, stage.width, stage.height);
 +
 +
    generateCoords();
 +
 +
    out.save();
 +
    out.translate(0.5 * stage.width, 0.5 * stage.height);
 +
 +
    drawOutline(out);
 +
    out.fillStyle = cellBg;
 +
    out.fill();
 +
    out.restore();
 +
 +
    temp.out.save();
 +
    temp.out.translate(0.5 * stage.width, 0.5 * stage.height);
 +
 +
    drawOutline(temp.out);
 +
    temp.out.fillStyle = cellBg;
 +
    temp.out.fill();
 +
 +
    updateParticles();
 +
    drawParticles(temp.out);
 +
    out.globalAlpha = 0.4;
 +
    out.drawImage(temp.canvas, 0, 0);
 +
    temp.out.restore();
 +
    out.globalAlpha = 1;
 +
 +
    out.save();
 +
    out.translate(0.5 * stage.width, 0.5 * stage.height);
 +
 +
    drawHair(out);
 +
 +
    out.strokeStyle = border1.toString();
 +
    out.lineWidth = 15;
 +
    drawOutline(out);
 +
    out.strokeStyle = border2.toString();
 +
    out.lineWidth = 12;
 +
    drawOutline(out);
 +
    out.strokeStyle = border1.toString();
 +
    out.lineWidth = 5;
 +
    drawOutline(out);
 +
 +
    updateLines(out);
 +
 +
    out.restore();
 +
    time += 0.5;
 +
}
 +
 +
function drawOutline(out)
 +
{
 +
    out.beginPath();
 +
    out.moveTo(coords[0], coords[1]);
 +
    for(var i = 1; i < nCoords; i++)
 +
      out.lineTo(coords[2 * i], coords[2 * i + 1]);
 +
    out.lineTo(coords[0], coords[1]);
 +
    out.stroke();
 +
}
 +
 +
function drawHair(out)
 +
{
 +
    out.beginPath();
 +
    out.fillStyle = border1.toString();
 +
    c = border2.clone();
 +
    c.a = 0.5;
 +
    out.fillStyle = c.toString();
 +
    for(var i = 0; i < nCoords; i++)
 +
    {
 +
      if(!(i % 5)) continue;
 +
 +
      var curr = 2 * i;
 +
      var posX = coords[curr];
 +
      var posY = coords[curr + 1];
 +
      var prev = 2 * (i ? i - 1 : nCoords - 1);
 +
      var next = 2 * (i == nCoords - 1 ? 0 : i + 1);
 +
      var dx1 = posX - coords[prev];
 +
      var dy1 = posY - coords[prev + 1];
 +
      var d1 = 1 / Math.sqrt(dx1 * dx1 + dy1 * dy1);
 +
      dx1 *= d1;
 +
      dy1 *= d1;
 +
 +
      var dx2 = posX - coords[next];
 +
      var dy2 = posY - coords[next + 1];
 +
      var d2 = 1 / Math.sqrt(dx2 * dx2 + dy2 * dy2);
 +
      dx2 *= d2;
 +
      dy2 *= d2;
 +
 +
      var scale = i % 3 ? 0.5 : 1.2;
 +
      var sign = dx1 * dy2 - dx2 * dy1 > 0 ? -1 : 1;
 +
      var dx = 0.5 * (dx1 + dx2);
 +
      var dy = 0.5 * (dy1 + dy2);
 +
      var length = 7 + 7 * (Math.cos(5 * i * step + 0.01 * Math.cos(time)) + 2);
 +
      var d = scale * sign * length / Math.sqrt(dx * dx + dy * dy);
 +
      dx *= d;
 +
      dy *= d;
 +
 +
      out.moveTo(posX, posY);
 +
      var a = 0.2 * time + 0.3 * i;
 +
      var cpx = posX + 0.5 * dx + 0.5 * dx * (Math.cos(a));
 +
      var cpy = posY + 0.5 * dy + 0.5 * dy * (Math.sin(a));
 +
 +
      out.quadraticCurveTo(cpx, cpy, posX + dx, posY + dy);
 +
      if(!(i % 3))out.fillRect(posX + dx - 1.5, posY + dy - 1.5, 3, 3);
 +
    }
 +
    out.strokeStyle = border2.toString();
 +
    c = border2.clone();
 +
    c.a = 0.5;
 +
    out.strokeStyle = c.toString();
 +
    out.lineWidth = 1;
 +
    out.stroke();
 +
  }
 +
 +
  function updateLines(out)
 +
  {
 +
    for(var i = 0; i < nLines; i++)
 +
    {
 +
      var l = lines[i];
 +
      l.update();
 +
      l.draw(out);
 +
    }
 +
}
 +
 +
function generateCoords()
 +
{
 +
    //x, y
 +
    var s = 0.6;
 +
    for(var i = 0; i < nCoords; i++)
 +
    {
 +
      var ang = i * step;
 +
      ang += 0.1 * Math.cos(0.01 * time + ang);
 +
      ang += 0.25 * Math.cos(0.05 * time + ang);
 +
      var r = radius;
 +
      r += s * 15 * Math.cos(5 * ang + 0.1 * time);
 +
      r -= s * 15 * Math.cos(2 * ang - 0.1 * time);
 +
      r += s * 10 * Math.sin(5 * ang + 0.02 * time);
 +
      r -= s * 15 * Math.sin(2 * ang - 0.01 * time);
 +
      r += s * 10 * Math.cos(2 * ang + 0.01 * time) * Math.sin(5 * ang + 0.1 * time);
 +
      r += s * 10 * Math.sin(5 * ang - 0.1 * time) * Math.sin(ang + 0.1 * time);
 +
 +
      coords[2 * i] = r * Math.cos(ang);
 +
      coords[2 * i + 1] = r * Math.sin(ang);
 +
      polars[2 * i] = r;
 +
      polars[2 * i + 1] = ang;
 +
    }
 +
}
 +
 +
function updateParticles()
 +
{
 +
    for(var i = 0; i < nParticles; i++)
 +
    {
 +
      var p = particles[i];
 +
      p.vx += particlesSpeed * (Math.random() * 2 - 1);
 +
      p.vy += particlesSpeed * (Math.random() * 2 - 1);
 +
      p.vx -= radiusBoundaryForce * p.x;
 +
      p.vy -= radiusBoundaryForce * p.y;
 +
 +
      for(var j = i + 1; j < nParticles; j++)
 +
      {
 +
        var p2 = particles[j];
 +
        var dx = p2.x - p.x;
 +
        var dy = p2.y - p.y;
 +
        var r = p.size + p2.size;
 +
        var d = dx * dx + dy * dy;
 +
        if(d < r * r)
 +
        {
 +
          p.vx -= separation * dx;
 +
          p.vy -= separation * dy;
 +
          p2.vx += separation * dx;
 +
          p2.vy += separation * dy;
 +
        }
 +
      }
 +
      p.vx *= particlesFriction;
 +
      p.vy *= particlesFriction;
 +
      p.x += p.vx;
 +
      p.y += p.vy;
 +
    }
 +
 +
    for(var i = 0; i < nMicroParticles; i++)
 +
    {
 +
      var p = microParticles[i];
 +
      p.vx -= 0.00002 * p.x;
 +
      p.vy -= 0.00002 * p.y;
 +
      p.vx = 0.99 * p.vx + 0.1 * (Math.random() * 2 - 1);
 +
      p.vy = 0.99 * p.vy + 0.1 * (Math.random() * 2 - 1);
 +
      p.x += p.vx;
 +
      p.y += p.vy;
 +
    }
 +
}
 +
 +
 +
function drawParticles(out)
 +
{
 +
    out.save();
 +
    out.globalCompositeOperation = "source-atop";
 +
 +
    out.fillStyle = microParticlesColor.toString();
 +
    for(var i = 0; i < nMicroParticles; i++)
 +
    {
 +
      var p = microParticles[i];
 +
      out.fillRect(p.x, p.y, 2, 2);
 +
    }
 +
 +
    drawParticlesLayer(out, 20, particleBg1);
 +
    drawParticlesLayer(out, 2, particleBg2);
 +
    drawParticlesLayer(out, 0, particleBg3);
 +
 +
 +
    out.restore();
 +
}
 +
 +
function drawParticlesLayer(out, margin, color)
 +
{
 +
    out.beginPath();
 +
    for(var i = 0; i < nParticles; i++)
 +
    {
 +
      var p = particles[i];
 +
      out.moveTo(p.x + p.size + margin, p.y);
 +
      out.arc(p.x, p.y, p.size + margin, 0, 2 * Math.PI);
 +
    }
 +
    out.fillStyle = color.toString();
 +
    out.fill();
 +
}
 +
 +
function onResize()
 +
{
 +
  temp.resize(stage.width, stage.height);
 +
}
 +
 +
function mutateColor(c)
 +
{
 +
  c.h += 50 * (Math.random() * 2 - 1);
 +
}
 +
new tools.Loop(update, this);
 +
</script>
  
 
<div class="strand-wrapper">
 
<div class="strand-wrapper">

Revision as of 16:16, 12 October 2019

iGEM Bulgaria presents

PEPTIDATOR P-800

TEST

Before you start

Please read the following pages:

Styling your wiki

You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.

While you may not win Best Wiki with this styling, your team is still eligible for all other awards. This default wiki meets the requirements, it improves navigability and ease of use for visitors, and you should not feel it is necessary to style beyond what has been provided.

Uploading pictures and files

You must upload any pictures and files to the iGEM 2019 server. Remember to keep all your pictures and files within your team's namespace or at least include your team's name in the file name.

When you upload, set the "Destination Filename" to T--YourOfficialTeamName--NameOfFile.jpg. (If you don't do this, someone else might upload a different file with the same "Destination Filename", and your file would be erased!)

Editing your wiki

On this page you can document your project, introduce your team members, document your progress and share your iGEM experience with the rest of the world!

Use WikiTools - Edit in the black menu bar to edit this page

Inspiration

You can also view other team wikis for inspiration! Here are some examples: