Color by amino acid code

[gomoto]

Hey Marco,

What is the best way to color a structure by residue code? For example, all Glycines blue, all Alanines red, etc.

Thanks!

Ryan

[biasmv]

Hi Ryan,

there are different ways to to this. The simplest (in terms of lines of code) but slowest way is to uniformly color each residue individually. This can be done as follows:

var go = viewer.cartoon('myStructure', structure);
go.colorBy(color.uniform('blue'), structure.select({rname : 'GLY' }));
go.colorBy(color.uniform('red'), structure.select({rname : 'ALA' }));
...

The more efficient way is to implement a custom coloring operation like this:

]
// For the purpose is this sample,  we pick colors from the rainbow gradient. 
// For better results you will have to hand-pick the colors for each amino acid.
var STANDARD_AA = [
  'GLY', 'ALA', 'VAL', 'ASN', 'ASP',
  'GLN', 'GLU', 'ARG', 'LYS', 'PRO',
  'THR', 'TYR', 'PHE', 'SER', 'MET',
  'HIS', 'CYS', 'TRP', 'ILE', 'LEU'

var rb = pv.color.gradient('rainbow');
var AA_COLORS = {};
for (var i = 0; i < STANDARD_AA.length; ++i) {
  var color = pv.vec4.create();
  rb.colorAt(color, i/19);
  AA_COLORS[STANDARD_AA[i]] = color;
}
// The  function of the coloring operation gets called once for each atom. We just 
// lookup the color in the map defined above. In case we hit a non-standard 
// residue, just fall back to a gray-ish color.
var colorByAA = new pv.color.ColorOp(function(atom, out, index) {
  var rname = atom.residue().name();
  var color = AA_COLORS[rname];
  if (color === undefined) {
    color = [0.5, 0.5, 0.5, 1.0];
  }
  out[index + 0] = color[0];
  out[index + 1] = color[1];
  out[index + 2] = color[2];
  out[index + 3] = color[3];
});
// use the coloring operation defined above. 
var go = viewer.cartoon('myStructure', { color : colorByAA });
// alternatively you can do:
go.colorBy(colorByAA);

[gomoto]

Thanks for the detailed response.

I tried the custom coloring operation. There is some color bleeding between residues. Is there a way to have hard color boundaries?

[biasmv]

At the moment, colors are always interpolated between residues. But your are right: For certain coloring schemes, hard boundaries would be better. I'll see what I can do about that.

[biasmv]

Hi,

I've made a small tweak to how colors are interpolated. The result is now a little better. There still is color bleeding, but it's now limited to a smaller area. The real fix would to be not share vertices at the border of of residues when rendering as cartoon/tubes. But that's going to be a bigger change and I'd like to avoid that for now as it's also introducing more geometry to render.

[gomoto]

Looks good! Thanks for making the change.