Lab.

inClip..『Hands On -Prototyping Prototypes』展

ksmda.tmya — Fri, 18 Sep 2009 16:24:30 +0000

今回の「inClip」の仕様

アプリケーション・アイコン・プレート
黒枠のアイコン・プレートで、コンピュータ上のアプリケーションに対応している。デバイスではさむことでの起動と、離すことによる終了を行う。アプリケーション・ランチャー
ファイル・アイコン・プレート
枠なしの透明なアイコン・プレートで、コンピュータ上のファイルひとつひとつに対応している。デバイスではさむことでファイルの内容に応じてアプリケーションを起動して、コンテンツを表示・再生する。デバイスをプレートから離すとファイルは閉じられる。

想定した使用例

アプリケーション・アイコン・プレート on Desk (OR, in Room)
アプリケーション・アイコン・プレートに限らず、双方のプレートにねらったものだが、プレートはデスク上や部屋の棚などに置いたり並べたりして生活空間に配置されることを想定した。人が生活の中でその場所にあった（パソコンで扱ってきたような）コンテンツを扱えるようになる。
ファイル・アイコン・プレート with Binder
ファイル・アイコン・プレートはB5変型のバインダーに収納できるようになっている。コンピュータ内にフォルダの階層構造によって管理していたデータファイルを、書類をファイリングするように物理的に整理でき、視覚的にデータファイルを確認できる。一枚のバインダーに１２枚のプレートが収納。
ファイル・アイコン・プレート with Book
ファイル・アイコン・プレートは４隅のうち１点だけをネジ止めしてあり、紙ならばプレートをはさみ止めておくことができる。書籍に関連する動画や、ウェブホームページのブックマークをプレートに登録し、しおりの様に本にはさんでおくことができる。こうすることで本というアナログメディアと動画やブックマークといったデジタルコンテンツを一緒に管理し、いままで通り本棚に本を並べることで、間接的にデータファイルを本棚に整理することができる。

展示中にいただいたコメントなどから

プレートの使い方として、キーボードにスロットがついていて、それにはめる。プレートが並ぶことでアプリケーションやファイルの状態を俯瞰でき、それらはタンジブルである。
アプリケーション・アイコン・プレートではなく、アプリケーション・アイコン・クリップとしたらどうか。そのクリップを使って、ディスプレイにはさんでいくことでアプリケーションが立ち上がり、状態を確認できる。また、ファイル・アイコン・プレートをはさむことで、そのファイルをクリップの対応したアプリケーションで開くなど。
カラフルなプレートを使っていることについて、視覚的に好印象を得られた。（化粧品のパレットのよう。きれい。ながめて楽しい。子供は色だけでファイルを識別できるかも。）
同じファイル・アイコン・プレートでも、複数のクリップデバイスではさむことで、開くファイルや挙動が変わるとか。
デジタルデータをプレートに登録する方法。いかに簡単に登録ができるか。
ネットワークと繋がったシステムを考えてみては？
出力装置をコンピュータの画面ではなく、フォトフレームやオーディオセットなどの他の機器で行えるようしたらどうか。
プレート以外のモノへの登録。
クリップデバイスとプレートをはさむ方向の不自然さ。説明なしでは使えないレベル。
クリップデバイススタンド（サイン灯）のサインを説明するボードかなにかしらが必要。

次回バージョンアップ

プレートへの登録機能を実装（AppleScriptによるドロップレットを使用）
コンピュータのデスクトップ画面上に、ドロップレットを常駐させ、そのアイコンへ登録したいファイルをドロップする。そのときにクリップデバイスがはさんでいるプレートへ登録。
クリップデバイスの再設計
クリップデバイスの充電スタンドの制作

FMC2nd_p56_Blobs01

ksmda.tmya — Sun, 21 Jun 2009 11:43:59 +0000

p56_Blobs01

イメージからアプレットを起動

円が重なると円の外郭が一緒になる表現
FlashでのMovieClipにあたるオブジェクトをクラスで生成するのがポイント。これからこのような書き換えが基本的なメソッドになると思う。
Flashの方ではMovieClipのインスタンス名によってレイヤーが操作でき、白抜きのための円オブジェクト群を外郭にあたるオブジェクトより上の階層に位置するようにすれば、難しいことは無いサンプルプログラムでした。
Processingでは、フレーム毎にプログラムでは上から順に描画して行くのが一般で、先に描画されたものはそのあとに描画されるものによって上書きされてしまいます。
一つの円ごとに描画すると、外郭がひとつになるのではなく円が単に重なるようになってしまうので、まず、外郭となる円を描画してから、白抜きとなる円を描画するという順番になりました。
難しいと感じたポイントは、クラス設計でContainerとBallとEdgeという３つのクラスを用意したのですが、Containerにどんな役割を持たせるかが難しいところでした。

クラスをファイルで分けるのを止めてみました。いまいちどちらが良いのが判断のつかないプログラムです。02, 03,..と続けてみて、良くなさそうだったらファイルで分けるのに戻そうと思っています。
[java]
int total = 20;

Container container;

void setup(){
size(400, 400);
colorMode(HSB, 360, 100, 100, 100);
ellipseMode(CENTER);
noStroke();
smooth();
frameRate(20);

background(0, 0, 100);

container = new Container(width, height);

}

void draw(){
background(0, 0, 100);
container.bdraw();
}

class Container{
//property
int canvasWidth, canvasHeight;
float leftBounds, rightBounds;

Ball[] ball;
Edge[] edge;
int ballSize = 98;
int edgeSize = 100;
float posX, posY;
float vx, vy;

//constructor
Container(int canvasWidth, int canvasHeight){
this.canvasWidth = canvasWidth;
this.canvasHeight = canvasHeight;
leftBounds = -edgeSize;
rightBounds = edgeSize + canvasWidth;

ball = new Ball[total];
edge = new Edge[total];
for(int i=0; i posX = random(0, canvasWidth/2);
posY = random(0, canvasHeight/2) + canvasHeight/4;
vx = random(0, 60);

ball[i] = new Ball(ballSize, posX, posY);
ball[i].setVelocity(vx, 0);
edge[i] = new Edge(edgeSize, posX, posY);
}
}

//method
void bdraw(){
for(int i=0; i ball[i].posX += ball[i].vx;
if(ball[i].posX > rightBounds) ball[i].posX = leftBounds;

edge[i].posX = ball[i].posX;

ball[i].vx *= 0.8;
if(ball[i].vx < 0.00001) {
ball[i].vx = random(0, 60);
}
}

for(int i=0; i edge[i].bdraw();
}
for(int i=0; i ball[i].bdraw();
}
}
}

class Ball{
//property
int objSize;
float posX, posY;//position
float vx, vy;//velocity

//constructor
Ball(int objSize, float posX, float posY){
this.objSize = objSize;
this.posX = posX;
this.posY = posY;
}

//method
void setVelocity(float vx, float vy){
this.vx = vx;
this.vy = vy;
}

void bdraw(){//begin draw
fill(0, 0, 100);
ellipse(posX, posY, objSize, objSize);
}
}

class Edge extends Ball{
//constructor
Edge(int objSize, float posX, float posY){
super(objSize, posX, posY);
}

//method
void bdraw(){
fill(0, 60, 60);
ellipse(posX, posY, objSize, objSize);
}
}

void keyPressed(){
if(key ==’q'){
save(“p56_Blobs01.jpg”);
exit();
}

}
[/java]

FMC2nd_p43_Lines16

ksmda.tmya — Mon, 08 Jun 2009 21:45:29 +0000

p43_Lines16

イメージからアプレットを起動

Lines12をもとに、線が伸びていくときにアルファ値を設定
ただアルファ値を設定してあげるだけ。
見た目にもあまりおもしろくないので、Lines14の回転も加えた。こっちのがおもしろい。

p43_Lines16.pde
[java]
int leftBounds = 20;
int topBounds = 20;
float x = leftBounds;
float y = topBounds;
int rightBounds = 380;
int bottomBounds = 380;
int baseMax = 20;
int randomMax = 10;
int maxLines = 1000;
int counter = 0;

//int steps = 20;
//boolean nextLine = false;
//int alpha = 0;

Line[] Lines;
//Ellipse[] Ellipses;

void setup(){
size(400, 400);
frameRate(30);
colorMode(HSB, 360, 100, 100);
background(0, 0, 100);

Lines = new Line[maxLines];
// Ellipses = new Ellipse[maxLines];

strokeWeight(1);
smooth();
}

void draw(){
background(0,0,100);

// if(steps > 20 && !nextLine) nextLine = true;

if(counter < maxLines){// && nextLine){
float maxDistance = baseMax * random(0, 1) * randomMax;
float minDistance = 2;
int direction = random(0, 1) < 0.5 ? -1 : 1;
float xEnd = x + (direction * (minDistance + ( random(0, 1) * maxDistance)) );
direction = random(0, 1) < 0.5 ? -1 : 1;
float yEnd = y + (direction * (minDistance + ( random(0, 1) * maxDistance)) );

if(xEnd < leftBounds) xEnd = leftBounds;
if(xEnd > rightBounds) xEnd = rightBounds;
if(yEnd < topBounds) yEnd = topBounds;
if(yEnd > bottomBounds) yEnd = bottomBounds;

Lines[counter] = new Line(x, y, xEnd, yEnd);

// Lines[counter].setAlpha(alpha);
// Ellipses[counter] = new Ellipse(x, y, maxDistance * .2, maxDistance * .2);

x = xEnd;
y = yEnd;

// steps = 0;
// nextLine = false;

counter++;
}
// steps++;
// alpha++;
// if(alpha > 255) alpha = 0;

// if(counter >= 10 && counter // else if(counter > maxLines && counter < maxLines+10) {
// Lines[counter-10].disappear();
// }
// else if(counter > maxLines+10) noLoop();

if(counter < maxLines){
for(int i=0; i Lines[i].bdraw();
// Ellipses[i].bdraw();
}
}
else{
for(int i=0; i< maxLines; i++){
Lines[i].bdraw();
// Ellipses[i].bdraw();
}
}
}

void keyPressed(){
if(key == 'r'){
background(255);
counter = 0;
Lines = new Line[maxLines];
// Ellipses = new Ellipse[maxLines];
}
if(key =='q'){
saveFrame("p43_Lines16.jpg");
exit();
}
}
[/java]
Line.pde
[java]
public class Line{
//member
float x, y, xEnd, yEnd;
int alpha;
int steps;
float[] scl;
float r;
float nowR;
//constructor
Line(float x, float y, float xEnd, float yEnd){
this.x = x;
this.y = y;
this.xEnd = xEnd;
this.yEnd = yEnd;
alpha = 255;
steps = 0;
// r = 2*PI/20;
// nowR = 0;
// scl = new float[steps];
// scl[0] = 0;
// for(int i=0; i < steps; i++){
// float pre = 100000/(i+1);
// scl[i] = pre/100000;
// println(i+" = "+scl[i]);
// }
}
//method
void setAlpha(int alpha){
this.alpha = alpha;
bdraw();
}

void bdraw(){
// stroke(0, alpha);
// if(steps > 0){
if(steps < 20){
pushMatrix();
translate(x, y);
// scale(scl[steps-1]);
// line(0, 0, (xEnd – x)/steps, (yEnd – y)/steps);
// nowR += r;
// rotate(nowR);
stroke(0, 255/20 * steps);
line(0, 0, ((xEnd – x)/20)*steps, ((yEnd – y)/20)*steps);
popMatrix();
// steps–;
steps++;
}
else {
stroke(0, alpha);
line(x, y, xEnd, yEnd);
}

}

void disappear(){
x = y = xEnd = yEnd = 1000;
bdraw();
}
}
[/java]

FMC2nd_p43_Lines14

ksmda.tmya — Mon, 08 Jun 2009 21:35:22 +0000

p43_Lines14

イメージからアプレットを起動

Lines13を元に、線が延びていく時に回転。
Lines13のメインはそのまま、再びLines.pde（クラス）の変更。

Lines.pde（クラス）
[java]
public class Line{
//member
float x, y, xEnd, yEnd;
int alpha;
int steps;
float[] scl;
float r;
float nowR;
//constructor
Line(float x, float y, float xEnd, float yEnd){
this.x = x;
this.y = y;
this.xEnd = xEnd;
this.yEnd = yEnd;
alpha = 255;
steps = 0;
r = 2*PI/20;
nowR = 0;
// scl = new float[steps];
// scl[0] = 0;
// for(int i=0; i < steps; i++){
// float pre = 100000/(i+1);
// scl[i] = pre/100000;
// println(i+" = "+scl[i]);
// }
}
//method
void setAlpha(int alpha){
this.alpha = alpha;
bdraw();
}

void bdraw(){
stroke(0, alpha);
// if(steps > 0){
if(steps < 20){
pushMatrix();
translate(x, y);
// scale(scl[steps-1]);
// line(0, 0, (xEnd – x)/steps, (yEnd – y)/steps);
nowR += r;
rotate(nowR);
line(0, 0, ((xEnd – x)/20)*steps, ((yEnd – y)/20)*steps);
popMatrix();
// steps–;
steps++;
}
else line(x, y, xEnd, yEnd);

}

void disappear(){
x = y = xEnd = yEnd = 1000;
bdraw();
}
}
[/java]

FMC2nd_p43_Lines13

ksmda.tmya — Mon, 08 Jun 2009 21:09:38 +0000

p43_Lines13

イメージからアプレットを起動

Lines12を元に、線の描画を１本ずつ。
Lines12で変更したLines.pde（クラス）はそのままに、インスタンス化しているメインだけの変更。

[java]
int leftBounds = 20;
int topBounds = 20;
float x = leftBounds;
float y = topBounds;
int rightBounds = 380;
int bottomBounds = 380;
int baseMax = 20;
int randomMax = 10;
int maxLines = 1000;
int counter = 0;

int steps = 20;
boolean nextLine = false;
//int alpha = 0;

Line[] Lines;
//Ellipse[] Ellipses;

void setup(){
size(400, 400);
// frameRate(10);
colorMode(HSB, 360, 100, 100);
background(0, 0, 100);

Lines = new Line[maxLines];
// Ellipses = new Ellipse[maxLines];

strokeWeight(1);
smooth();
}

void draw(){
background(0,0,100);

if(steps > 20 && !nextLine) nextLine = true;

if(counter < maxLines && nextLine){
float maxDistance = baseMax * random(0, 1) * randomMax;
float minDistance = 2;
int direction = random(0, 1) < 0.5 ? -1 : 1;
float xEnd = x + (direction * (minDistance + ( random(0, 1) * maxDistance)) );
direction = random(0, 1) < 0.5 ? -1 : 1;
float yEnd = y + (direction * (minDistance + ( random(0, 1) * maxDistance)) );

if(xEnd < leftBounds) xEnd = leftBounds;
if(xEnd > rightBounds) xEnd = rightBounds;
if(yEnd < topBounds) yEnd = topBounds;
if(yEnd > bottomBounds) yEnd = bottomBounds;

Lines[counter] = new Line(x, y, xEnd, yEnd);

// Lines[counter].setAlpha(alpha);
// Ellipses[counter] = new Ellipse(x, y, maxDistance * .2, maxDistance * .2);

x = xEnd;
y = yEnd;

steps = 0;
nextLine = false;

counter++;
}
steps++;
// alpha++;
// if(alpha > 255) alpha = 0;

// if(counter >= 10 && counter // else if(counter > maxLines && counter < maxLines+10) {
// Lines[counter-10].disappear();
// }
// else if(counter > maxLines+10) noLoop();

if(counter < maxLines){
for(int i=0; i Lines[i].bdraw();
// Ellipses[i].bdraw();
}
}
else{
for(int i=0; i< maxLines; i++){
Lines[i].bdraw();
// Ellipses[i].bdraw();
}
}
}

void keyPressed(){
if(key == ‘r’){
background(255);
counter = 0;
Lines = new Line[maxLines];
// Ellipses = new Ellipse[maxLines];
}
if(key ==’q'){
saveFrame(“p43_Lines13.jpg”);
exit();
}
}
[/java]

FMC2nd_p42_LInes12

ksmda.tmya — Mon, 08 Jun 2009 21:02:53 +0000

p42_Lines12

イメージからアプレットを起動

Lines11を元に、線が伸びる様子を一定にする。
Lines11では加速度的に線が延びていたが、その速度を一定に変更。
コードはLine.pde（クラス）のみ変更したので、そちらだけ記述することにする。

Line.pde
[java]
public class Line{
//member
float x, y, xEnd, yEnd;
int alpha;
int steps;
float[] scl;
//constructor
Line(float x, float y, float xEnd, float yEnd){
this.x = x;
this.y = y;
this.xEnd = xEnd;
this.yEnd = yEnd;
alpha = 255;
steps = 0;
// scl = new float[steps];
// scl[0] = 0;
// for(int i=0; i < steps; i++){
// float pre = 100000/(i+1);
// scl[i] = pre/100000;
// println(i+" = "+scl[i]);
// }
}
//method
void setAlpha(int alpha){
this.alpha = alpha;
bdraw();
}

void bdraw(){
stroke(0, alpha);
// if(steps > 0){
if(steps < 20){
pushMatrix();
translate(x, y);
// scale(scl[steps-1]);
// line(0, 0, (xEnd – x)/steps, (yEnd – y)/steps);
line(0, 0, ((xEnd – x)/20)*steps, ((yEnd – y)/20)*steps);
popMatrix();
// steps–;
steps++;
}
else line(x, y, xEnd, yEnd);

}

void disappear(){
x = y = xEnd = yEnd = 1000;
bdraw();
}
}
[/java]

FMC2nd_p42_Lines11

ksmda.tmya — Mon, 08 Jun 2009 20:51:18 +0000

p42_Lines11

イメージからアプレットを起動

Lines01を元に、線を伸びていくように描画
FlashのコードではMovieClip._xscale （_yscale）を使ったプロパティの変更だけでコードの書き替えは完了であったが、ProcessingではMovieClipオブジェクトから存在しないので、Lines05などで行ったLineのクラス作成とインスタンス化、さらにそれらに対して、scale()を使ってサイズの変更と、スケール変更に伴う座標位置の調整をpushMatrix()、popMatrix()とtranslate()で行った。
僕自身が座標の扱いに慣れていないため、書いてみれば簡素なコードに気づくまで時間がかかってしまった。
今回のポイントは、Line.pde内に集約されているといっても過言でないと思う。

p42_Lines11.pde
[java]
int leftBounds = 20;
int topBounds = 20;
float x = leftBounds;
float y = topBounds;
int rightBounds = 380;
int bottomBounds = 380;
int baseMax = 20;
int randomMax = 10;
int maxLines = 1000;
int counter = 0;
//int alpha = 0;

Line[] Lines;
//Ellipse[] Ellipses;

void setup(){
size(400, 400);
frameRate(10);
colorMode(HSB, 360, 100, 100);
background(0, 0, 100);

Lines = new Line[maxLines];
// Ellipses = new Ellipse[maxLines];

strokeWeight(1);
smooth();
}

void draw(){
background(0,0,100);
if(counter < maxLines){
float maxDistance = baseMax * random(0, 1) * randomMax;
float minDistance = 2;
int direction = random(0, 1) < 0.5 ? -1 : 1;
float xEnd = x + (direction * (minDistance + ( random(0, 1) * maxDistance)) );
direction = random(0, 1) < 0.5 ? -1 : 1;
float yEnd = y + (direction * (minDistance + ( random(0, 1) * maxDistance)) );

if(xEnd < leftBounds) xEnd = leftBounds;
if(xEnd > rightBounds) xEnd = rightBounds;
if(yEnd < topBounds) yEnd = topBounds;
if(yEnd > bottomBounds) yEnd = bottomBounds;

Lines[counter] = new Line(x, y, xEnd, yEnd);

// Lines[counter].setAlpha(alpha);
// Ellipses[counter] = new Ellipse(x, y, maxDistance * .2, maxDistance * .2);

x = xEnd;
y = yEnd;

}
counter++;
// alpha++;
// if(alpha > 255) alpha = 0;

// if(counter >= 10 && counter // else if(counter > maxLines && counter < maxLines+10) {
// Lines[counter-10].disappear();
// }
// else if(counter > maxLines+10) noLoop();

if(counter < maxLines){
for(int i=0; i Lines[i].bdraw();
// Ellipses[i].bdraw();
}
}
else{
for(int i=0; i< maxLines; i++){
Lines[i].bdraw();
// Ellipses[i].bdraw();
}
}
}

void keyPressed(){
if(key == 'r'){
background(255);
counter = 0;
Lines = new Line[maxLines];
// Ellipses = new Ellipse[maxLines];
}
if(key =='q'){
saveFrame("p42_Lines11.jpg");
exit();
}
}
[/java]

Lines.pde
[java]
public class Line{
//member
float x, y, xEnd, yEnd;
int alpha;
int steps;
float[] scl;
//constructor
Line(float x, float y, float xEnd, float yEnd){
this.x = x;
this.y = y;
this.xEnd = xEnd;
this.yEnd = yEnd;
alpha = 255;
steps = 20;
scl = new float[steps];
scl[0] = 0;
for(int i=0; i < steps; i++){
float pre = 100000/(i+1);
scl[i] = pre/100000;
// println(i+" = "+scl[i]);
}
}
//method
void setAlpha(int alpha){
this.alpha = alpha;
bdraw();
}

void bdraw(){
stroke(0, alpha);
if(steps > 0){
pushMatrix();
translate(x, y);
scale(scl[steps-1]);
line(0, 0, xEnd – x, yEnd – y);
popMatrix();
steps–;
}
else
line(x, y, xEnd, yEnd);
}

void disappear(){
x = y = xEnd = yEnd = 1000;
bdraw();
}
}
[/java]

FMC2nd_p41_Lines10

ksmda.tmya — Sat, 06 Jun 2009 06:51:53 +0000

p41_Lines10

イメージからアプレットを起動

[java]
int leftBounds = 20;
int topBounds = 20;
float x = 200;
float y = 200;
int rightBounds = 380;
int bottomBounds = 380;
int baseMax = 4;
int randomMax = 4;
int maxLines = 2000;
int counter = 0;

void setup(){
size(400, 400);
colorMode(HSB, 360, 100, 100);
background(0,0,100);

strokeWeight(1);
smooth();
}

void draw(){
if(counter < maxLines){
int maxDistance = baseMax * int(random(0, 1) * randomMax);
int minDistance = 2;
int direction = random(0, 1) < 0.5 ? -1 : 1;
float xEnd = x + (cos(counter*0.1) * maxDistance );
direction = random(0, 1) < 0.5 ? -1 : 1;
float yEnd = y + (sin(counter*0.1) * maxDistance );

if(xEnd < leftBounds) xEnd = leftBounds;
if(xEnd > rightBounds) xEnd = rightBounds;
if(yEnd < topBounds) yEnd = topBounds;
if(yEnd > bottomBounds) yEnd = bottomBounds;

line(x, y, xEnd, yEnd);
x = xEnd;
y = yEnd;
counter++;
}
else noLoop();
}

void keyPressed(){
if(key == ‘r’){
loop();
background(0, 0, 100);
counter = 0;
}
if(key ==’q'){
saveFrame(“p41_Lines10.jpg”);
exit();
}
}
[/java]

FMC2nd_p41_Lines09

ksmda.tmya — Fri, 05 Jun 2009 03:25:06 +0000

p41_Lines09

イメージからアプレットを起動

描画され回転する画面と、それをマスクした表現。の再現
マスクの方法はp41_Lines08と同じです。
用意したマスク用外部ファイルはこちら。（真っ白画像。右クリックなどで「リンク先を別名で保存」などでダウンロードしてください。）
しかし、この方法ではrotate()を使って画面を回転させたとき、マスクとなる画像も含めすべて回ってしまうので、レイヤーとしてマスクの下にあるLineだけを回すには、他の処理が必要となった。
その方法は、Lineをオブジェクト化して一本一本にx,yの座標情報を持たせ、そのオブジェクト群の座標をrotate()で更新させていく。さらに一方で「見せかけマスク」となる画像を上書きするときには座標を戻して、常に同じ位置で描画するようpushMatrix()とpopMatrix()を使いました。

p41_Lines09.pde（メイン）
[java]
int leftBounds = 20 -200;
int topBounds = 20 -200;
int x = leftBounds;
int y = topBounds;
int rightBounds = 380 -200;
int bottomBounds = 380 -200;
int baseMax = 20;
int randomMax = 10;
int maxLines = 400;
int counter = 0;
int alpha = 20;

Line[] Lines;
//Ellipse[] Ellipses;

PImage myMask;

void setup(){
size(400, 400);
colorMode(HSB, 360, 100, 100);
background(0, 0, 100);

Lines = new Line[maxLines];
// Ellipses = new Ellipse[maxLines];

myMask = loadImage(“mask.png”);

strokeWeight(1);
smooth();
}

void draw(){
pushMatrix();
background(0,0,100);
if(counter < maxLines){
int maxDistance = baseMax * floor(random(0, 1) * randomMax);
int minDistance = 2;
int direction = random(0, 1) < 0.5 ? -1 : 1;
int xEnd = x + (direction * (minDistance + int( random(0, 1) * maxDistance)) );
direction = random(0, 1) < 0.5 ? -1 : 1;
int yEnd = y + (direction * (minDistance + int( random(0, 1) * maxDistance)) );

if(xEnd < leftBounds) xEnd = leftBounds;
if(xEnd > rightBounds) xEnd = rightBounds;
if(yEnd < topBounds) yEnd = topBounds;
if(yEnd > bottomBounds) yEnd = bottomBounds;

translate(200, 200);
rotate(counter/PI/360);

Lines[counter] = new Line(x, y, xEnd, yEnd);
Lines[counter].setAlpha(alpha);
Lines[counter].setWeight(maxDistance/20);
// Ellipses[counter] = new Ellipse(x, y, maxDistance * .2, maxDistance * .2);

x = xEnd;
y = yEnd;

}
else {
translate(200, 200);
rotate(counter/PI/360);
}
counter++;
// alpha++;
// if(alpha > 100) alpha = 0;

// if(counter >= 10 && counter // else if(counter > maxLines && counter < maxLines+10) {
// Lines[counter-10].disappear();
// }
// else if(counter > maxLines+10) noLoop();

if(counter < maxLines){
for(int i=0; i Lines[i].bdraw();
// Ellipses[i].bdraw();
}
}
else{
for(int i=0; i< maxLines; i++){
Lines[i].bdraw();
// Ellipses[i].bdraw();
}
}
popMatrix();
image(myMask, 0, 0);
}

void keyPressed(){
if(key == ‘r’){
background(255);
counter = 0;
Lines = new Line[maxLines];
// Ellipses = new Ellipse[maxLines];
}
if(key ==’q'){
save(“p41_Lines09.jpg”);
exit();
}

}
[/java]

Line.pde（クラス）
[java]
public class Line{
//member
int x, y, xEnd, yEnd;
color sColor;
int alpha;
int sWeight;
int counter;
//constructor
Line(int x, int y, int xEnd, int yEnd){
this.x = x;
this.y = y;
this.xEnd = xEnd;
this.yEnd = yEnd;
sColor = #006699;
alpha = 100;
sWeight = 10;
}
//method
void setAlpha(int alpha){
this.alpha = alpha;
// bdraw();
}

void setWeight(int sWeight){
this.sWeight = sWeight;
// bdraw();
}

void bdraw(){
stroke(sColor, alpha);
strokeWeight(sWeight);
line(x, y, xEnd, yEnd);
}
void disappear(){
x = y = xEnd = yEnd = 1000;
bdraw();
}
}
[/java]

FMC2nd_p41_Lines08

ksmda.tmya — Fri, 05 Jun 2009 03:22:48 +0000

p41_Lines08

イメージからアプレットを起動

マスクを利用した描画のサンプル。の再現。
実は、マスクと言っても今回は見せかけです。background()と同色の切り抜き画像を用意し、フレーム毎に描画されたものに画像を貼付けて、抜けているように見せているだけです。

最初は、コード内でマスクとなる画像を生成し、その画像をPImageのmask()を使ってマスクを実現しようとしましたが、それは断念しました。
理由は、コードでマスクとなる画像も生成しようとしたが、円形の画像保存ができず、すべて四角形になってしまう。（その方法がわからなかった。）
次に外部ファイルとして円形の画像を用意しmask()を使った方法を試みたが、フレーム毎の処理がとても重く現実的でないので断念。mask()の処理は「同じサイズの二つの画像を用意し、マスクとする画像でもう片方の画像を切り抜く」といったもののようだが、今回の場合はline()で描画した画面を一度save()で画像出力し、その画像を読み込んでマスクされる画像とするという手順を試みたため、この手順がよくない原因だと思いました。
ということで最終的に、見せたくない部分を白く塗りつぶすという「見せかけマスク」の方法をとりました。
用意したマスク用外部ファイルはこちら。（といっても真っ白なのが表示されるだけですね。万が一使うようだったら右クリックなどで「リンク先を別名で保存」などでダウンロードしてください。）
[java]
int leftBounds = 20;
int topBounds = 20;
int x = leftBounds;
int y = topBounds;
int rightBounds = 380;
int bottomBounds = 380;
int baseMax = 20;
int randomMax = 10;
int maxLines = 200;
int counter = 0;

PImage myImage, myMask;

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

myMask = loadImage(“mask.png”);

}

void draw(){
if(counter < maxLines){
int maxDistance = baseMax * int(random(0, 1) * randomMax);
int minDistance = 2;
int direction = random(0, 1) < 0.5 ? -1 : 1;
int xEnd = x + (direction * (minDistance + int( random(0, 1) * maxDistance)) );
direction = random(0, 1) < 0.5 ? -1 : 1;
int yEnd = y + (direction * (minDistance + int( random(0, 1) * maxDistance)) );

if(xEnd < leftBounds) xEnd = leftBounds;
if(xEnd > rightBounds) xEnd = rightBounds;
if(yEnd < topBounds) yEnd = topBounds;
if(yEnd > bottomBounds) yEnd = bottomBounds;

stroke(#006699, 20);
strokeWeight(maxDistance/20);
line(x, y, xEnd, yEnd);
x = xEnd;
y = yEnd;

image(myMask, 0, 0);

counter++;
}
// if(counter == maxLines){
// save(“img.png”);
// background(255);
// myImage = loadImage(“img.png”);
// myImage.mask(myMask);
// image(myImage, 0, 0);
// noLoop();
// }
}

void keyPressed(){
if(key == ‘r’){
background(255);
counter = 0;
}
if(key ==’q'){
save(“p41_Lines08.jpg”);
exit();
}
}
[/java]