Point Frame
Processingで作った作品です。
マウスを動かすと、マウスの方向に回転させたり、近づけたり、遠ざけたりできます。
この動画では、アルファベットがランダムに表示され、バックのカラーも方向によって変わっています。(Wikipedia YUV 参照)
自分の好きな文字や画像を設定することで、幻想的なビデオを作成することができます。
Prossecingのソースコードは、こちらです。☟
PImage data;
PGraphics pg;
PFont font;
color rgb(float y, float cr, float cb) {
if(cr > 128)cr = 128;
if(cr < -128)cr = -128;
if(cb > 128)cb = 128;
if(cb < -128)cb = -128;
float[] o = {0, 0, 0};
o[0] = y+(cr*1.402);
o[1] = y-(cr*0.714)-(cb*0.344);
o[2] = y+(cb*1.772);
return color(o[0], o[1], o[2]);
}
float sn;
float[] ro(float x, float y, float xc, float yc, float theta) {
float[] out = {0, 0};
y = -y;
yc = -yc; // 数学座標と同じ様にするためにy座標値を反転
out[0] = (x - xc) * cos(theta) - (y - yc) * sin(theta) + xc;
out[1] = -1.0 * ( (x - xc) * sin(theta) + (y - yc) * cos(theta) + yc );
return out;
}
void setup() {
pg = createGraphics(128, 128);
font = loadFont("font.vlw");
size(512, 512);
frameRate(60);
noStroke();
noSmooth();
noiseDetail(10);
//strokeWeight(4);
//stroke(255);
}
float s;
float p;
char t = 'A';
int g = 130;
int xx = -g;
void draw() {
pg.beginDraw();
pg.textFont(font, 180);
pg.background(rgb(210,(noise(sn)*512)-256,(noise(sn+100)*512)-256));
sn += 0.04;
sn = p;
pg.fill(255);
pg.text(t, 15+xx, 130);
xx += 4;
if (xx >= g) {
t = char(int(random('A', 'Z')));
xx = -g;
}
pg.endDraw();
background(0);
//image(pg,0,0);
for (int y = 0; y < 128; y++) {
for (int x = 0; x < 128; x++) {
//if (red(pg.get(x, y)) < 128) {
float st = s;
fill(pg.get(x, y));
//stroke(0, 0, 255);
float[] a = ro((x-64)*s+256, (y-64)*s+256, 256, 256, p);
float ss = s*2.3;
if(ss < 1)ss = 1;
for (int i = 0; i < 1; i++) {
a = ro((x-64)*s+256, (y-64)*s+256, 256, 256, p);
rect(int(a[0])-(ss/2), int(a[1])-(ss/2), ss, ss);
s *= 1.01;
}
s = st;
//}
}
}
s = dist(mouseX, mouseY, 256, 256)/64;
p = atan2(mouseX-256, mouseY-256)+PI;
}
プログラムをいじって、好きな画像を使って、素敵なスライドショーを作ってみてください!