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で書いたソースをぺたぺたブログにもはってたのですが、実際に動いてるものをどうにか簡単にはれないかと思い探してみました。

Processing JS WordPress Plugin
http://www.keyvan.net/code/processing-js/

意図も簡単に見つけてしまったので早速導入してみました。

void setup() {
    size(400, 160);
    frameRate(15);
}
void draw() {
    int s = random(100);
    background(#ffffff);
    stroke(random(255), random(255), random(255));
    ellipse(random(width), random(height), s, s);
}

良い感じに動いたー！すてきー！

Processingの拡張ライブラリでVideoライブラリがあります。
Macの場合、モニタの上部分についてるあのカメラを使ってProcessingにキャプチャ画像を取り込むことができるのです。

まずはカメラを使う準備から。
下記のソースコードでカメラから取り込んだキャプチャをProcessingに渡します。

import processing.video.*;

Capture cam;

void setup(){
  size(420, 320);
  cam = new Capture(this, width, height, 15);
}

void captureEvent(Capture cam){
  cam.read();
}

void draw(){
  image(cam, 0, 0);
}

そしたらピクセル解析の準備をします。
loadPixels()をセットすることで、pixels[]にピクセルデータを渡します。

void draw(){
  image(cam, 0, 0);
  loadPixels();  //ディスプレイウィンドウへピクセルデータをロードします。
}

ここからはキャプチャを加工するための関数を定義して読み出します。

rect版モザイク

import processing.video.*;

Capture cam;

void setup(){
  size(420, 320);
  cam = new Capture(this, width, height, 15);
}

void captureEvent(Capture cam){
  cam.read();
}

void draw(){
  image(cam, 0, 0);
  loadPixels();
  mosaic(10, 10);
}

void mosaic(int w, int h){
  for( int y = 0; y < height; y += h ){
  for( int x = 0; x < width; x += w ){
    color c = pixels[ y * width + x ];
    fill(c);
    rect(x, y, w, h);
  }
  }
}

ellipse版モザイク

import processing.video.*;

Capture cam;

void setup(){
  size(420, 320);
  cam = new Capture(this, width, height, 15);
}

void captureEvent(Capture cam){
  cam.read();
}

void draw(){
  image(cam, 0, 0);
  loadPixels();
  fillMosaic(cam, 10, 10);
}

void fillMosaic(PImage img, int w, int h){
  for( int y = 0; y < height; y += h ){
  for( int x = 0; x < width; x += w ){
    color c = pixels[ y * width + x ];
    fill(c);
    ellipse(x, y, brightness(c)/7.0, brightness(c)/7.0);
  }
  }
}

斬新な何か

import processing.video.*;

Capture cam;

void setup(){
  size(420, 320);
  cam = new Capture(this, width, height, 15);
}

void captureEvent(Capture cam){
  cam.read();
}

void draw(){
  image(cam, 0, 0);
  loadPixels();
  fractalSolidMosaic(cam, 10, 10);
}

void fractalSolidMosaic(PImage img, int w, int h){
  for( int y = 0; y < height; y += h ){
  for( int x = 0; x < width; x += w ){
    color c = pixels[ y * width + x ];
    fill(c);
    pushMatrix();
    translate(x, y);
    rotate(brightness(c));
    rect(0, 0, brightness(c)/2.0, 2);
    popMatrix();
  }
  }
}

実際に動かしてもらった方が面白いと思います。
次回はAR系に挑戦してみようと思います。

[参考記事】yoppa.org - Processingで画像データを扱う

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 );
  }
}

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

とりあえずここまで。

Processingとは – Wikipedia

Processing（プロセッシング）は、Casey Reas と Benjamin Fry によるオープンソースプロジェクトであり、かつてはMITメディアラボで開発されていた。電子アートとビジュアルデザインのためのプログラミング言語であり、統合開発環境 (IDE) である。 視覚的なフィードバックが即座に得られるため、初心者がプログラミングを学習するのに適しており、電子スケッチブックの基盤としても利用できる。Javaを単純化し、グラフィック機能に特化した言語といえる。

Javaがベースになっているので、文法さえわかれば誰でも簡単に入門できる。文法わかんなくても比較的直感的な関数しかないので初心向きなんじゃないかなと思う。”プログラミング” ではなく、ソースコードを書くことを “スケッチ” と呼ぶようです。

下が”スケッチ”するスケッチブック

下のサンプルコードだけで下記が表示される。

void draw(){
  rect(10,10,10,10);
}

スケッチブックに白い四角形が描かれた。draw関数の中にrectメソッドを記述すると四角形を描いてくれる。
他に、ellipseメソッドを使えば円を描いてくれるし、lineメソッドを使えば線を描く。textメソッドを使えばテキストを描く。
このようにメソッドが直感的でデジタルアートに特化したシンプルな言語なようですぜ。

応用編でマウスで絵を描ける風にしてみました。

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

void draw(){
  if(mousePressed){
    fill(0);
    ellipse(mouseX,mouseY,10,10);
  }
}

描いてみたもの

たのしいお（＾ｑ＾）！

まずは何もないと始まらないので、Amazonで下記の二つを買った。

▽Arduinoをはじめようキット

▽Arduinoをはじめよう

早速組み立ててみた。

Arduino SDK でC言語でProcessingに似た形式でプログラムを書くことができる。

#define LED 13

void setup(){
pinMode(LED, OUTPUT);
}
void loop(){
digitalWrite(LED, HIGH);
delay(1000);
digitalWrite(LED, LOW);
delay(1000);
}

1秒ごとにLEDが点いたり消えたりするようになった。