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

2019年8月3日2019年8月19日

Processingでは3Dを扱うことができるため、7月は3Dの作品も作ってみました。

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()の引数をちょっと変えてみることで、円とはまた違ったものができる

float t;
char a;
void draw(){
clear();
textSize(99);
a = t > PI ? (char)random(33, 126) : a;
t += t > PI ? -t : 0.1;
clip(0, 0, 50, 100);
text(a, 40 – sin(t) * 35, 80);
clip(50, 0, 50, 100);
scale(-1, -1);
text(a, -60 – sin(t) * 35, -20);
}#つぶやきProcessing pic.twitter.com/o8z9hnig6T
— はぅ君 (@Hau_kun) July 1, 2019

clip()を何か使えないかなと思い、文字を反転して重ねてみた

float t;
void draw(){
clear();
textSize(99);
t += 0.05;
fill(255, 255, 0);
for(int i = 0; i < 100; i+= 10){
rect(sin(t + PI / 2) * 100 * (i / 10 % 2 == 0 ? 1 : -1), i, 100, 10);
}
fill(0);
text((char)((t / PI) % 10 + '0'), 20, 85);
}#つぶやきProcessing pic.twitter.com/MX3F4gfNw7
— はぅ君 (@Hau_kun) July 4, 2019

カウントアップ。rect()の処理が1行で書けたことで実現できた。

float[] d = new float[999];
void draw(){
clear();
blendMode(ADD);
noStroke();
fill(255, 8);
for (int i = 0; i < 999; i++){
d[i] += d[i] > 80 ? -d[i] : noise(i);
ellipse(cos(i / PI) * d[i] + 50, sin(i / PI) * d[i] + 50, 10, 10);
}
}#つぶやきProcessing pic.twitter.com/N75EHK3xcN
— はぅ君 (@Hau_kun) July 6, 2019

文字数的にパーティクルを扱うのは無理かと思っていたけど、工夫次第で何とかできることが分かった。

float t, c, i;
void draw(){
clear();
colorMode(HSB);
c = t > PI ? random(255) : c;
t += t > PI ? -t : 0.1;
for(i = 0; i < 3; i++){
fill((c + i * 85) % 255, 192, 192);
rect(sin(t + PI / 2) * 99 * (i % 2 == 0 ? 1 : – 1), i * 34, 99, 34);
}
}#つぶやきProcessing pic.twitter.com/sE8mFlL0TC
— はぅ君 (@Hau_kun) July 6, 2019

調和のある3色（色相的に約120度の位置の色）を表示するモノ。

background(0);
colorMode(HSB);
noStroke();
for(int i = 0; i < 360; i += 30){
fill(i / 360.0 * 255, 255, 255);
ellipse(cos(radians(i)) * 40 + 50, sin(radians(i)) * 40 + 50, 20, 20);
}#つぶやきProcessing pic.twitter.com/LNXKu7DAJW
— はぅ君 (@Hau_kun) July 6, 2019

みんな大好き色相環。

float r, d, t;
void draw(){
clear();
colorMode(HSB);
noStroke();
t += 0.02;
for(r = 0; r < TAU * 10; r += 0.1){
d = sin(r + t) * 50;
fill(r * 9 % 255, cos(t) * 255, 255);
ellipse(cos(r * 1.1) * d + 50, sin(r * 1.1) * d + 50, 3, 3);
}
}#つぶやきProcessing pic.twitter.com/208E4wH5lr
— はぅ君 (@Hau_kun) July 7, 2019

色がつくと部分構造が見える。色が消えると全体構造が見える。

float r, d, t, i, a;
void draw(){
noStroke();
fill(0, 24);
r += 0.1;
d = t < 0 ? random(80) : d – noise(t);
t -= t < 0 ? -random(10) : 0.1;
for(i = 0; i < 4; i++){
a = r + PI / 2 * i;
ellipse(cos(a) * d + 50, sin(a) * d + 50, t, t);
}
}#つぶやきProcessing pic.twitter.com/u0iW85vogn
— はぅ君 (@Hau_kun) July 8, 2019

水墨アートみたいなモノ。

float t , r;
void draw(){
clear();
colorMode(HSB);
t += 0.02;
translate(50, 50);
for(r = 0; r < TAU; r += PI / 4){
fill((r + t) * 50 % 255, 255, 255);
triangle(0, 0, cos(r + t) * 50, sin(r + t) * 50, cos(r – t) * 30, sin(r – t) * 30);
}
}#つぶやきProcessing pic.twitter.com/h0yvmLkU4A
— はぅ君 (@Hau_kun) July 10, 2019

triangle()を使って何か描いてみたかったので創ったもの。

float t, r;
void draw(){
clear();
rectMode(3);
colorMode(HSB);
noStroke();
t += 0.01;
for(int i = 0; i < 100; i++){
r = pow(noise(i, t), 2) * 10;
fill((i + t * 50) % 255, 255, 255);
rect(i % 10 * 10 + 5, i / 10 * 10 + 5, r, r);
}
}#つぶやきProcessing pic.twitter.com/H3AO6Xlkmv
— はぅ君 (@Hau_kun) July 13, 2019

pow()を使うこと、緩急がついた動きになる。

float x, h, t;
void draw(){
clear();
colorMode(HSB);
noStroke();
t += 0.02;
for(x = 0; x <= 100; x += 4){
h = noise(x / 50 + t) * 100;
fill((x + t * 9 + h) % 255, 255, 255, 192);
rect(x, h, 6, 100 – h);
rect(100 – x, 0, 6, h);
}
}#つぶやきProcessing pic.twitter.com/0exkTqpXFy
— はぅ君 (@Hau_kun) July 14, 2019

noise()の波。

float r, s;
void setup(){
background(0);
}
void draw(){
noFill();
stroke(160, 192, 255, 8);
r += 0.071;
s += 0.031;
translate(50, 50);
bezier(cos(r) * 10, sin(r) * 10, 0, 0, cos(r + s) * 50, sin(r + s) * 50, cos(s) * 80, sin(s) * 80);
}#つぶやきProcessing pic.twitter.com/xXrm2Rk7IL
— はぅ君 (@Hau_kun) July 15, 2019

薄いbezier()を何層も重ねることで作るグラフィック。

float t, r;
void draw(){
clear();
blendMode(2);
colorMode(3);
t += 0.02;
for(r = 0; r < TAU; r += PI / 8){
fill((r + t) * 99 % 255, 255, 255, 64);
ellipse(cos(r) * cos(t) * 30 + 50, sin(r) * cos(t) * 30 + 50, sin(t) * 40, sin(t) * 40);
}
}#つぶやきProcessing pic.twitter.com/kckXN4I2iq
— はぅ君 (@Hau_kun) July 16, 2019

加算合成。文字数が足りなくて、苦肉の策でblendMode(2)とかcolorMode(3)を使いました。
ADD = 2で、HSB = 3なのでね。

float[] p = new float[100];
float t;
void draw(){
clear();
noFill();
stroke(255, 64);
strokeWeight(3);
t += .1;
for(int i = 0; i < 100; i++){
p[i] = noise(i , t) > .5 ? 0 : p[i];
ellipse(i % 10 * 10, i / 10 * 10, p[i], p[i]++);
}
}#つぶやきProcessing pic.twitter.com/M7BuRzmJwY
— はぅ君 (@Hau_kun) July 18, 2019

雨模様。

float t;
void settings(){
size(100, 100, P3D);
}
void draw(){
clear();
for(int i = 0; i < 140; i++){
pushMatrix();
translate(i % 14 * 15, i / 14 * 15, cos(i + t) * 10);
rotateY(i + (t += .0005));
box(10, 10, 10);
popMatrix();
}
}#つぶやきProcessing pic.twitter.com/gohC4Xnjmf
— はぅ君 (@Hau_kun) July 19, 2019

3Dを開始。

float t, r;
void setup(){
size(400, 400, P3D);
}
void draw(){
clear();
for(r = 0; r < TAU * 9; r+= PI / 8){
translate(cos(r + t) * 50, sin(r + t) * 50, -500 + r * 10 + tan(t) * 100);
rotateY(t += .0001);
box(12);
resetMatrix();
}
}#つぶやきProcessing pic.twitter.com/BtJA2rfOE6
— はぅ君 (@Hau_kun) July 20, 2019

tan()を活用したループ動画。

float t, i, r;
void setup(){
size(400, 400, P3D);
}
void draw(){
clear();
for(i = -100; i <= 100; i += 5){
translate(0, i, -200);
r = sin((t += .0005) + i / 100);
rotateY(r * PI + t);
box(105 – abs(i), 5, 5);
resetMatrix();
}
}#つぶやきProcessing pic.twitter.com/zSZnfW9F3h
— はぅ君 (@Hau_kun) July 20, 2019

うねうね具合が観ていて気持ち良い。

Lightを追加するとこんな感じ。
3Dは光の使い方で全然変わりますねぇ。#Processing pic.twitter.com/nUSqYCtt5h
— はぅ君 (@Hau_kun) July 20, 2019

おまけ：光を追加するとより綺麗になる。

float t, a;
void setup(){
size(400, 400, P3D);
}
void draw(){
clear();
noStroke();
resetMatrix();
pointLight(255, 255, 255, 100, 100, 100);
translate(0, 0, -200);
rotateZ(t += (a += .001));
scale(10, .5, .5);
sphere(10);
}#つぶやきProcessing pic.twitter.com/wXZcRK3Ur8
— はぅ君 (@Hau_kun) July 21, 2019

ストロボ効果（3Dでやる必要はなかった気がする…

float[] p = new float[100];
void draw(){
clear();
rectMode(CENTER);
for(int i = 0; i < 100; i++){
p[i] = p[i] > 0 ? p[i] < 10 ? p[i] + .5 : 0 : random(1) < 0.1 ? .1 : 0;
rect(i % 10 * 10 + 5, i / 10 * 10 + 5, p[i], p[i]);
}
}#つぶやきProcessing pic.twitter.com/AcQOHqSvIS
— はぅ君 (@Hau_kun) July 22, 2019

状態管理をone lineで何とか収めて作成。3項演算子が激しい…。

int i, x, a, b;
void draw(){
a++;
b += random(4) – 1;
for(i = 0; i < 36; i++){
x = i % 6 * 18 – 12;
bezier(x, i * 3, x + a, i * 3 + b, x + a, i * 3 – b, x, i * 3);
}
if(random(99) < 4){
a = b = 0;
fill(96, random(255), 160);
}
}#つぶやきProcessing pic.twitter.com/Hh9k4Krf3K
— はぅ君 (@Hau_kun) July 23, 2019

bezier()で面を作って模様を作成。

float t, c;
void draw(){
noStroke();
colorMode(HSB);
c = t++ % 25 == 0 ? random(85) : c;
for(int i = 0; i < 100; i++){
fill((i % 3 + 1) * c ,128, 255);
rect(i % 5 * 24 + (i / 5 % 2 == 0 ? -12 : 0), i / 5 * 10, t % 25, 10);
}
}#つぶやきProcessing pic.twitter.com/8pA6wINwzw
— はぅ君 (@Hau_kun) July 27, 2019

色が淡々と塗り替わっていく系のものを創りたくて創ったもの。

float t, i;
void setup(){
size(400, 400, P3D);
}
void draw(){
clear();
for(i = -100; i <= 100; i += 5){
resetMatrix();
translate(0, i, -200);
rotateY(t += .0003);
box(noise(i / 100 + t) * 100, 5, noise(i / 100 + t) * 50);
}
}#つぶやきProcessing pic.twitter.com/7OFJBEQM3f
— はぅ君 (@Hau_kun) July 28, 2019

伸縮する板。

今話題（？）の周期性パーリンノイズを使うと無限ループアニメがつくれるヽ（・－・）ノ pic.twitter.com/ATWv5kzv8w
— はぅ君 (@Hau_kun) July 28, 2019

おまけ：光を加えたものと、再帰性パーリンノイズによってループ化したもの。

float t;
void setup(){
size(400, 400, P3D);
}
void draw(){
clear();
lights();
for(int i = 0; i < 150; i++){
resetMatrix();
translate(i % 10 * 20 – 90, i / 10 * 14 – 90, -200);
rotateY(i * (t += .000001) * PI);
box(14);
}
}#つぶやきProcessing pic.twitter.com/QAiIGz4aSI
— はぅ君 (@Hau_kun) July 29, 2019

回転速度を微妙にずらしたbox()を配置することでできる模様。

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

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

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

関連

コメント

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

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