見出し画像

Generative Art #101

Code

int actRandomSeed = (int)random(316);

void setup() {
  size(840, 840, P2D);
  pixelDensity(2);
  smooth(8);
}

void draw() {
  randomSeed(actRandomSeed);
  background(0);
  tile();
  for (int i = 0; i < 50; i ++) {
    float x = random(random(width));
    float y = random(height);
    float size = map(dist(x, y, 0, 0), 0, sqrt(sq(width) + sq(height)), 10, 200);
    
    stroke(80);
    strokeWeight(1);
    PenroseTriangle(x, y, size);
    
    noStroke();
    fill(getCol());
    circle(x, y, size/8);
  }
}

void tile(){
  int count = int(random(3, 12));
  float w = width/count;
  
  noFill();
  strokeWeight(0.5);
  stroke(#ffffff);
  for(int j = 0; j < count; j++){
   for(int i = 0; i < count; i++){
     rect(i*w, j*w, w, w);
   }
  }
}

void PenroseTriangle(float x, float y, float s) {
  float hs = s/2;
  float w = s/random(3, 10);
  pushMatrix();
  translate(x, y);
  rotate(random(TAU));
  for (int i = 0; i < 3; i++) {
    fill(getCol());
    rotate(radians(120));
    beginShape();
    vertex(hs, 0);
    fill(getCol());
    vertex(hs + w * myCos(-30), w * mySin(-30));
    vertex((hs + w*2) * myCos(240) + w * myCos(210), (hs + w*2) * mySin(240) + (w * mySin(210)));
    vertex((hs + w*2) * myCos(120) + w * myCos(150), (hs + w*2) * mySin(120) + w * mySin(150));
    fill(getCol());
    vertex((hs + w*2) * myCos(120) + w * myCos(90), (hs + w*2) * mySin(120) + w * mySin(90));
    vertex(hs*myCos(240) + w * myCos(210), hs*mySin(240) + w * mySin(210));
    endShape(CLOSE);
  }
  popMatrix();
}

float mySin(float theta) {
  return sin(radians(theta));
}

float myCos(float theta) {
  return cos(radians(theta));
}

int[]colors = {#FEFF00, #00FFC1, #FF0095, #FF9E00, #2D00FF};
int getCol() {
  return colors[(int)random(colors.length)];
}

void mousePressed() {
  actRandomSeed = (int)random(100000);
}

void keyPressed(){
  if(key == 's')saveFrame("####.png");
}

ペンローズの三角形という不可能図形。

不可能というのは3次元空間での話なので、2次元ならいくらでも描けてしまうのです。

このぱっと見の違和感じゃなくて、よく見たときの「あれ?おかしいぞ?」がなんとも言えなくて好き。おかしいのわかっているのに脳がおかしいと思わないような感じ。

ペンローズの三角形をコーディングするときは割と大変だった。

とりあえずペンローズの三角形の構造を理解しようと自分で描いてみる。ノートとペンで線を引いたり、コンパスで円を書いたり。

結局ノートとペンは最強。

描いてみてわかったけど、見ながら描くだけでも難しい…

色々考えた結果、この多角形が3つあることに気づいたので今回はループして回転させて3つ描画することにした。

もっとわかりやすくて面白いアプローチがありそうなんだけど…。

うーむ…

あとはひとつひとつの図形のサイズとランダムに配置するのには隠し味を加え、中心の円とかバックグラウンドのグリッドはヴァイブスで。

そんな感じで、気が向いたので書きました。

記事の配置としては
[画像]
[ソースコード]
[説明コメント]
って感じにしていこうと思います。

タイトルも面倒なので「Generative Art ####」にしました。

最後まで見ていただきありがとうございます!

Happy Coding!!


応援してくださる方!いつでもサポート受け付けてます!