Hometown

let palette = [];

let graphics;

​

function setup() {

  createCanvas(1112, 834);

  colorMode(HSB, 360, 100, 100, 100);

  strokeJoin(ROUND);

​

  while (palette.length < 5) {

    palette = shuffle(chromotome.get().colors);

  }

​

  graphics = createGraphics(width, height);

​

  for (let i = 0; i < (graphics.width * graphics.height * 10) / 100; i++) {

    let x = random(graphics.width);

    let y = random(random()) * graphics.height * 1.5 - graphics.height * .15;

    graphics.stroke(255, map(y,0,height,5,5)/2);

    graphics.strokeWeight(map(y, 0, height, 1, 3));

    graphics.point(x, y);

  }

}

​

function draw() {

  // background(220,80,70);

  let gradient = drawingContext.createLinearGradient(0, 0, 0, height);

​

  noStroke();

  gradient.addColorStop(0, color(220, 80, 0));

  gradient.addColorStop(0.33, color(220, 80, 70));

  drawingContext.fillStyle = gradient;

  rect(0,0,width,height);

​

  gradient.addColorStop(1, color(0, 0, 100, 3));

  gradient.addColorStop(0, color(0, 0, 100, 0));

​

  // stroke(0,0,30);

  let w = width / 10 / 1.5;

  let h = height * 2;

  let yStep;

  for (let y = height / 4; y < height; y += yStep) {

     yStep = map(y,height/4,height,height/30,height/10);

    let xStep;

    let xStepBase = map(y, height / 4, height, w / 2, w * 3);

    for (let x = 0; x < width; x += xStep) {

      xStep = random(xStepBase/2, xStepBase*2);

      let hStep = map(y, height / 4, height, height / 100, height / 10) * (random() > 0.5 ? -1 : 1);

      drawHouse(x, y + hStep, xStep, h, palette);

    }

  drawingContext.fillStyle = gradient;

  blendMode(ADD);

  image(graphics, 0, 0);

  // rect(0, 0, width, height);

  blendMode(BLEND); 

  }

​

​

​

  noLoop();

}

​

function drawHouse(x, y, w, h, palette) {

  let colors = shuffle(palette.concat());

  let w2 = random(w / 8, w / 2);

  let bool = random() > 0.5;

​

  push();

  translate(x, y);

  if (bool) {

    translate(w, 0);

    scale(-1, 1);

  }

  let scl = random(0.75, 1.25);

  scale(scl, 1);

  strokeWeight(1 / scl);

​

  push();

  drawingContext.shadowColor = color(0, 0, 0,33);

  drawingContext.shadowBlur = w/3;

  fill(0,0,100);

  drawingContext.shadowOffsetX = w / 4 / 2;

​

  beginShape();

  vertex(0, w2);

  vertex(w / 2 / 2, 0);

  vertex((w * 3) / 4, 0);

  vertex(w, w2);

  vertex(w, h);

  vertex(0, h);

  endShape(CLOSE);

  drawingContext.shadowBlur = 0;

  pop();

  let c1 = colors[0];

  let c2 = color(

    hue(c1),

    saturation(c1),

    constrain(brightness(c1) - 20, 0, 100)

  );

  let gradient = drawingContext.createLinearGradient(0, 0, 0, w2);

  gradient.addColorStop(0, c1);

  gradient.addColorStop(1, c2);

  drawingContext.fillStyle = gradient;

​

  beginShape();

  vertex(w / 2 / 2, 0);

  vertex((w * 3) / 4, 0);

  vertex(w, w2);

  vertex(w / 2, w2);

  endShape(CLOSE);

​

  c1 = colors[1];

  c2 = color(hue(c1), saturation(c1), constrain(brightness(c1) - 20, 0, 100));

  gradient = drawingContext.createLinearGradient(0, w2, 0, h);

  gradient.addColorStop(0, c1);

  gradient.addColorStop(1 / 10, c2);

  drawingContext.fillStyle = gradient;

​

  beginShape();

  vertex(w / 2, w2);

  vertex(w, w2);

  vertex(w, h);

  vertex(w / 2, h);

  endShape(CLOSE);

​

  c1 = colors[2];

  c2 = colors[3]; //color(hue(c1), saturation(c1), constrain(brightness(c1) - 30, 0, 100));

  gradient = drawingContext.createLinearGradient(0, 0, 0, h);

  gradient.addColorStop(0, c1);

  gradient.addColorStop(1 / 15, c2);

  drawingContext.fillStyle = gradient;

​

  beginShape();

  vertex(0, w2);

  vertex(w / 2 / 2, 0);

  vertex(w / 2, w2);

  vertex(w / 2, h);

  vertex(0, h);

  endShape(CLOSE);

​

  pop();

}

​

// save jpg

let lapse = 0;    // mouse timer

function mousePressed(){

  if (millis() - lapse > 400){

    save("img_" + month() + '-' + day() + '_' + hour() + '-' + minute() + '-' + second() + ".jpg");

    lapse = millis();

  } 

}

​