ギンの備忘録

デジタルアートやプログラミングやテクノロジー関連のこと。

No.001-Processingアート

Processing 作品

Processingで作った作品
正確にはp5jsですが

No.001

f:id:gin_graphic:20200919233513j:plain

f:id:gin_graphic:20200919233527j:plain

f:id:gin_graphic:20200919233545j:plain

f:id:gin_graphic:20200919233558j:plain

デスクトップパソコンが壊れた

日記パソコン

一昨日のこと、デスクトップのパソコンが壊れました。この一、二ヶ月の間電源スイッチが不調でした。押したときに戻らない。押し込んだままになることがたまにありました。

良くないと思いながらも、面倒で放置していたところ、一昨日も同じように電源スイッチが戻ってこなかった。いつもと何か違い、パソコンが一瞬立ち上がって、その後何の反応もしなくなりました。

電源スイッチを押しても起動しなくなってしまいました。悲しい。長年使っていて、そろそろ変え時と思って、年開ける頃に買い替える計画を目論んでいたんですけどね。

電源スイッチからの故障恐らくは電源かマザーボードあたりが亡くなられたのかも。パーツを入れ替えながら延命して使っていたのですが、これが限界ですかね。限界だったと思いましょう。

長いパーツは10年近く使ってきたので十分頑張ってくれました。ありがとう。バイバイ。

新しいデスクトップを買います。少しの間、ノートパソコンだけで過ごしますか。

4章-円を描く間違った方法「ジェネラティブ・アートーProcessingによる実践ガイド」

Processing

「ジェネラティブ・アートーProcessingによる実践ガイド」の4章「円を描く間違った方法」を実践しました。三角関数を用いて円を描くところから始まり、ノイズを加えた円描きます。最後には線分を用いて中心、半径、回転角にノイズを加えて描く「Wave Clock」を実行します。

参考書の図4.2～図4.15までを手元で再現した結果になります。表示される図と実行したソースコードを下に載せておきます。乱数を使うコードは、ランダム性があるので完全一致はしませんが、目的としている表現はできました。

図4.2

f:id:gin_graphic:20200914200110p:plain

ソースコード

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

f:id:gin_graphic:20200914200114p:plain

ソースコード

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

f:id:gin_graphic:20200914200122p:plain

ソースコード

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

f:id:gin_graphic:20200914200126p:plain

ソースコード

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

f:id:gin_graphic:20200914200130p:plain

ソースコード

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

f:id:gin_graphic:20200914200134p:plain

ソースコード

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

f:id:gin_graphic:20200914200138p:plain

ソースコード

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

f:id:gin_graphic:20200914200142p:plain

ソースコード

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

f:id:gin_graphic:20200914200145p:plain

ソースコード

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

f:id:gin_graphic:20200914200149p:plain

ソースコード

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

f:id:gin_graphic:20200914200153p:plain

ソースコード

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

「ジェネラティブ・アートーProcessingによる実践ガイド」の3章「線を引く間違った方法」を実践しました。
直線を引くところから始まり、何種類かノイズを扱い、ノイズを加えた線を描きます。

参考書の図3.1～図3.11までを手元で再現した結果になります。
表示される図と実行したソースコードを下に載せておきます。
乱数を使うコードは、ランダム性があるので完全一致はしませんが、目的としている表現はできました。

図3.1

f:id:gin_graphic:20200912113619p:plain

ソースコード

void setup(){
   size(500, 100);
   background(255);
   strokeWeight(5);
   smooth();

   stroke(20, 50, 70);
   line(20,50,480,50);
}

図3.2

f:id:gin_graphic:20200912113623p:plain

ソースコード

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

f:id:gin_graphic:20200912113627p:plain

ソースコード

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

f:id:gin_graphic:20200912113631p:plain

ソースコード

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

f:id:gin_graphic:20200912113635p:plain

ソースコード

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.6¹

f:id:gin_graphic:20200912113639p:plain

ソースコード

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

f:id:gin_graphic:20200912113643p:plain

ソースコード

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

f:id:gin_graphic:20200912113647p:plain

ソースコード

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

f:id:gin_graphic:20200912113651p:plain

ソースコード

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

f:id:gin_graphic:20200912113655p:plain

ソースコード

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

f:id:gin_graphic:20200912113658p:plain

ソースコード

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というのは電子アートとビジュアルデザインのためのプログラミング言語です。
数年前に出会って存在は認識しており、軽く触ってみたことはあるのですが、本格的にジェネラティブ・アートに取り組んでみたいと思いました。

[普及版]ジェネラティブ・アート―Processingによる実践ガイド

[普及版]ジェネラティブ・アート―Processingによる実践ガイド

作者:マット・ピアソン,Matt Pearson
発売日: 2014/11/21
メディア: 単行本（ソフトカバー）

これからこの本を読み進めていき、Processingの理解をしてジェネラティブ・アートをできるようにしていきます。
おそらく、進行はまったりなので、記事ものんびり記録がてら書いていくと思います。

f:id:gin_graphic:20200912172240j:plain