#つぶやきProcessing 2019年6月まとめ

2019年7月14日2019年8月19日

動画出力ができたので、動くものを創っていました。

動画の出力は、Processingの「ツール」→「ムービーメーカー」の機能で生成した.movファイルを、めむくろ様の「Twitter用に動画変換するやつ」で.mp4に変換して使っております。「 Twitter用に動画変換するやつ」はファイルのD&Dだけで一発で動画変換できる最高のツールでした。

float d;
void draw(){
background(0);
noStroke();
d += 0.05;
for(int i = 0; i < 20; i++){
float o = i / (2.11) + d;
float s = sin(d + o) * 10;
ellipse(cos(d + o * 1.1) * (20 + i) + 50, sin(d + o / 1.1) * (40 – i) + 50, s, s);
}
}#つぶやきProcessing pic.twitter.com/EO8lppw0Uh
— はぅ君 (@Hau_kun) June 4, 2019

とりあえず動かしてみたらよいものができた。
cos()とsin()の引数をずらすとリサジュー曲線になって表情が豊かになる。

float t = 0;
void draw(){
colorMode(HSB);
background(0);
t += 0.3;
for(int y = 0; y < 10; y++){
for(int x = 0; x < 10; x++){
fill((x + y * t) % 255, 192, 255);
float w = (x + y + t) % 10;
rect(x * 10, y * 10, w, w);
}
}
}#つぶやきProcessing pic.twitter.com/sRqNO8sz5A
— はぅ君 (@Hau_kun) June 5, 2019

colorMode(HSB)はお手軽に見栄えを綺麗にできるので、各所で使っております。

float p1, p2, a;
void draw(){
background(0);
noFill();
stroke(255);
strokeWeight(3);
a += 0.002;
for(int i = 0; i < 15; i++){
p1 = sin(a * i – i) * TWO_PI;
p2 = cos(a * i + i) * TWO_PI;
arc(50, 50, i * 7, i * 7, p1, p1 + p2);
}
}#つぶやきProcessing pic.twitter.com/9ITlRUAIs7
— はぅ君 (@Hau_kun) June 6, 2019

もう少しサイバーチックなものを作りたかったのだけど、文字数が足りなくて断念。

float t, a, o;
void draw(){
background(0);
t += 0.096;
for(int i = 0; i < 10; i++){
o += abs(sin(t)) * 0.0011;
for(a = 0; a < TWO_PI; a += PI / 6){
ellipse(cos(o * i + a) * i * 5 + 50, sin(o * i + a) * i * 5 + 50, i, i);
}
}
}#つぶやきProcessing pic.twitter.com/4GQLqVSvVV
— はぅ君 (@Hau_kun) June 8, 2019

ワンクッション（上記では変数o）置くことで、静・動を表現できる。
sin(t)をそのまま使うと、動きっぱなしになるので。

float t;
void draw(){
clear();
noStroke();
rectMode(CENTER);
colorMode(HSB);
t += 0.08;
for(int i = 0; i < 100; i++){
fill((i * t) % 255, 192, 255);
rect(i % 10 * 10 + 5, (i / 10) * 10 + 5, noise(t, i) * 14, noise(t, i, 10) * 14);
}
}#つぶやきProcessing pic.twitter.com/frUG57Fcc7
— はぅ君 (@Hau_kun) June 8, 2019

noise()を試してみる。
パーティクルやオブジェクトのパラメーターを保存して扱うことは、文字数の関係で非現実的なので、noise()で各パラメーターの状態を作り出すしかない。

float t;
void draw(){
colorMode(HSB);
noStroke();
t += 0.01;
fill(0, 4);
rect(0, 0, 100, 100);
for(int x = 0; x < 100; x+= 10){
fill((x * 2.5 + t * 10) % 255, 128, 255);
rect(x, sin(t + x * 0.5) * 100, 10, 100);
}
}#つぶやきProcessing pic.twitter.com/3ZdWOVXSEb
— はぅ君 (@Hau_kun) June 10, 2019

グラデーションは全体に薄い黒(fill(0, 4))をかけることで表現。
ゆったりと動く感じが心地よくて、こういうものはずっと見ていられる。

void draw(){
colorMode(HSB);
loadPixels();
for(int i = 0; i < 10000; i++){
color c = pixels[i];
stroke((hue(c) + 2) % 255, 160, 255);
point(i % 100, i / 100);
}
rect(random(100), random(100), 10, 10);
}#つぶやきProcessing pic.twitter.com/LMZeoBdYTv
— はぅ君 (@Hau_kun) June 11, 2019

前述したとおり、オブジェクトのパラメータを持てないため、ピクセル操作でオブジェクトの状態を管理しているかのような表現を行う。

float x = 20, y = 20, r, c;
void draw(){
fill(0, 4);
rect(0, 0, 100, 100);
colorMode(HSB);
c++;
stroke(c % 255, 128, 255);
line(x, y, 100 – x, 100 – y);
line(x, 100 – y, 100 – x, y);
x += cos(r * 1.13);
y += sin(r * 1.31);
r += 0.03;
}#つぶやきProcessing pic.twitter.com/YsIwN8WQp6
— はぅ君 (@Hau_kun) June 13, 2019

線の軌跡系。
線の軌跡は、それだけでかなり多くの表現を作ることができる。

float r, t;
void draw(){
colorMode(HSB);
clear();
t += 0.1;
for(r = 0; r < TWO_PI; r += PI / 360){
stroke(r / TWO_PI * 255, 192, 255);
point(cos(r + t) * (40 + tan(r * 1.9 + t) * 10) + 50, sin(r + t) * (40 + tan(r * 2.1 + t) * 10) + 50);
}
}#つぶやきProcessing pic.twitter.com/dXWvl4z3wA
— はぅ君 (@Hau_kun) June 15, 2019

三角関数はcos()とsin()を主に使うのだけれど、tan()が変化を加えるスパイスとして結構使えそうということが分かった。

float i, d, t;
void setup(){
background(0);
}
void draw(){
colorMode(HSB);
stroke(t * 20 % 255, 255, 255, 64);
t += 0.02;
d = noise(t) * 50;
for(i = 0; i < TWO_PI; i += PI / 6){
point(cos(i + t) * d + 50, sin(i + t) * d + 50);
}
}#つぶやきProcessing pic.twitter.com/eMW3DJUqgc
— はぅ君 (@Hau_kun) June 15, 2019

点の軌跡と回転系。
これも無数に表現が創れる王道の技術。

float x, y, d, t;
void setup(){
colorMode(HSB);
clear();
}
void draw(){
translate(50, 50);
stroke(t % 255, 192, 255, 64);
t += 0.4;
d = noise(t) * 20;
x += sin(d);
y += cos(d);
point(x, y);
point(-x, -y);
point(-x, y);
point(x, -y);
}#つぶやきProcessing pic.twitter.com/PSr4EbDwiX
— はぅ君 (@Hau_kun) June 16, 2019

点の軌跡を鏡像反転して、ランダムウォークさせたもの。
これもゴシック風の模様が創れて好きなもの。

float t,r;
void draw(){
clear();
colorMode(HSB);
t+=0.05;
beginShape(TRIANGLE_FAN);
for (r=0;r<=TAU;r+=PI/96) {
color c=color((t+r)*30%255,192,255);
fill(c);
stroke(c);
vertex(cos(r)*noise(t+r)*80+50,sin(r)*noise(t+r,9)*80+50);
}
}#つぶやきProcessing pic.twitter.com/WWu2ARCRlm
— はぅ君 (@Hau_kun) June 20, 2019

vertex()を使って細かい角度で円を描いたら、布みたいに滑らかに見えたもの。

int[] p = new int[3];
void draw(){
fill(0, 12);
rect(0, 0, 100, 100);
fill(0, 255, 0);
scale(-1, 1);
for(int i = 0; i < 3; i++){
p[i] += p[i] > 110 ? -random(99) : 11;
text(char((int)random(93) + 33), -p[i] % 11 * 10, p[i] / 11 * 10);
}
}#つぶやきProcessing pic.twitter.com/xgpsPUz08C
— はぅ君 (@Hau_kun) June 21, 2019

マトリックス。定番。
なんとか文字数が収まって満足でした。

float r, s, t;
void draw(){
clear();
stroke(255);
t += 0.01;
translate(50, 50);
for(r = 0; r < TAU; r += PI / 3){
for(s = 0; s < TAU; s += PI / 5){
line(cos(r + t) * 50, sin(r + t) * 50, cos(s – t * 2) * 25, sin(s + t) * 25);
}
}
}#つぶやきProcessing pic.twitter.com/ZTEECnkiC0
— はぅ君 (@Hau_kun) June 24, 2019

適当に線をつないだだけだけど、脳は立体っぽく視ようとしてしまうもの。

float t;
void draw(){
t += 0.008;
for(int i = 0; i < 2200; i += 10){
boolean f = (i / 110) % 2 == 0;
fill(noise(i, t) * 128 + 64, noise(i, t, 10) * 48 + 16, noise(i, t, 20) * 32 + 16);
rect(i % 110 – (f ? 5 : 0), i / 110 * 5, 10, 5);
}
}#つぶやきProcessing pic.twitter.com/esgtNjMLjB
— はぅ君 (@Hau_kun) June 25, 2019

レンガ模様。文字数の関係でfor()の1ループでレンガを2行分表現する必要があり、ちょっと大変だった。

float t, r;
void draw(){
clear();
colorMode(HSB);
t += 0.01;
for(int i = 0; i < 1210; i += 10){
r = noise(i, t) * TAU;
fill(noise(t, i) * 255, 255, 255);
arc(i % 110 + ((i / 110) % 2 == 0 ? -5 : 0), i / 110 * 10, 10, 10, r, r + r);
}
}#つぶやきProcessing pic.twitter.com/7HZ0j0ez5z
— はぅ君 (@Hau_kun) June 26, 2019

arc()の状態をnoise()で持たせてみたもの。

float t, i, x, y;
void draw(){
background(255);
noFill();
t += 0.05;
translate(50, 50);
for(i = 0; i < TAU; i += PI / 24){
x = cos(i);
y = sin(i);
bezier(x, y, y, x, noise(t * x) * 90 – 45, noise(t * y) * 90 – 45, x * 45, y * 45);
}
}#つぶやきProcessing pic.twitter.com/WeRN6tb4Fn
— はぅ君 (@Hau_kun) June 27, 2019

bezier()の曲線は意外性が生まれるので面白い。

float i, t, x, y;
void draw(){
background(255);
noFill();
t += 0.05;
for(i = 0; i < 100; i += 5){
x = cos(t) * 40 + 50;
y = tan(t) * 40 + 50;
bezier(i, 0, x, y, x, y, 100, i + 5);
bezier(0, i, x, y, x, y, i + 5, 100);
}
}#つぶやきProcessing pic.twitter.com/dlC9nQIPJJ
— はぅ君 (@Hau_kun) June 28, 2019

周囲からbezier()しているだけで、コントロールポイントを動かしている。
動きにtan()を使っていい感じにループが創れた。

void draw(){
for(int i = 0; i < 5; i++){
PImage g = loadImage("https://t.co/wpJ7zfltHP", "jpg");
g.resize(100, 100);
copy(g, 0, i * 20, 100, 20, 0, i * 20, 100, 20);
}
}#つぶやきProcessing pic.twitter.com/SN1qOezK1E
— はぅ君 (@Hau_kun) June 29, 2019

https://thispersondoesnotexist.com/ を使って何かできないかと考えて創ってみたもの。

float t, r;
void draw(){
clear();
noFill();
blendMode(ADD);
t += 0.1;
stroke(128, 128, 255, 64);
translate(50, 50);
for(r = 0; r < TAU; r += PI / 50){
bezier(0, 0, 0, 0, cos(r) * 40, sin(-r) * 40, cos(r – t) * 50, sin(r + t) * 50);
}
}#つぶやきProcessing pic.twitter.com/n2ACG2n15o
— はぅ君 (@Hau_kun) June 30, 2019

円を描く際には、通常cos()、sin()にそれぞれ同じ角度を入れるけれど、違うものを入れることで円とは異なるものを創ってみた。

コメント一覧（1件）

#pchj03 の 30-min Coding Challenge に参加しました | はぅ君プロジェクト より:

2020年9月1日 00:26

[…] #つぶやきProcessingを始めたばかりの時は、この文字数で一体何ができるのかという点で、いろいろと手探りでしたが、毎日進めていく中である程度のパターンやルール、数式などが自分の中に蓄積されていき、それが武器となってパラメーター調整や深堀に使えていけるようになったのが、活動を続けてきてよかったなと思っている点の一つです。 […]

返信

コメントするコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

#つぶやきProcessing 2019年6月まとめ

関連

コメント

コメント一覧 （1件）

コメントする コメントをキャンセル

コメント一覧（1件）

コメントするコメントをキャンセル