Viral Logo

Viral Logo

var r = new Rune({
  container: "#canvas",
  width: 800,
  height: 1000,
  //debug: true
});


var title_height = 200;


var grid = r.grid({
  x: 0,
  y: title_height,
  width: r.width,
  height: r.height - title_height,
  gutter: 0,
  columns: 3,
  rows: 3
});

console.log("H:" + grid.state.moduleHeight, "W:" + grid.state.moduleWidth)

var center_grid = grid.state.moduleHeight/2; 
var module_size = grid.state.moduleHeight;


//////////////////alphapap
var sat1 = Rune.random(20,100);
var bri1 = 100;
var hpv1_diameter = Rune.random(220,240);
var hpv1 = r.ellipse(center_grid, center_grid, hpv1_diameter, hpv1_diameter)
  .fill('hsv', 170, sat1, bri1)
  .stroke(false)




/////////////////////beta
var sat2 = Rune.random(20,100);
var bri2 = 100;
var hpv2_diameter = Rune.random(220,240);
var hpv2 = r.ellipse(center_grid, center_grid, hpv2_diameter, hpv2_diameter)
.fill('hsv', 170, sat2, bri2)
.stroke(false)


//////////////////gamma
var sat3 = Rune.random(20,100);
var bri3 = 100;
var hpv3_diameter = Rune.random(220,240);
var hpv3 = r.ellipse(center_grid, center_grid, hpv3_diameter, hpv3_diameter)
.fill('hsv', 170, sat3, bri3)
.stroke(false)

//////////////////mupa
var sat4 = Rune.random(20,100);
var bri4 = 100;
var hpv4_diameter = Rune.random(208,220);
var hpv4 = r.ellipse(center_grid, center_grid, hpv4_diameter, hpv4_diameter)
.fill('hsv', 170, sat4, bri4)
.stroke(false)

/////////////////nupa
var sat5 = Rune.random(20,100);
var bri5 = 100;
var hpv5_diameter = Rune.random(208,220);
var hpv5 = r.ellipse(center_grid, center_grid, hpv5_diameter, hpv5_diameter)
.fill('hsv', 170, sat5, bri5)
.stroke(false)

grid.add(hpv1, 1, 1) //alpha
grid.add(hpv2, 2, 2) //beta
grid.add(hpv3, 3, 3) //gamma
grid.add(hpv4, 3, 1) //mupa
grid.add(hpv5, 1, 3) //nupa

//////////////////////////////////////////////////Papilloma Coat/////////

///////hpv1
var xx = Rune.random(0,20);
var yy = Rune.random(0,module_size-20);
var xx_2 = Rune.random(0,20);
var yy_2 = Rune.random(0,module_size-20);


for(i = 0; i < 10; i++) {

hpv_coat = r.path(xx + 50*i, yy)
  .lineTo(75, 0)
  .lineTo(50, 75)
  .lineTo(-25, 75)
  .closePath()
  .fill("hsv", 216, 100, 100)
  .stroke(false)
  .scale(.5)
  //.rotate(r.random(-36, 36), xx + 50*i, yy + 50*i)

 grid.add(hpv_coat, 1, 1)

  }


for(i = 0; i < 10; i++) {
hpv_coat2 = r.path(xx_2  + 30*i, yy_2)
  .lineTo(25, 75)
  .lineTo(0, 150)
  .lineTo(-25, 75)
  .closePath()
  //color is multiple of 72
   .fill("hsv", 288, 100, 100) 
  .stroke(false)
  .scale(.5)
  //.rotate(r.random(-90, 90), xx_2  + 50*i, yy_2  + 50*i)

grid.add(hpv_coat2, 1, 1)

}

//////hpv2

var hpv2_xx = Rune.random(10,20);
var hpv2_yy = Rune.random(0,module_size-20);
var hpv2_xx_2 = Rune.random(10,20);
var hpv2_yy_2 = Rune.random(0,module_size-20);


for(i = 0; i < 10; i++) {

hpv2_coat = r.path(hpv2_xx + 50*i, hpv2_yy)
  .lineTo(75, 0)
  .lineTo(50, 75)
  .lineTo(-25, 75)
  .closePath()
  .fill("hsv", 216, 100, 100)
  .stroke(false)
  .scale(.5)
  //.rotate(r.random(-36, 36), xx + 50*i, yy + 50*i)

 grid.add(hpv2_coat, 2, 2)

  }


for(i = 0; i < 10; i++) {
hpv2_coat2 = r.path(hpv2_xx_2  + 30*i, hpv2_yy_2)
  .lineTo(25, 75)
  .lineTo(0, 150)
  .lineTo(-25, 75)
  .closePath()
  .fill("hsv", 288, 100, 100) 
  .stroke(false) 
  .scale(.5)
  //.rotate(r.random(-90, 90), xx_2  + 50*i, yy_2  + 50*i)

grid.add(hpv2_coat2, 2, 2)

}

//////hpv3

var hpv3_xx = Rune.random(10,20);
var hpv3_yy = Rune.random(0,module_size-20);
var hpv3_xx_2 = Rune.random(10,20);
var hpv3_yy_2 = Rune.random(0,module_size-20);


for(i = 0; i < 10; i++) {

hpv3_coat = r.path(hpv3_xx + 50*i, hpv3_yy)
  .lineTo(75, 0)
  .lineTo(50, 75)
  .lineTo(-25, 75)
  .closePath()
  .fill("hsv", 216, 100, 100)
  .stroke(false)
  .scale(.5)


 grid.add(hpv3_coat, 3, 3)

  }


for(i = 0; i < 10; i++) {
hpv3_coat2 = r.path(hpv3_xx_2  + 30*i, hpv3_yy_2)
  .lineTo(25, 75)
  .lineTo(0, 150)
  .lineTo(-25, 75)
  .closePath()
 .fill("hsv", 288, 100, 100) 
  .stroke(false) 
  .scale(.5)

grid.add(hpv3_coat2, 3, 3)

}

//////hpv4

var hpv4_xx = Rune.random(10,20);
var hpv4_yy = Rune.random(0,module_size-20);
var hpv4_xx_2 = Rune.random(10,20);
var hpv4_yy_2 = Rune.random(0,module_size-20);


for(i = 0; i < 10; i++) {

hpv4_coat = r.path(hpv4_xx + 50*i, hpv4_yy)
  .lineTo(75, 0)
  .lineTo(50, 75)
  .lineTo(-25, 75)
  .closePath()
  .fill("hsv", 216, 100, 100)
  .stroke(false)
  .scale(.5)


 grid.add(hpv4_coat, 3, 1)

  }


for(i = 0; i < 10; i++) {
hpv4_coat2 = r.path(hpv4_xx_2  + 30*i, hpv4_yy_2)
  .lineTo(25, 75)
  .lineTo(0, 150)
  .lineTo(-25, 75)
  .closePath()
 .fill("hsv", 288, 100, 100) 
  .stroke(false) 
  .scale(.5)

grid.add(hpv4_coat2, 3, 1)

}

//////hpv5

var hpv5_xx = Rune.random(10,20);
var hpv5_yy = Rune.random(0,module_size-20);
var hpv5_xx_2 = Rune.random(10,20);
var hpv5_yy_2 = Rune.random(0,module_size-20);


for(i = 0; i < 10; i++) {

hpv5_coat = r.path(hpv5_xx + 50*i, hpv5_yy)
  .lineTo(75, 0)
  .lineTo(50, 75)
  .lineTo(-25, 75)
  .closePath()
  .fill("hsv", 216, 100, 100)
  .stroke(false)
  .scale(.5)


 grid.add(hpv5_coat, 1, 3)

  }


for(i = 0; i < 10; i++) {
hpv5_coat2 = r.path(hpv5_xx_2  + 30*i, hpv5_yy_2)
  .lineTo(25, 75)
  .lineTo(0, 150)
  .lineTo(-25, 75)
  .closePath()
 .fill("hsv", 288, 100, 100) 
  .stroke(false) 
  .scale(.5)

grid.add(hpv5_coat2, 1, 3)

}


/////////////non-perlin DNA
var dnaColor_array = [90, 180]
var select_color = _.sample(dnaColor_array);

/////////dna1 (1,1)
for (i = 0; i < 2; i++) {
var dna1 = r.ellipse(center_grid + 20*i, center_grid, hpv1_diameter/2, hpv1_diameter/2)
.fill('hsv', 170 + _.sample(dnaColor_array), sat1, 100)
.stroke('hsv', 170 + _.sample(dnaColor_array) + 180, sat1, bri1)
.strokeWidth(2)

dna1.state.fill
  .clearer(0.65)

grid.add(dna1, 1, 1)

}

///////dna2
for (i = 0; i < 2; i++) {
var dna2 = r.ellipse(center_grid + 20*i, center_grid, hpv1_diameter/2, hpv1_diameter/2)
.fill('hsv', 170 + _.sample(dnaColor_array), sat1, 100)
.stroke('hsv', 170 + _.sample(dnaColor_array) + 180, sat2, bri2)
.strokeWidth(2)

dna2.state.fill
  .clearer(0.65)

grid.add(dna2, 2, 2)

}

///////dna3
for (i = 0; i < 2; i++) {
var dna3 = r.ellipse(center_grid + 20*i, center_grid, hpv1_diameter/2, hpv1_diameter/2)
.fill('hsv', 170 + _.sample(dnaColor_array), sat1, 100)
.stroke('hsv', 170 + _.sample(dnaColor_array) + 180, sat3, bri3)
.strokeWidth(2)

dna3.state.fill
  .clearer(0.65)

grid.add(dna3, 3, 3)

}

///////dna4
for (i = 0; i < 2; i++) {
var dna4 = r.ellipse(center_grid + 20*i, center_grid, hpv1_diameter/2, hpv1_diameter/2)
.fill('hsv', 170 + _.sample(dnaColor_array), sat1, 100)
.stroke('hsv', 170 + _.sample(dnaColor_array) + 180, sat4, bri4)
.strokeWidth(2)

dna4.state.fill
  .clearer(0.65)

grid.add(dna4, 3, 1)

}


///////dna5
for (i = 0; i < 2; i++) {
var dna5 = r.ellipse(center_grid + 20*i, center_grid, hpv1_diameter/2, hpv1_diameter/2)
.fill('hsv', 170 + _.sample(dnaColor_array), sat1, 100)
.stroke('hsv', 170 + _.sample(dnaColor_array) + 180, sat5, bri5)
.strokeWidth(2)

dna5.state.fill
  .clearer(0.65)

grid.add(dna5, 1, 3)

}



//////////////////////////////Mask background of grid with subpath////////////////////////////////////////////
///////////////Mask virus 1
var myPath = r.path(0, 0).fill(255).stroke(false).fillRule('evenodd')
  .lineTo(module_size, 0)
  .lineTo(module_size, module_size)
  .lineTo(0, module_size)
  .closePath();

var rad = hpv1_diameter/2;

for(var i = 0; i < 360; i += 5) {

  var x = center_grid + Math.cos(r.radians(i)) * rad;
  var y = center_grid + Math.sin(r.radians(i)) * rad;
  if(i == 0) {
    myPath.moveTo(x, y)
  } else {
    myPath.lineTo(x, y)
  }

} 

grid.add(myPath, 1, 1);

////////Mask virus 2

var myPath2 = r.path(0, 0).fill(255).stroke(false).fillRule('evenodd')
  .lineTo(module_size, 0)
  .lineTo(module_size, module_size)
  .lineTo(0, module_size)
  .closePath();

var rad = hpv2_diameter/2;

for(var i = 0; i < 360; i += 5) {

  var x = center_grid + Math.cos(r.radians(i)) * rad;
  var y = center_grid + Math.sin(r.radians(i)) * rad;
  if(i == 0) {
    myPath2.moveTo(x, y)
  } else {
    myPath2.lineTo(x, y)
  }

} 

grid.add(myPath2, 2, 2);

////////Mask virus 3

var myPath3 = r.path(0, 0).fill(255).stroke(false).fillRule('evenodd')
  .lineTo(module_size, 0)
  .lineTo(module_size, module_size)
  .lineTo(0, module_size)
  .closePath();

var rad = hpv3_diameter/2;

for(var i = 0; i < 360; i += 5) {

  var x = center_grid + Math.cos(r.radians(i)) * rad;
  var y = center_grid + Math.sin(r.radians(i)) * rad;
  if(i == 0) {
    myPath3.moveTo(x, y)
  } else {
    myPath3.lineTo(x, y)
  }

} 

grid.add(myPath3, 3, 3);

////////Mask virus 4

var myPath4 = r.path(0, 0).fill(255).stroke(false).fillRule('evenodd')
  .lineTo(module_size, 0)
  .lineTo(module_size, module_size)
  .lineTo(0, module_size)
  .closePath();

var rad = hpv4_diameter/2;

for(var i = 0; i < 360; i += 5) {

  var x = center_grid + Math.cos(r.radians(i)) * rad;
  var y = center_grid + Math.sin(r.radians(i)) * rad;
  if(i == 0) {
    myPath4.moveTo(x, y)
  } else {
    myPath4.lineTo(x, y)
  }

} 

grid.add(myPath4, 3, 1);

////////Mask virus 5

var myPath5 = r.path(0, 0).fill(255).stroke(false).fillRule('evenodd')
  .lineTo(module_size, 0)
  .lineTo(module_size, module_size)
  .lineTo(0, module_size)
  .closePath();

var rad = hpv5_diameter/2;

for(var i = 0; i < 360; i += 5) {

  var x = center_grid + Math.cos(r.radians(i)) * rad;
  var y = center_grid + Math.sin(r.radians(i)) * rad;
  if(i == 0) {
    myPath5.moveTo(x, y)
  } else {
    myPath5.lineTo(x, y)
  }

} 

grid.add(myPath5, 1, 3);


////////////////Masking squares in un-used grid
var mask_rect = r.rect(0, 0, module_size, module_size)
  .fill(255)
  .stroke(255)

grid.add(mask_rect, 1, 2)

var mask_rect2 = mask_rect.copy()
grid.add(mask_rect2, 2, 1)

var mask_rect3 = mask_rect.copy()
grid.add(mask_rect3, 3, 2)

var mask_rect4 = mask_rect.copy()
grid.add(mask_rect4, 2, 3)


var title_rect = r.rect(0,0, r.width, title_height)
  .fill(255)
  .stroke(false)




//////////////////////////TEXT

var title = r.text("LOGOS GONE VIRAL:", 10, 50)
  .fill(30)
  .stroke(false)
  .fontSize(36)
  .textAlign("left")
  .fontFamily("Courier New")
 
 var title = r.text("Genus Papillomaviridae", 10, 100)
  .fill(30)
  .stroke(false)
  .fontSize(26)
  .textAlign("left")
  .fontFamily("Courier New")

 var alpha_title = r.text("Papillomaviridae Alphapapillomavirus", 8, module_size + title_height)
  .fill(30)
  .stroke(false)
  .fontSize(12)
  .textAlign("left")
  .fontFamily("Courier New")
  .fontStyle("italic")


 var beta_title = r.text("Papillomaviridae Betapapillomavirus", 273, module_size*2 + title_height)
  .fill(30)
  .stroke(false)
  .fontSize(12)
  .textAlign("left")
  .fontFamily("Courier New")
  .fontStyle("italic")

 var gamma_title = r.text("Papillomaviridae Gammapillomavirus", 545, module_size*3 + title_height - 4)
  .fill(30)
  .stroke(false)
  .fontSize(12)
  .textAlign("left")
  .fontFamily("Courier New")
  .fontStyle("italic")

var mupa_title = r.text("Papillomaviridae Mupapillomavirus", 545, module_size + title_height)
  .fill(30)
  .stroke(false)
  .fontSize(12)
  .textAlign("left")
  .fontFamily("Courier New")
  .fontStyle("italic")

var nupa_title = r.text("Papillomaviridae Nupapillomavirus", 8, module_size*3 + title_height - 4)
  .fill(30)
  .stroke(false)
  .fontSize(12)
  .textAlign("left")
  .fontFamily("Courier New")
  .fontStyle("italic")

 //Papillomaviridae Alphapapillomavirus

//grid.add(alpha_title, 1, 1)
/// (1,2) (2,1) (3, 2) (2, 3)

/////////////////////////////////////////////////DNA - noise circles

// var noise = new Rune.Noise()//.noiseDetail(0.6);
// var numPoints = 100;
// var pointDegree = 360/numPoints;
// var radius = 150;
// var noiseStep = 200;

// for (var i = 0; i < 2; i++) {
//   var noiseCircle = r.polygon(center_grid, center_grid)
//   .stroke('hsv', 300, 50, 50)
//   .fill(false)
//   .strokeWidth(Rune.random(0.4, 1));

//   radius = hpv1_diameter/4 - 4*i;

//   for(var j = 0; j < numPoints; j++) {

//     var noiseRadius = (noise.get(noiseStep) * 10) + radius;  //adjust here
//     var x = Math.cos(Rune.radians(pointDegree * j)) * noiseRadius;
//     var y = Math.sin(Rune.radians(pointDegree * j)) * noiseRadius;

//     noiseCircle.lineTo(x,y);
//     noiseStep += 80;  //adjust here
//     grid.add(noiseCircle, 1, 1)
//   }
// }




r.draw();