​

function setup() {

  createCanvas(windowWidth, windowHeight);

  extraCanvas = createGraphics(windowWidth, windowHeight);

  extraCanvas.clear();

  background(0);

  x = 0;

  y = windowHeight - 50;

  frameRate(80);

}

​

function draw() {

  //text

  textSize(20);

  fill(0);

  textAlign(CENTER, TOP);

  text(

    "THE CITY SHIMMER IN CELESTIAL HUES, WHEN NIGHT COMES",

    width / 2,

    height / 2

  );

​

  //city outline

  if (x <= width) {

    strokeWeight(random(0, 4));

    stroke(random(220, 255));

    lineLength = random(1, 10);

    lineHeight = random(15, 50);

    line(x, y, x + lineLength, y);

    x += lineLength;

​

    let direction = random(2);

    if (direction < 1) {

      line(x, y, x, y - lineHeight);

      y -= lineHeight;

    } else {

      line(x, y, x, y + lineHeight);

      y += lineHeight;

    }

  } else {

    x = 0;

  }

​

  //mouse press to trigger star

  if (mouseIsPressed) {

    extraCanvas.noStroke();

    extraCanvas.fill(255, 30);

    extraCanvas.fill(255, 30);

    extraCanvas.circle(random(0, width), random(0, height), random(0, 5));

  }

  image(extraCanvas, 0, 0);

}

​

// instead of starting from x = 0 again, I wanted to make the line generate form right side to the left, but failed using lineLength *=-1, and false and true statement. I NEED HELP!!!

//I wanted the line to keep with in the frame, is there a better way than writing more if statement?

//I also found out that text has silhouette?

​