createCanvas(800, 600);

  noStroke();

}

​

function draw() {

  // Draw a dark bluish background to mimic nighttime

  // We’ll do a simple vertical gradient from dark blue to near-black.

  setGradient(0, 0, width, height, color(10, 20, 40), color(0, 0, 0), "Y");

  // Draw window frame (dark wood or black color)

  fill(15, 15, 20, 255);

  // A large rectangle for the frame background

  rect(120, 60, 560, 400);

  // Draw the “glass” area with a slight bluish tint

  // Also apply a subtle gradient to simulate outdoor light

  setGradient(130, 70, 540, 380, color(25, 50, 70, 200), color(10, 20, 35, 200), "Y");

​

  // Draw a simple city silhouette in the background

  drawCitySilhouette(130, 70, 540, 380);

​

  // Draw “raindrops” on the window as scattered small lines or circles

  drawRain(130, 70, 540, 380, 40);  

​

  // Draw a windowsill or surface at the bottom

  fill(40, 25, 25);

  rect(115, 420, 570, 40);

​

  // Draw a few potted plants in front of the window

  // We’ll keep them somewhat stylized

  drawPlant(250, 420, 40);

  drawPlant(320, 420, 35);

  drawPlant(390, 420, 45);

  drawPlant(470, 420, 35);

​

  noLoop();

}

​

// ----------------------------------------------------

// gradient function

function setGradient(x, y, w, h, c1, c2, axis) {

  // We'll use lines to create a gradient by blending color c1 to c2.

  // 'axis' can be "Y" for a vertical gradient or "X" for a horizontal one.

  noStroke(); // We’ll enable stroke inside the loop

  // Decide how many steps we take:

  //  - if it's vertical ("Y"), we draw one line per row from top to bottom

  //  - if it's horizontal ("X"), we draw one line per column from left to right

  let steps = (axis === "Y") ? h : w;

  for (let i = 0; i < steps; i++) {

    // 't' goes from 0.0 to 1.0 as 'i' goes from 0 to steps-1

    let t = i / steps;

    // Interpolate (blend) between c1 and c2 based on 't'

    let c = lerpColor(c1, c2, t);

    // Use stroke with this color

    stroke(c);

    // Draw a single “scan line”

    if (axis === "Y") {

      // For a vertical gradient, draw horizontal lines

      line(x, y + i, x + w, y + i);

    } else {

      // For a horizontal gradient, draw vertical lines

      line(x + i, y, x + i, y + h);

    }

  }

}

​

// ----------------------------------------------------

// Draw a rough city silhouette on the “window glass”

function drawCitySilhouette(x, y, w, h) {

  push();

  fill(15, 25, 40, 180);

  // We’ll just make random rectangles for buildings

  let baseY = h * 1.1;

  for (let i = 0; i < 6; i++) {

    let buildingX = random(130, w - 40);

    let buildingW = random(30, 50);

    let buildingH = random(20, baseY-70); 

    rect(buildingX, baseY - buildingH, buildingW, buildingH);

  }

  pop();

}

​

// ----------------------------------------------------

// Draw random raindrops on the glass

function drawRain(x, y, w, h, dropCount) {

  push();

  translate(x, y);

  stroke(200, 220, 255, 120);

  strokeWeight(2);

  for (let i = 0; i < dropCount; i++) {

    let rx = random(0, w);

    let ry = random(0, h);

    line(rx, ry, rx, ry + random(5, 15));

  }

  pop();

}

​

​

// ----------------------------------------------------

// Draw a stylized potted plant

function drawPlant(px, py, potSize) {

  // Pot

  fill(30);

  rect(px - potSize/2, py - potSize, potSize, potSize);

  fill(40);

  rect(px - potSize/2 - 2, py - potSize, potSize+4, potSize*0.2);

​

  // Some leaves, drawn as arcs

  fill(40, 80, 40);

  for (let i = 0; i < 5; i++) {

    let angle = random(-PI/2, PI/2);

    let leafLen = random(30, 50);

    let leafWidth = random(20, 30);

    push();

      translate(px, py - potSize);

      rotate(angle);

      arc(0, 0, leafLen, leafWidth, PI, 0);

    pop();

  }

}

​