4章-円を描く間違った方法「ジェネラティブ・アートーProcessingによる実践ガイド」
「ジェネラティブ・アートーProcessingによる実践ガイド」の4章「円を描く間違った方法」を実践しました。 三角関数を用いて円を描くところから始まり、ノイズを加えた円描きます。 最後には線分を用いて中心、半径、回転角にノイズを加えて描く「Wave Clock」を実行します。
参考書の図4.2~図4.15までを手元で再現した結果になります。 表示される図と実行したソースコードを下に載せておきます。 乱数を使うコードは、ランダム性があるので完全一致はしませんが、目的としている表現はできました。
図4.2
ソースコード
void setup(){ size(500, 300); background(255); strokeWeight(5); smooth(); float radius = 100; int centx = 250; int centy = 150; stroke(0, 30); noFill(); ellipse(centx,centy,radius*2,radius*2); stroke(20, 50, 70); float x,y; float lastx = -999; float lasty = -999; for(float ang=0; ang<=360; ang+=5){ float rad = radians(ang); x = centx + (radius * cos(rad)); y = centy + (radius * sin(rad)); point(x,y); } }
図4.3
ソースコード
void setup(){ size(500, 300); background(255); strokeWeight(5); smooth(); float radius = 100; int centx = 250; int centy = 150; stroke(0, 30); noFill(); ellipse(centx,centy,radius*2,radius*2); stroke(20, 50, 70); float x,y; float lastx = -999; float lasty = -999; for(float ang=0; ang<=360; ang+=5){ float rad = radians(ang); x = centx + (radius * cos(rad)); y = centy + (radius * sin(rad)); point(x,y); } }
図4.4
ソースコード
void setup(){ size(500, 300); background(255); strokeWeight(5); smooth(); float radius = 100; int centx = 250; int centy = 150; stroke(0, 30); noFill(); ellipse(centx,centy,radius*2,radius*2); radius = 10; stroke(20, 50, 70); float x,y; float lastx = -999; float lasty = -999; float radiusNoise = random(10); for(float ang=0; ang<=1440; ang+=5){ radiusNoise += 0.05; radius += 0.5; float thisRadius = radius + (noise(radiusNoise) * 200) - 100; float rad = radians(ang); x = centx + (thisRadius * cos(rad)); y = centy + (thisRadius * sin(rad)); if(lastx > -999){ line(x,y,lastx,lasty); } lastx = x; lasty = y; } }
図4.5
ソースコード
void setup(){ size(500, 300); background(255); strokeWeight(0.5); smooth(); int centx = 250; int centy = 150; float x,y; for(int i=0;i<100;i++){ float radius = 10; float lastx = -999; float lasty = -999; float radiusNoise = random(10); stroke(random(20), random(50), random(70), 80); int startangle = int(random(360)); int endangle = 1440 + int(random(1440)); int anglestep = 5 + int(random(3)); for(float ang=startangle; ang<=endangle; ang+=anglestep){ radiusNoise += 0.05; radius += 0.5; float thisRadius = radius + (noise(radiusNoise) * 200) - 100; float rad = radians(ang); x = centx + (thisRadius * cos(rad)); y = centy + (thisRadius * sin(rad)); if(lastx > -999){ line(x,y,lastx,lasty); } lastx = x; lasty = y; } } }
図4.7
ソースコード
void setup(){ size(500, 300); background(255); strokeWeight(1); smooth(); float radius = 100; int centx = 250; int centy = 150; stroke(0, 30); noFill(); ellipse(centx,centy,radius*2,radius*2); stroke(20, 50, 70); float x,y; float noiseval = random(10); float radVariance, thisRadius, rad; beginShape(); fill(20, 50, 70, 50); for(float ang=0; ang<=360; ang+=1){ noiseval += 0.1; radVariance = 30 * customNoise(noiseval); thisRadius = radius + radVariance; rad = radians(ang); x = centx + (thisRadius * cos(rad)); y = centy + (thisRadius * sin(rad)); curveVertex(x, y); } endShape(); }
図4.8
ソースコード
void setup(){ size(500, 300); background(255); strokeWeight(1); smooth(); float radius = 100; int centx = 250; int centy = 150; stroke(0, 30); noFill(); ellipse(centx,centy,radius*2,radius*2); stroke(20, 50, 70); float x,y; float noiseval = random(10); float radVariance, thisRadius, rad; beginShape(); fill(20, 50, 70, 50); for(float ang=0; ang<=360; ang+=1){ noiseval += 0.1; radVariance = 30 * customNoise(noiseval); thisRadius = radius + radVariance; rad = radians(ang); x = centx + (thisRadius * cos(rad)); y = centy + (thisRadius * sin(rad)); curveVertex(x, y); } endShape(); }
図4.11
ソースコード
float _xnoise, _ynoise; float _angle = -PI/2; float _radius; void setup(){ size(500, 300); background(255); frameRate(30); smooth(); noFill(); } void draw(){ _radius = 100; _angle += 1; if(_angle > 360){_angle -= 360;} if(_angle < 0){_angle += 360;} float centerx = width/2; float centery = height/2; float rad = radians(_angle); float x1 = centerx + (_radius * cos(rad)); float y1 = centery + (_radius * sin(rad)); float opprad = rad + PI ; float x2 = centerx + (_radius * cos(opprad)); float y2 = centery + (_radius * sin(opprad)); stroke(0, 60); strokeWeight(1); line(x1, y1, x2, y2); }
図4.12
ソースコード
float _xnoise, _ynoise; float _angle = -PI/2; float _radius; float _strokeCol = 254; int _strokeChange = -1; void setup(){ size(500, 300); background(255); frameRate(30); smooth(); noFill(); } void draw(){ _radius = 100; _angle += 1; if(_angle > 360){_angle -= 360;} if(_angle < 0){_angle += 360;} float centerx = width/2; float centery = height/2; float rad = radians(_angle); float x1 = centerx + (_radius * cos(rad)); float y1 = centery + (_radius * sin(rad)); float opprad = rad + PI ; float x2 = centerx + (_radius * cos(opprad)); float y2 = centery + (_radius * sin(opprad)); _strokeCol += _strokeChange; if(_strokeCol > 254){_strokeChange = -1;} if(_strokeCol < 0){_strokeChange = 1;} stroke(_strokeCol, 60); strokeWeight(1); line(x1, y1, x2, y2); }
図4.13
ソースコード
float _radiusnoise; float _xnoise, _ynoise; float _angle = -PI/2; float _radius; float _strokeCol = 254; int _strokeChange = -1; void setup(){ size(500, 300); background(255); frameRate(30); smooth(); noFill(); _radiusnoise = random(10); } void draw(){ _radiusnoise += 0.005; _radius = (noise(_radiusnoise) * 550) + 1; _angle += 1; if(_angle > 360){_angle -= 360;} if(_angle < 0){_angle += 360;} float centerx = width/2; float centery = height/2; float rad = radians(_angle); float x1 = centerx + (_radius * cos(rad)); float y1 = centery + (_radius * sin(rad)); float opprad = rad + PI ; float x2 = centerx + (_radius * cos(opprad)); float y2 = centery + (_radius * sin(opprad)); _strokeCol += _strokeChange; if(_strokeCol > 254){_strokeChange = -1;} if(_strokeCol < 0){_strokeChange = 1;} stroke(_strokeCol, 60); strokeWeight(1); line(x1, y1, x2, y2); }
図4.14
ソースコード
float _angnoise, _radiusnoise; float _xnoise, _ynoise; float _angle = -PI/2; float _radius; float _strokeCol = 254; int _strokeChange = -1; void setup(){ size(500, 300); background(255); frameRate(30); smooth(); noFill(); _angnoise = random(10); _radiusnoise = random(10); } void draw(){ _radiusnoise += 0.005; _radius = (noise(_radiusnoise) * 550) + 1; _angnoise += 0.005; _angle += (noise(_angnoise) * 6) - 3; if(_angle > 360){_angle -= 360;} if(_angle < 0){_angle += 360;} float centerx = width/2; float centery = height/2; float rad = radians(_angle); float x1 = centerx + (_radius * cos(rad)); float y1 = centery + (_radius * sin(rad)); float opprad = rad + PI ; float x2 = centerx + (_radius * cos(opprad)); float y2 = centery + (_radius * sin(opprad)); _strokeCol += _strokeChange; if(_strokeCol > 254){_strokeChange = -1;} if(_strokeCol < 0){_strokeChange = 1;} stroke(_strokeCol, 60); strokeWeight(1); line(x1, y1, x2, y2); }
図4.15
ソースコード
float _angnoise, _radiusnoise; float _xnoise, _ynoise; float _angle = -PI/2; float _radius; float _strokeCol = 254; int _strokeChange = -1; void setup(){ size(500, 300); background(255); frameRate(30); smooth(); noFill(); _angnoise = random(10); _radiusnoise = random(10); _xnoise = random(10); _ynoise = random(10); } void draw(){ _radiusnoise += 0.005; _radius = (noise(_radiusnoise) * 550) + 1; _angnoise += 0.005; _angle += (noise(_angnoise) * 6) - 3; if(_angle > 360){_angle -= 360;} if(_angle < 0){_angle += 360;} _xnoise += 0.01; _ynoise += 0.01; float centerx = width/2 + (noise(_xnoise) * 100) - 50; float centery = height/2 + (noise(_ynoise) * 100) - 50; float rad = radians(_angle); float x1 = centerx + (_radius * cos(rad)); float y1 = centery + (_radius * sin(rad)); float opprad = rad + PI ; float x2 = centerx + (_radius * cos(opprad)); float y2 = centery + (_radius * sin(opprad)); _strokeCol += _strokeChange; if(_strokeCol > 254){_strokeChange = -1;} if(_strokeCol < 0){_strokeChange = 1;} stroke(_strokeCol, 60); strokeWeight(1); line(x1, y1, x2, y2); }
3章-線を引く間違った方法「ジェネラティブ・アートーProcessingによる実践ガイド」
「ジェネラティブ・アートーProcessingによる実践ガイド」の3章「線を引く間違った方法」を実践しました。
直線を引くところから始まり、何種類かノイズを扱い、ノイズを加えた線を描きます。
参考書の図3.1~図3.11までを手元で再現した結果になります。
表示される図と実行したソースコードを下に載せておきます。
乱数を使うコードは、ランダム性があるので完全一致はしませんが、目的としている表現はできました。
図3.1
ソースコード
void setup(){ size(500, 100); background(255); strokeWeight(5); smooth(); stroke(20, 50, 70); line(20,50,480,50); }
図3.2
ソースコード
void setup(){ size(500, 100); background(255); strokeWeight(5); smooth(); stroke(0, 30); line(20,50,480,50); stroke(20, 50, 70); float randx = random(width); float randy = random(height); line(20,50,randx,randy); }
図3.3
ソースコード
void setup(){ size(500, 100); background(255); strokeWeight(5); smooth(); stroke(0, 30); line(20,50,480,50); stroke(20, 50, 70); int step = 10; float lastx = -999; float lasty = -999; float y = 50; int borderx = 20; int bordery = 10; for(int x=borderx; x<=width-borderx; x+=step){ y = bordery + random(height - 2*bordery); if(lastx > -999){ line(x,y,lastx,lasty); } lastx = x; lasty = y; } }
図3.4
ソースコード
void setup(){ size(500, 100); background(255); strokeWeight(5); smooth(); stroke(0, 30); line(20,50,480,50); stroke(20, 50, 70); float xstep = 10; float ystep = 10; float lastx = 20; float lasty = 50; float y = 50; for(int x=20; x<=480; x+=xstep){ ystep = random(20) - 10; y += ystep; line(x,y,lastx,lasty); lastx = x; lasty = y; } }
図3.5
ソースコード
void setup(){ size(500, 100); background(255); strokeWeight(5); smooth(); stroke(0, 30); line(20,50,480,50); stroke(20, 50, 70); int step = 10; float lastx = -999; float lasty = -999; float ynoise = random(10); float y; for(int x=20; x<=480; x+=step){ y = 10 +noise(ynoise) * 80; if(lastx > -999){ line(x,y,lastx,lasty); } lastx = x; lasty = y; ynoise += 0.1; } }
図3.61
ソースコード
void setup(){ size(500, 100); background(255); strokeWeight(5); smooth(); stroke(0, 30); line(20,50,480,50); stroke(20, 50, 70); int step = 10; float lastx = -999; float lasty = -999; float ynoise = random(10); float y; for(int x=20; x<=480; x+=step){ y = 10 +noise(ynoise) * 80; if(lastx > -999){ line(x,y,lastx,lasty); } lastx = x; lasty = y; ynoise += 0.3; } }
図3.7
ソースコード
void setup(){ size(500, 100); background(255); strokeWeight(5); smooth(); stroke(0, 30); line(20,50,480,50); stroke(20, 50, 70); float xstep = 1; float lastx = -999; float lasty = -999; float angle = 0; float y = 50; for(int x=20; x<=480; x+=xstep){ float rad = radians(angle); y = 50 + (sin(rad) * 40); if(lastx > -999){ line(x,y,lastx,lasty); } lastx = x; lasty = y; angle++ ; } }
図3.8
ソースコード
void setup(){ size(500, 100); background(255); strokeWeight(5); smooth(); stroke(0, 30); line(20,50,480,50); stroke(20, 50, 70); float xstep = 1; float lastx = -999; float lasty = -999; float angle = 0; float y = 50; for(int x=20; x<=480; x+=xstep){ float rad = radians(angle); y = 50 + (cos(rad) * 40); if(lastx > -999){ line(x,y,lastx,lasty); } lastx = x; lasty = y; angle++ ; } }
図3.9
ソースコード
void setup(){ size(500, 100); background(255); strokeWeight(5); smooth(); stroke(0, 30); line(20,50,480,50); stroke(20, 50, 70); float xstep = 1; float lastx = -999; float lasty = -999; float angle = 0; float y = 50; for(int x=20; x<=480; x+=xstep){ float rad = radians(angle); y = 50 + (pow(sin(rad), 3) * 30); if(lastx > -999){ line(x,y,lastx,lasty); } lastx = x; lasty = y; angle++ ; } }
図3.10
ソースコード
void setup(){ size(500, 100); background(255); strokeWeight(5); smooth(); stroke(0, 30); line(20,50,480,50); stroke(20, 50, 70); float xstep = 1; float lastx = -999; float lasty = -999; float angle = 0; float y = 50; for(int x=20; x<=480; x+=xstep){ float rad = radians(angle); y = 50 + (pow(sin(rad), 3) * noise(rad*2) * 30); if(lastx > -999){ line(x,y,lastx,lasty); } lastx = x; lasty = y; angle++ ; } }
図3.11
ソースコード
void setup(){ size(500, 100); background(255); strokeWeight(5); smooth(); stroke(0, 30); line(20,50,480,50); stroke(20, 50, 70); float xstep = 10; float lastx = 20; float lasty = 50; float y = 50; for(int x=20; x<=480; x+=xstep){ y = 20 + (customRandom() * 60); line(x,y,lastx,lasty); lastx = x; lasty = y; } } float customRandom() { float retValue = 1 - pow(random(1), 5); return retValue; }
-
恐らく、参考書に誤記があって、ynoiseの増加分は「0.03」ではなく「0.3」だと思われます。値を大きくするとノイズが増えるので↩
ジェネラティブ・アート―Processingによる実践ガイドを購入
先日、「[普及版]ジェネラティブ・アート―Processingによる実践ガイド」というProcessingの参考書を購入しました。
Processingというのは電子アートとビジュアルデザインのためのプログラミング言語です。
数年前に出会って存在は認識しており、軽く触ってみたことはあるのですが、本格的にジェネラティブ・アートに取り組んでみたいと思いました。
[普及版]ジェネラティブ・アート―Processingによる実践ガイド
- 作者:マット・ピアソン,Matt Pearson
- 発売日: 2014/11/21
- メディア: 単行本(ソフトカバー)
これからこの本を読み進めていき、Processingの理解をしてジェネラティブ・アートをできるようにしていきます。
おそらく、進行はまったりなので、記事ものんびり記録がてら書いていくと思います。
プロフィール
本ブログは管理者であるギンによるブログです。
- クリエイティブ・コーディング
- ジェネラティブアート
- デジタルアート
このあたりに関する記事を書いていく予定です。
簡単に自己紹介
- 名前:ギン
- 仕事:エンジニア
趣味でクリエイティブ・コーディングに取り組んでいます。 クリエイティブ・コーディングはプログラムを用いて、ビジュアルアートやサウンドアートなどの制作を行うことです。 主にJavascriptのライブラリ「p5.js」を用いて、プログラミングを行うことで作品を作っています。
熱中度合いは低くなっていますが、デジタルの写真も趣味で続けています。 2011年ごろからデジタル一眼、ミラーレスで写真を撮ったり、raw現像したりするが面白くてハマっていました。
プログラミングは大学・大学院の授業や卒業研究の中で、C言語を扱い学びました。 趣味で大学生の頃からLinuxを触ったりもして、プログラムを書くことは日常的に行なっていました。 原点は中学生の時に、自作のウェブサイトを制作していた経験だと思っています。 HTMLベタ書きのウェブサイトを作って、インターネット上の仲間とお互いのウェブサイトについて話したり、 それぞれのアイディアから刺激を受けて自分なりに取り入れたりする活動が楽しかった思い出です。 それがあったから、趣味でコードを書くことが好きな気がしています。
現在はエンジニアをしています。 ハードウェアの開発を行なっており、低レイヤーの分野でASICとかの開発関連の仕事をしています。 わかる人はわかりますが、あんまりメジャーな仕事ではないので伝わっていないと思います。 簡単いいうと0と1で全てを計算する方法を考えたり、ANDやORを並べて様々な演算を実現するようなことをしてます。
そんな感じで、経歴的にも仕事でも、あまり目につかないような基礎寄り、低レイヤー寄りです。 その反動か趣味では視覚的にわかりやすいクリエイティブ・コーディングで絵や動画を作っています。 人の目に直接触れて、視覚的なかっこよさ・美しさを表現できるクリエイティブ・コーディングが今はとても楽しいです。
Openprocessing gin_graphic - OpenProcessing
BOOTH gin-graphic - BOOTH
hic et nunc hic et nunc