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

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ドットずつ横に流してアニメーションさせたいなーと。
アニメーションできたらまたうｐしますん。

Processingとは、Javaを単純化し、グラフィック機能に特化した言語です。(Wikipedia 談)
Javaというとオブジェクト指向でとても難しい言語だというイメージがあるかもですが、Processingはかなり単純化されているので、
オブジェクト指向を気にしなくても気軽にJavaでメディアアートができます。

• Processing本家（英語）
  http://processing.org/
• Processing.js JavaScript Framework
  http://processingjs.org/

もちろん、インタラクティブにゴリッゴリの凄いやつをつくろう！ってなるとクラスを定義したりなどオブジェクト指向が必要になりますが、それでもネイティブなJavaよりProcessingは簡単にそれを実現できます。

最近はHTML5でゴリッゴリに動くメディアアートなどもありますが、jQueryの開発者でもある、ジョンがProcessing.js というJavaScriptでProcessingを描けるステキライブラリを開発してくれたので、Processingを覚えちゃえば誰でも割と簡単にインタラクティブ・メディアアートができます。まさに夢の言語です！

Processingの実際の書き方などはここでは割愛しちゃいますが、
とりあえず、このブログにてProcessingでつくられた作品を公開できるようにしてみました。

ProcessingはJavaベースなので、書き出す際には、Javaアプレットとして書き出します。
そして、書き出したjarファイルを下記の場所におきます。

例：threeballsclass.jar の場合
/wp-content/plugins/wp-proc-embed/threeballsclass/applet/threeballsclass.jar

次に記事投稿画面で、HTMLモードで下記のように記述します。

processing=threeballsclass 200 200
※実際は “[]” で囲ってください。

これで埋め込みができるはずです。

下記が実際にProcessingで組まれた作品です。

実際のProcessing内でのソースはこちら

int dim = 200;
Ball ball1, ball2, ball3, ball4;

void setup(){
  size(dim,dim);
  noStroke();
  frameRate(30);
  smooth();
  ellipseMode(CENTER);
  ball1 = new Ball();
  ball2 = new Ball();
  ball3 = new Ball();
  ball4 = new Ball();
}

void draw(){
  background(255,255,255);
  ball1.move();
  ball2.move();
  ball3.move();
  ball4.move();

  ball1.display();
  ball2.display();
  ball3.display();
  ball4.display();
}

class Ball{
  int xvel;
  int yvel;
  int xpos;
  int ypos;
  int c1, c2, c3;

  Ball(){
    xpos = int(random(11,(dim-11)));
    ypos = int(random(11,(dim-11)));
    xvel = 3;
    yvel = 3;
  }

  void move(){
    xpos = xpos+xvel;
    ypos = ypos+yvel;

    if ( xpos < 10 || xpos > (dim-10) ){
      xvel = -1 * xvel;
      c1 = int(random(0,255));
      c2 = int(random(0,255));
      c3 = int(random(0,255));
    }

    if ( ypos < 10 || ypos > (dim-10) ){
      yvel = -1 * yvel;
      c1 = int(random(0,255));
      c2 = int(random(0,255));
      c3 = int(random(0,255));
    }
  }

  void display(){
    fill(c1,c2,c3);
    ellipse(xpos,ypos,20,20);
  }

}

こんな感じで興味があればぜひぜひどうぞー！

アプレット、たのしいよ、アプレット。

とりま、某有名なネズミさんに似た形をellipse()使って描いてみました。

float positionX = 125;
float positionY = 125;

void setup(){
  size(400,400);
  background(255);
  smooth();
  noStroke();

  fill(0);
  ellipseMode(CORNER);
  ellipse( 0 + positionX, 0 + positionY, 50, 50 );
  ellipse( 100 + positionX, 0 + positionY, 50, 50 );
  ellipse( 25 + positionX, 25 + positionY, 100, 100 );
}
void draw(){
}

割とキレイに描けてるんじゃないかなとｗｗ
ただ、毎回こいつを繰り返し処理させるのはいかがなものかと思うので、クラスオブジェクトにまとめてみました。

class Mouse{

  //プロパティ
  float x,y;  //positionX, positionY
  float face; //face
  int[] bg;

  //コンストラクタ
  Mouse( float xpos, float ypos, int[] cpos )
  {
    //set
    this.x = xpos;
    this.y = ypos;
    this.bg = cpos;

    //conf
    fill( this.bg[0], this.bg[1], this.bg[2] );
    ellipseMode(CORNER);

    //耳
    ellipse( 0 + this.x, 0 + this.y, 50, 50 );
    ellipse( 100 + this.x, 0 + this.y, 50, 50 );
    //顔
    ellipse( 25 + this.x, 25 + this.y, 100, 100 );
  }
}

実際にこのMouseクラスを使ってテキトーに並べてみました。

float positionX = 125;
float positionY = 125;

void setup(){
  size(400,400);
  background(255);
  smooth();
  noStroke();

  int[][] bg = {
    {255,191,194},
    {204,191,255},
    {191,250,255},
    {255,255,206},
    {228,238,191}
  };
  new Mouse( positionX, positionY, bg[0] );
  new Mouse( positionX*2, positionY*2, bg[1] );
  new Mouse( positionX*0, positionY*0, bg[2] );
  new Mouse( positionX*2, positionY*0, bg[3] );
  new Mouse( positionX*0, positionY*2, bg[4] );
}
void draw(){
}

class Mouse{

  //プロパティ
  float x,y;  //positionX, positionY
  float face; //face
  int[] bg;

  //コンストラクタ
  Mouse( float xpos, float ypos, int[] cpos )
  {
    //set
    this.x = xpos;
    this.y = ypos;
    this.bg = cpos;

    //conf
    fill( this.bg[0], this.bg[1], this.bg[2] );
    ellipseMode(CORNER);

    //耳
    ellipse( 0 + this.x, 0 + this.y, 50, 50 );
    ellipse( 100 + this.x, 0 + this.y, 50, 50 );
    //顔
    ellipse( 25 + this.x, 25 + this.y, 100, 100 );
  }
}

市松模様を描くクラスとかにさらにまとめれば市松模様描けちゃう！
なんだか楽しくなってきた！

とりあえずここまで。

最初につくった “hello world” 的なもの。↓

class a {
	public static void main(String[] args) {
		System.out.print("引数の数は¥"" + args.length + "¥"やね。" + "¥n" );
		for( int i = 0; i < args.length; i++ ) {
			System.out.print("引数[" + i + "]の値は¥"" + args[i] + "¥"やね。" + "¥n" );
		}
		if(args.length != 0) {
			System.out.print("¥n" + "せやな。引数あって良かったわな。" + "¥n");
		}else{
			System.out.print("¥n" + "引数ないとかありえへん。" + "¥n");
		}
	}
}

ぼちぼち頑張ってゆきまする。