processing « Lab.

‘processing’ タグのついている投稿

FMC2nd_p56_Blobs01

2009年6月21日日曜日

p56_Blobs01

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

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

続きを読む or ここで読む »

隠す »

クラスをファイルで分けるのを止めてみました。いまいちどちらが良いのが判断のつかないプログラムです。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]

« 隠す

タグ:processing
カテゴリー: programming | コメントはまだありません »

FMC2nd_p43_Lines16

2009年6月9日火曜日

p43_Lines16

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

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

続きを読む or ここで読む »

隠す »

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]

« 隠す

タグ:processing
カテゴリー: programming | コメントはまだありません »

FMC2nd_p43_Lines14

2009年6月9日火曜日

p43_Lines14

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

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

続きを読む or ここで読む »

タグ:processing
カテゴリー: programming | コメントはまだありません »

FMC2nd_p43_Lines13

2009年6月9日火曜日

p43_Lines13

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

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

続きを読む or ここで読む »

隠す »

[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]

« 隠す

タグ:processing
カテゴリー: programming | コメントはまだありません »

FMC2nd_p42_LInes12

2009年6月9日火曜日

p42_Lines12

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

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

続きを読む or ここで読む »

タグ:processing
カテゴリー: programming | コメントはまだありません »

FMC2nd_p42_Lines11

2009年6月9日火曜日

p42_Lines11

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

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

続きを読む or ここで読む »

隠す »

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]

« 隠す

タグ:processing
カテゴリー: programming | コメントはまだありません »

FMC2nd_p41_Lines10

2009年6月6日土曜日

p41_Lines10

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

続きを読む or ここで読む »

タグ:processing
カテゴリー: programming | コメントはまだありません »

FMC2nd_p41_Lines09

2009年6月5日金曜日

p41_Lines09

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

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

続きを読む or ここで読む »

隠す »

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]

« 隠す

タグ:processing
カテゴリー: programming | コメントはまだありません »

FMC2nd_p41_Lines08

2009年6月5日金曜日

p41_Lines08

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

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

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

続きを読む or ここで読む »

タグ:processing
カテゴリー: programming | コメントはまだありません »

WordPressとProcessingアプレット

2009年6月3日水曜日

FMC2ndでのコードをProcessingで再現するにあたって、再現したのをWordPressでの記事にアップしていこうと考えたのですが、それがなかなかどうして苦労したので、その経緯と結局どうしたのかをメモ。

まず、Processingでコマンド+Eをするとappletフォルダが出力されて、これをアップロードすればウェブ上でProcessingで書いたコードを表現できるのだが、WordPressは記事を書くにあたって基本的にhtmlファイルを編集することはほとんどない。
また、ファイルのアップロードの機能を使って、出力された***.jarファイルはアップロードできる。

しかし、記事を書く際に、出力されるindex.htmlファイルからコードをコピペをしたりしなくてはならない。記事の編集画面で書いたことがWordPressのシステム内で整形され記事として読めるのだが、その整形されるルールがよくわからないこともあって、手こずった。
もうすでに記事を消してしまったのだが、appletのサイズが200×200(px)では記事内で表示することができたのだが、400×400のappletはどうしても切れたりしてしまってうまく表示することができなかった。

結局、記事内でappletを表示することをやめ、WordPressのシステムが関与しないところに手動でフォルダを作成し、そこへリンクさせる方向にしました。

続きを読む or ここで読む »

タグ:processing, wordpress
カテゴリー: wordpress | コメントはまだありません »

Lab.

‘processing’ タグのついている投稿

FMC2nd_p56_Blobs01

FMC2nd_p43_Lines16

FMC2nd_p43_Lines14

FMC2nd_p43_Lines13

FMC2nd_p42_LInes12

FMC2nd_p42_Lines11

FMC2nd_p41_Lines10

FMC2nd_p41_Lines09

FMC2nd_p41_Lines08

WordPressとProcessingアプレット

Contents

ksmda.tmya

カテゴリー