p5.jsでビルの夜景イラストを自動で生成

ビルの夜景イラストを自動生成

let canvas_width = 600;
let canvas_height = 400;
let i = 0;

function setup() {
  createCanvas(canvas_width, canvas_height);
}

function mousePressed() {
  clear();
  background(0, 9, 170);
  noStroke();

  for (i = 0; i < 60; i++) {
    bar_h = random(40, 200);
    bar_w = 30;
    fill(000);
    rect(i * bar_w, canvas_height - bar_h, bar_w, bar_h);
    for (h = 0; h < random(1, 5); h++) {
      if (random() > 0.6) {
        alfa = 255;
      } else {
        alfa = 0;
      }
      fill(255, 255, 0, alfa);
      rect(i * bar_w + 10, canvas_height + 10 - bar_h + h * 20, bar_w - 20, 10);
    }
  }
  
  //星を描く
  for (i = 0; i < 30; i++) {
    x = random(canvas_width);
    y = random(10,160);
    r = random(1, 5);
    fill(255, 255, 255);
    ellipse(x, y, r);
  }

}

夜空の星とビル屋上の赤いライトを追加

let canvas_width = 600;
let canvas_height = 400;
let i = 0;

function setup() {
  createCanvas(canvas_width, canvas_height);
}

function mousePressed() {
  clear();
  background(0, 0, 180);
  noStroke();

  //ビルを描く
  for (i = 0; i < 60; i++) {
    bar_h = random(40, 200);
    bar_w = 30;
    fill(000);
    rect(i * bar_w, canvas_height - bar_h, bar_w, bar_h);

    if(bar_h > 120){
      //赤いライトを描く
      fill(255,0,0);
      rect(i * bar_w, canvas_height - bar_h -4, 4, 4);
      rect(i * bar_w + bar_w - 4, canvas_height - bar_h -4, 4, 4);      
    }


    //窓を描く
    for (h = 0; h < random(1, 5); h++) {
      if (random() > 0.6) {
        alfa = 255;
      } else {
        alfa = 0;
      }
      fill(255, 255, 0, alfa);
      rect(i * bar_w + 10, canvas_height + 10 - bar_h + h * 20, bar_w - 20, 10);
    }
  }
  
  //星を描く
  for (i = 0; i < 30; i++) {
    x = random(canvas_width);
    y = random(10,160);
    r = random(1, 5);
    fill(255, 255, 255);
    ellipse(x, y, r);
  }

}

窓の数を増やして照明をランダムに

let canvas_width = 600;
let canvas_height = 400;
let i = 0;

function setup() {
  createCanvas(canvas_width, canvas_height);
}

function random_alfa() {
      if (random() < 0.3) {
        return 255;
      }else if(random() < 0.6){
        return 120;          
               } else {
        return 0;
      }  
}

function mousePressed() {
  clear();
  background(random(0,50), random(0,50), random(0,100));
  noStroke();

  //ビルを描く
  for (i = 0; i < 60; i++) {
    bar_h = random(40, 200);
    bar_w = 25;
    fill(000);
    rect(i * bar_w, canvas_height - bar_h, bar_w, bar_h);

    if(bar_h > 120){
      //赤いライトを描く
      fill(255,0,0);
      rect(i * bar_w, canvas_height - bar_h -4, 4, 4);
      rect(i * bar_w + bar_w - 4, canvas_height - bar_h -4, 4, 4);      
    }


    //窓を描く
    for (h = 0; h < random(1, 10); h++) {
        fill(255, 255, 0,random_alfa());
        rect(i * bar_w + 5, canvas_height + 5 - bar_h + h * 10, 5, 5);
        fill(255, 255, 0,random_alfa());
        rect(i * bar_w + 15, canvas_height + 5 - bar_h + h * 10, 5, 5);
    }
  }
  
  //星を描く
  for (i = 0; i < 30; i++) {
    x = random(canvas_width);
    y = random(10,160);
    r = random(1, 5);
    fill(255, 255, 255);
    ellipse(x, y, r);
  }

}