xxxxxxxxxx251
let windowlist = []; // initializing an array to store properties of windows for the buildingsfunction setup() { createCanvas(400, 400) frameRate(10) // setting the frame rate to 10 frames per second to control the speed of the artwork's animation. // for creating building 1 windows windowlist.push({ x1: 31, y1: 312, x2: 46, y2: 312, type: "line", weight: 3 }); windowlist.push({ x1: 31, y1: 322, x2: 46, y2: 322, type: "line", weight: 3 }); windowlist.push({ x1: 31, y1: 332, x2: 46, y2: 332, type: "line", weight: 3 }); windowlist.push({ x1: 31, y1: 342, x2: 46, y2: 342, type: "line", weight: 3 }); windowlist.push({ x1: 31, y1: 352, x2: 46, y2: 352, type: "line", weight: 3 }); windowlist.push({ x1: 31, y1: 362, x2: 46, y2: 362, type: "line", weight: 3 }); // for creating building 2 windows windowlist.push({ x1: 62, y1: 270, x2: 70, y2: 270, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 276, x2: 70, y2: 276, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 282, x2: 70, y2: 282, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 288, x2: 70, y2: 288, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 294, x2: 70, y2: 294, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 300, x2: 70, y2: 300, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 306, x2: 70, y2: 306, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 312, x2: 70, y2: 312, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 318, x2: 70, y2: 318, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 324, x2: 70, y2: 324, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 330, x2: 70, y2: 330, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 336, x2: 70, y2: 336, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 342, x2: 70, y2: 342, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 348, x2: 70, y2: 348, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 354, x2: 70, y2: 354, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 360, x2: 70, y2: 360, type: 'line', weight: 2 }); windowlist.push({ x1: 62, y1: 366, x2: 70, y2: 366, type: 'line', weight: 2 }); //for creating building 3 windows windowlist.push({ x: 85, y: 302, size: 7, type: 'square', weight: 2 }); windowlist.push({ x: 100, y: 302, size: 7, type: 'square', weight: 2 }); windowlist.push({ x: 85, y: 317, size: 7, type: 'square', weight: 2 }); windowlist.push({ x: 100, y: 317, size: 7, type: 'square', weight: 2 }); windowlist.push({ x: 85, y: 332, size: 7, type: 'square', weight: 2 }); windowlist.push({ x: 100, y: 332, size: 7, type: 'square', weight: 2 }); windowlist.push({ x: 85, y: 347, size: 7, type: 'square', weight: 2 }); windowlist.push({ x: 100, y: 347, size: 7, type: 'square', weight: 2 }); //for creating building 4 windows windowlist.push({ x1: 124, y1: 300, x2: 129, y2: 300, type: 'line', weight: 4 }); windowlist.push({ x1: 124, y1: 310, x2: 129, y2: 310, type: 'line', weight: 4 }); windowlist.push({ x1: 124, y1: 320, x2: 129, y2: 320, type: 'line', weight: 4 }); windowlist.push({ x1: 124, y1: 330, x2: 129, y2: 330, type: 'line', weight: 4 }); windowlist.push({ x1: 124, y1: 340, x2: 129, y2: 340, type: 'line', weight: 4 }); windowlist.push({ x1: 124, y1: 350, x2: 129, y2: 350, type: 'line', weight: 4 }); windowlist.push({ x1: 124, y1: 360, x2: 129, y2: 360, type: 'line', weight: 4 }); //for creating building 5 windows windowlist.push({ x1: 148, y1: 233, x2: 148, y2: 361, type: 'line', weight: 2 }); windowlist.push({ x1: 153, y1: 233, x2: 153, y2: 361, type: 'line', weight: 2 }); windowlist.push({ x1: 158, y1: 233, x2: 158, y2: 361, type: 'line', weight: 2 }); //for creating building 6 windows windowlist.push({ x: 171, y: 202, w: 7, h: 30, type: 'rect', weight: 2 }); windowlist.push({ x: 184, y: 202, w: 7, h: 30, type: 'rect', weight: 2 }); windowlist.push({ x: 171, y: 240, w: 7, h: 30, type: 'rect', weight: 2 }); windowlist.push({ x: 184, y: 240, w: 7, h: 30, type: 'rect', weight: 2 }); windowlist.push({ x: 171, y: 278, w: 7, h: 30, type: 'rect', weight: 2 }); windowlist.push({ x: 184, y: 278, w: 7, h: 16, type: 'rect', weight: 2 }); windowlist.push({ x: 171, y: 316, w: 7, h: 30, type: 'rect', weight: 2 }); //for creating building 7 windows windowlist.push({ x: 191, y: 305, size: 8, type: 'square', weight: 2 }); windowlist.push({ x: 205, y: 305, size: 8, type: 'square', weight: 2 }); windowlist.push({ x: 219, y: 305, size: 8, type: 'square', weight: 2 }); windowlist.push({ x: 191, y: 320, size: 8, type: 'square', weight: 2 }); windowlist.push({ x: 205, y: 320, size: 8, type: 'square', weight: 2 }); windowlist.push({ x: 219, y: 320, size: 8, type: 'square', weight: 2 }); windowlist.push({ x: 191, y: 335, size: 8, type: 'square', weight: 2 }); windowlist.push({ x: 205, y: 335, size: 8, type: 'square', weight: 2 }); windowlist.push({ x: 219, y: 335, size: 8, type: 'square', weight: 2 }); windowlist.push({ x: 191, y: 350, size: 8, type: 'square', weight: 2 }); windowlist.push({ x: 205, y: 350, size: 8, type: 'square', weight: 2 }); windowlist.push({ x: 219, y: 350, size: 8, type: 'square', weight: 2 }); //for creating building 8 windows windowlist.push({ x1: 218, y1: 223, x2: 218, y2: 290, type: 'line', weight: 2 }); windowlist.push({ x1: 223, y1: 223, x2: 223, y2: 290, type: 'line', weight: 2 }); windowlist.push({ x1: 228, y1: 223, x2: 228, y2: 290, type: 'line', weight: 2 }); windowlist.push({ x1: 233, y1: 223, x2: 233, y2: 290, type: 'line', weight: 2 }); //for creating building 9 windows windowlist.push({ x1: 249, y1: 290, x2: 262, y2: 290, type: 'line', weight: 3 }); windowlist.push({ x1: 249, y1: 300, x2: 262, y2: 300, type: 'line', weight: 3 }); windowlist.push({ x1: 249, y1: 310, x2: 262, y2: 310, type: 'line', weight: 3 }); windowlist.push({ x1: 249, y1: 320, x2: 262, y2: 320, type: 'line', weight: 3 }); windowlist.push({ x1: 249, y1: 330, x2: 262, y2: 330, type: 'line', weight: 3 }); windowlist.push({ x1: 249, y1: 340, x2: 262, y2: 340, type: 'line', weight: 3 }); windowlist.push({ x1: 249, y1: 350, x2: 262, y2: 350, type: 'line', weight: 3 }); windowlist.push({ x1: 249, y1: 360, x2: 262, y2: 360, type: 'line', weight: 3 }); //for creating building 10 windows windowlist.push({ x1: 290, y1: 290, x2: 302, y2: 290, type: 'line', weight: 3 }); windowlist.push({ x1: 290, y1: 300, x2: 302, y2: 300, type: 'line', weight: 3 }); windowlist.push({ x1: 290, y1: 310, x2: 302, y2: 310, type: 'line', weight: 3 }); windowlist.push({ x1: 290, y1: 320, x2: 302, y2: 320, type: 'line', weight: 3 }); windowlist.push({ x1: 290, y1: 330, x2: 302, y2: 330, type: 'line', weight: 3 }); windowlist.push({ x1: 290, y1: 340, x2: 302, y2: 340, type: 'line', weight: 3 }); windowlist.push({ x1: 290, y1: 350, x2: 302, y2: 350, type: 'line', weight: 3 }); windowlist.push({ x1: 290, y1: 360, x2: 302, y2: 360, type: 'line', weight: 3 }); //for creating building 11 windows windowlist.push({ x: 322, y: 215, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 337, y: 215, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 322, y: 235, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 337, y: 235, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 322, y: 255, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 337, y: 255, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 322, y: 275, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 337, y: 275, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 322, y: 295, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 337, y: 295, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 322, y: 315, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 337, y: 315, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 322, y: 335, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 337, y: 335, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 322, y: 355, size: 8, type: 'square', weight: 3 }); windowlist.push({ x: 337, y: 355, size: 8, type: 'square', weight: 3 }); //for creating building 12 windows windowlist.push({ x: 358, y: 280, w: 10, h: 84, type: 'rect', weight: 3 }); //for creating building 13 windows windowlist.push({ x: 263, y: 184, size: 5, type: 'square', weight: 3 }); windowlist.push({ x: 273, y: 184, size: 5, type: 'square', weight: 3 }); windowlist.push({ x: 283, y: 184, size: 5, type: 'square', weight: 3 }); windowlist.push({ x: 263, y: 204, size: 5, type: 'square', weight: 3 }); windowlist.push({ x: 273, y: 204, size: 5, type: 'square', weight: 3 }); windowlist.push({ x: 283, y: 204, size: 5, type: 'square', weight: 3 }); windowlist.push({ x: 263, y: 224, size: 5, type: 'square', weight: 3 }); windowlist.push({ x: 273, y: 224, size: 5, type: 'square', weight: 3 }); windowlist.push({ x: 283, y: 224, size: 5, type: 'square', weight: 3 }); windowlist.push({ x: 263, y: 244, size: 5, type: 'square', weight: 3 }); windowlist.push({ x: 273, y: 244, size: 5, type: 'square', weight: 3 }); windowlist.push({ x: 283, y: 244, size: 5, type: 'square', weight: 3 }); windowlist.push({ x: 263, y: 264, size: 5, type: 'square', weight: 3 }); windowlist.push({ x: 273, y: 264, size: 5, type: 'square', weight: 3 }); windowlist.push({ x: 283, y: 264, size: 5, type: 'square', weight: 3 }); // for creating building 14 windows windowlist.push({ x: 98, y: 267, w: 5, h: 10, type: 'rect', weight: 3 }); windowlist.push({ x: 109, y: 267, w: 5, h: 10, type: 'rect', weight: 3 }); windowlist.push({ x: 120, y: 267, w: 5, h: 10, type: 'rect', weight: 3 }); //for creating building 15 windows windowlist.push({ x1: 110, y1: 206, x2: 110, y2: 250, type: 'line', weight: 5 }); //for creating building 16 windows windowlist.push({ x1: 38, y1: 251, x2: 38, y2: 290, type: 'line', weight: 5 });}function draw() { background(0, 25); //transparency for the "twinkling" effect //for loop to generate the stars for (let i = 0; i < 50; i++ //50 == number of stars to be generated ) { let starX = random(0, width); // randomizing x position of the generated star let starY = random(0, height); // randomizing y position of the generated star let star_size = random(1, 3); //randomizing size of the generated star stroke(255); strokeWeight(star_size); point(starX, starY); } fill(0); strokeWeight(2); stroke(255); //ground rect(0, 374, 400, 26); //decorative lines for the buildings of the cityscape line(111, 167, 111, 189); line(167, 168, 167, 187); line(182, 162, 182, 187); line(193, 163, 193, 197); //buildings drawn through rect() function rect(28, 237, 20, 137); rect(100, 193, 20, 181); rect(91, 256, 40, 118); rect(23, 302, 33, 72); rect(56, 260, 20, 114); rect(76, 290, 40, 84); rect(116, 284, 20, 90); rect(136, 284, 20, 90); rect(141, 220, 25, 154); rect(166, 190, 30, 184); rect(210, 212, 30, 162); rect(204, 296,30,78) rect(256, 170, 40, 204); rect(282, 274, 50, 100); rect(312, 200, 45, 174); rect(348, 265, 30, 109); rect(241, 275, 30, 99); rect(184,296,50,78) //for loop to create windows for the building for(let i=0; i<windowlist.length;i++) //looping through the windowlist { let light = random(4); // generating a random number between 0 and 4 for each window // randomly choosing the light color of the window using the generated random number if (light <=1 ) // situation 1: randomly generated number is less than or equal to 1 { //color:(neon) yellow stroke(255,255,0) fill(255, 255, 0);} else if (light<=2) // situation 2: randomly generated number is less than or equal to 2 {stroke(77,238,234) fill(77,238,234);} else if (light<=3) // situation 3: randomly generated number is less than or equal to 3 {stroke(116,238,21) fill(116,238,21);} else // situation 4: randomly generated number is less than or equal to 4 {stroke(240,0,255) fill(240,0,255);} //creating window based on the type of the shape of the window indicated in each dictionary in the windowlist //window drawn using line() function if (windowlist[i].type=='line'){ strokeWeight(windowlist[i].weight) line(windowlist[i].x1,windowlist[i].y1,windowlist[i].x2,windowlist[i].y2)} //window drawn using rect() function else if (windowlist[i].type=='rect'){ strokeWeight(windowlist[i].weight) rect(windowlist[i].x,windowlist[i].y,windowlist[i].w,windowlist[i].h)} //window drawn using sqaure() function else{ strokeWeight(windowlist[i].weight) square(windowlist[i].x,windowlist[i].y,windowlist[i].size)} } //moon stroke("yellow"); fill("yellow"); circle(330, 72, 50);}