Processing.js 8x8 ドットマトリックスLEDっぽいのつくってみた canvas

canvasで使うライブラリはすっかりProcessing.jsに馴染んでしまった僕です、こんにちは。

Arduinoを使った8x8ドットマトリックスLEDの点滅をやりたいなと思い、そのシミュレーションとしてjsdoitでまずはcanvasに描画してみようと思いたちProcessing.jsで書いてみました。

<script type="application/processing">
int[][] p = {
  {0,0,1,0,0,0,0,0},
  {0,1,1,1,1,1,0,0},
  {0,0,1,0,0,0,0,0},
  {0,0,1,1,1,1,0,0},
  {0,1,1,0,1,0,1,0},
  {1,0,1,1,0,0,1,0},
  {0,1,1,0,0,1,0,0},
  {0,0,0,0,0,0,0,0}
};
void setup(){
  size(81, 81);
  frameRate(30);
}
void draw(){
  background(0);
  stroke(0);
  for(int y = 0; y < p.length; y++){
  for(int x = 0; x < p[y].length; x++){
    if(p[y][x] == 0){
      fill(96, 96, 96);
    }
    else if(p[y][x] == 1){
      fill(255, 0, 0);
    }
    ellipseMode(CORNER);
    ellipse(x*10, y*10, 10, 10);
  }}
}
</script>
int[][] p = {
  {0,0,1,0,0,0,0,0},
  {0,1,1,1,1,1,0,0},
  {0,0,1,0,0,0,0,0},
  {0,0,1,1,1,1,0,0},
  {0,1,1,0,1,0,1,0},
  {1,0,1,1,0,0,1,0},
  {0,1,1,0,0,1,0,0},
  {0,0,0,0,0,0,0,0}
};
void setup(){
  size(81, 81);
  frameRate(30);
}
void draw(){
  background(0);
  stroke(0);
  for(int y = 0; y < p.length; y++){
  for(int x = 0; x < p[y].length; x++){
    if(p[y][x] == 0){
      fill(96, 96, 96);
    }
    else if(p[y][x] == 1){
      fill(255, 0, 0);
    }
    ellipseMode(CORNER);
    ellipse(x*10, y*10, 10, 10);
  }}
}

jsdoitにも投稿してあります。 Processing.js 8x8 ドットマトリックスLEDっぽいのつくってみた

Processing.js 8x8 ドットマトリックスLEDっぽいのつくってみた - jsdo.it - share JavaScript, HTML5 and CSS

描画するだけだったら簡単だけど、x軸に対して1ドットずつ横に流してアニメーションさせたいなーと。 アニメーションできたらまたうpしますん。