Processingで作ってみた①轍編

まずは見てください

来る2015年2月28日(土)に、僕が所属するアカペラシンガーズK.O.E.4年生による卒業コンサートが行われます。僕も出演させていただきます。

タイトルは"轍"。

というわけで、それを記念してこのようなものを作成してみました。

まずは御覧ください→別タブで開きます

色んな色の線(轍)が出てきて、文字を作っていきます。

それがだんだん白くなっていき…

じゃん！blog.koe11.netへとリンクされました！

本当は1月1日11時11分にこのページがkoe11.netのトップページとなって公開されるはずでしたが、僕含むWeb担当2名が盛大に寝坊したため、現時点でまだ公開されていません。勿論、我々は同期に誠心誠意謝罪いたしました。謝罪記事はこちら。

そんな罪滅ぼしも兼ねて、ソースコードを公開しちゃいます。自分の備忘録を兼ねていることは秘密です。

簡単なフロー&ソースコード

大まかな作業フローは以下のとおりです。

1. 表示ウィンドウの横幅、縦幅を取得
   1. 横幅、縦幅を比較し、短い方の幅に合わせて3つの大きさの画像から適当なものをチョイス
   2. 画像はこちらの画像のように、文字部だけ透明なpngを用意。
2. 円を配列で20本生成
   1. 円の初期位置は、以下画像赤枠部から生成される。
   2. 円の初期位置、大きさ、スピード、色などをランダム関数を用いて生成する。
   3. 円は軌道を残しつつ移動する。結果、軌道のように見える。
   4. 円は画像の四辺に来た際に反射する。
3. 円の上に画像を配置。画像で隠し切れない部分は黒枠を作り(flameMake())、画像透明部しか円軌道を見せないようにする。
4. 時間によって、フェーズを3段階に分ける。
   1. phase0 1本だけ軌道を描く。
   2. phase1 20本の軌道を描く。
   3. phase2 四辺での反射設定を無効化する。その後、円の速度を0にする。
   4. fade 透明度2くらい(忘れた)の白色Rectを描画する。
5. 一定時間経つ or クリックするとblog.koe11.netへジャンプする。

ざっとこんな感じです。

では次にソースコードです。じゃん。

[java]
/*
*cha1ra.com
*2014.12.31
*/

PImage img;
int time;
float[][] dots;
int sizeImg;
int imgX,imgY;

void setup() {

//size(600, 800);
size(window.innerWidth, window.innerHeight);
if(width<height){
if(width<400){
img = loadImage("http://blog.cha1ra.com/etc/wadachi/src/wadachi-ss.png");
sizeImg = 200;
}else if(width<600){
img = loadImage("http://blog.cha1ra.com/etc/wadachi/src/wadachi-s.png");
sizeImg = 400;
}else if(width<1000){
img = loadImage("http://blog.cha1ra.com/etc/wadachi/src/wadachi-m.png");
sizeImg = 600;
}else{
img = loadImage("http://blog.cha1ra.com/etc/wadachi/src/wadachi-l.png");
sizeImg = 1000;
}
}else{
if(height<600){
img = loadImage("http://blog.cha1ra.com/etc/wadachi/src/wadachi-s.png");
sizeImg = 400;
}else if(height<1000){
img = loadImage("http://blog.cha1ra.com/etc/wadachi/src/wadachi-m.png");
sizeImg = 600;
}else{
img = loadImage("http://blog.cha1ra.com/etc/wadachi/src/wadachi-l.png");
sizeImg = 1000;
}
}

time = 0;
fill(0);
rect(0, 0, width, height);
imgX = (width/2) - (sizeImg/2);
imgY = (height/2) - (sizeImg/2);

dots = new float[20][8];//x,y,speed
for (int i=0; i<dots.length; i++) {
if(i==0){
dots[i][0] = imgX;//x
dots[i][1] = imgY;//y
}else if(i<10){
dots[i][0] = random(imgX,imgX+2);//x
dots[i][1] = random(imgY,imgY+sizeImg);//y
}else{
dots[i][0] = random(imgX+sizeImg-2,imgX+sizeImg);//x
dots[i][1] = random(imgY,imgY+sizeImg);//y
}

if(i==0){
dots[i][2] = 3;
dots[i][3] = 3;
}else{
dots[i][2] = random(1, 5);//speedX
dots[i][3] = random(1, 5);//speedY
}
dots[i][4] = random(255);//R
dots[i][5] = random(255);//G
dots[i][6] = random(255);//B
dots[i][7] = random(20, 80);//sizeImg
}
noStroke();
}

void draw() {
if (60<time && time<100) {
phase0();
} else if (time>=100 &&time < 500) {
phase1();
} else if (time > 600) {
phase2();
}
imageMode(CENTER);
image(img, width/2, height/2);
flameMake();
time++;
}

void phase0() {
if (dots[0][0]+dots[0][2]<=imgX || dots[0][0]+dots[0][2]>=imgX+sizeImg) {
dots[0][2] *= -1;
dots[0][0] += dots[0][2];
} else {
dots[0][0] += dots[0][2];
}
if (dots[0][1]+dots[0][3]<=imgY || dots[0][1]+dots[0][3]>=imgY+sizeImg) {
dots[0][3] *= -1;
dots[0][1] += dots[0][3];
} else {
dots[0][1] += dots[0][3];
}
fill(dots[0][4], dots[0][5], dots[0][6]);
ellipse(dots[0][0], dots[0][1], dots[0][7], dots[0][7]);
}

void phase1() {
for (int i=0; i<dots.length; i++) {

if (time<400) {
if (dots[i][0]+dots[i][2]<=imgX || dots[i][0]+dots[i][2]>=imgX+sizeImg) {
dots[i][2] *= -1;
dots[i][0] += dots[i][2];
} else {
dots[i][0] += dots[i][2];
}
if (dots[i][1]+dots[i][3]<=imgY || dots[i][1]+dots[i][3]>=imgY+sizeImg) {
dots[i][3] *= -1;
dots[i][1] += dots[i][3];
} else {
dots[i][1] += dots[i][3];
}
}else{
dots[i][0] += dots[i][2];
dots[i][1] += dots[i][3];
}

fill(dots[i][4], dots[i][5], dots[i][6]);
ellipse(dots[i][0], dots[i][1], dots[i][7], dots[i][7]);
}
}

void phase2() {
if (time>700) {
fill(255, 255, 255, 10);
} else {
fill(255, 255, 255, 2);
}
rect(0, 0, width, height);
if(time == 760){
link("http://blog.koe11.net");
}
}

void flameMake(){
fill(0);
rect(0,0,imgX,height);
rect(width-imgX,0,imgX,height);
rect(0,0,width,imgY);
rect(0,height-imgY,width,imgY);
}
void mouseClicked() {
link("http://blog.koe11.net");
}
[/java]

ずいぶんと長くなってしまいました…。多分探せばもっと効率よい書き方が有ると思います。画像やlink()のURLを変更してお楽しみください。ちなみに今回、画像サイズは4種類(200*200、400*400、600*600、1000*1000)用意しました。

注意点ですが、上記プログラムをProcessing上で動かす際には、void setup()内のsize指定の部分をコメントアウトしてあるほうに変更してください。window.innerWidth、window.innnerHeightはブラウザのウィンドウサイズを取得する記述ですので、エラーが返されます。

[java]
//size(600, 800);
size(window.innerWidth, window.innerHeight);
[/java]

この部分ですね。よろしくお願いします。

卒業コンサート"轍"、いよいよ本格始動します。是非楽しみにしていてください！

宣伝に、卒コン宣伝動画のURLを貼ってお別れしたいと思います。これも僕が作ったんだよ♡

ではでは、よい1年をお過ごし下さい！