ギンの備忘録

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

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.61

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;
}

  1. 恐らく、参考書に誤記があって、ynoiseの増加分は「0.03」ではなく「0.3」だと思われます。値を大きくするとノイズが増えるので↩