processing.js + erbを使った例

processing_and_erb_example.html.erb

<script type="application/processing" target="processing-canvas">
void setup(){
  screen_width = 1000;
  screen_height = 1200;
  bar_height = 20;
  text_width = 700;
  margin = 10;
  bar_max_width = screen_width - margin*4 - text_width - 200;

  size(screen_width,screen_height);

  smooth();
  strokeJoin(ROUND);
  colorMode(HSB,360,100,100);
  background(90,5,90);

  PFont font = createFont("メイリオ",60);
  textFont(font);
  textSize(bar_height);

  <% @videos.each_with_index do |video,i| %>
    bottom = 50 + <%=i%>*(bar_height+10);

    // title部分
    x = margin + text_width;
    y = bottom;
    fill(0,0,24);
    textAlign(RIGHT,BOTTOM);
    text("<%=video.title%>",x,y);

    // 仕切り線
    x = x + margin/2;
    y = bottom - bar_height;
    strokeWeight(1);
    stroke(90,5,70);
    line(x, y, x, y + bar_height );
    stroke(90,5,100);
    line(x+1, y, x+1, y + bar_height );

    // バーの部分
    x = x + margin/2;
    bar_width = map(<%=video.view_counter%>,0,<%=@videos.map{|v| v.view_counter}.max%>,0,bar_max_width);
    noStroke();
    for(int j=1;j<=bar_height;j++){
      fill(0,0,30+j);
      rect(x,bottom - j, bar_width, 1 );
    }

    // バーの囲み線
    stroke(0,0,20);
    noFill();
    strokeWeight(2);
    rect( x, y, bar_width, bar_height );

    // view_counterの数値の部分
    x = x + bar_width + margin;
    fill(11,79,90);
    textAlign(LEFT,BOTTOM);
    text("<%=video.view_counter%>",x,bottom);

    // 横仕切り線
    x = margin;
    y = bottom+5;
    strokeWeight(1);
    stroke(90,5,70);
    line(x ,y, screen_width - margin, y );
    stroke(90,5,100);
    line(x ,y+1, screen_width - margin, y+1 );
  <% end %>
}
</script>
<canvas width="1000" height="1200"/>