let buildings = []; var t = 0; var scalX = 0; var scalY = 0; var t0 = 0; var ranA = 0.9; var ranB = 0.1; var ranC = 1; var ranD = 100; var switchs = 0; function setup() { //createCanvas(1920, 1080); //background(220, 220, 220); createCanvas(windowWidth, windowHeight); background(220); noStroke(); build(); noStroke(); fill(72, 89, 113); var masX = 0; var masY = 0; var x = masX + 0; var y = masY + 10; var h = 10; var w = h * 2; generateBuildings(); } function generateBuildings() { let masX = 0; let masY = 0; let x = masX; let y = masY + 10; let h = 20; let w = h * 1.1; for (let j = 0; j < 100; j++) { for (let i = 0; i < 50; i++) { let blueWindow = random() < 0.25; let s = random([1,2,3]); buildings.push({ x:x, y:y, w:w, h:h, blueWindow:blueWindow }); x += w + h; w = h * s; if(x > width) break; } x = masX; } } function draw() { for (var i = 0; i < width; i += 5) { var x = i; var y = t % height; let col = get(x, y); colorMode(RGB, 255); let c = color(col); let h = hue(c); let s = saturation(c); let l = lightness(c); colorMode(HSL, 360, 100, 100, 1); fill((h * 1.01) % 360, s * 0.999, l + 1 / 2); colorMode(RGB); if (random() < 0.0001) fill(0, 0, 255); if (random() < 0.0001) fill(0, 255, 0); if (random() < 0.0001) fill(255, 0, 0); var offset = int(t / height); x = map(x, 0, width, -scalX, width + scalX); y = y + map(noise(x / 1000 + offset), 0, 1, -0.49, 1) * 100; if (switchs == 0) { y = y + map(noise(x / 1000 + offset), 0, 1, 0, 0.5) * 100; }else{ y = y + map(noise(x / 1000 + offset), 0, 1, -1, 1) * 100; } console.log(map(noise(x / 1000 + offset), 0, 1, -1, 1) * 100) y = map(y, 0, width, -scalY, width + scalY); if (noise(x / 100 + offset * 100, y / 5000) < 0.5) rect(x, y, 5, 5); } t += 5; if (t % height == height - 10) { scalX = random(-20, 20); if (random() < 0.5) scalX = int(scalX); if (random() < 0.2) scalX = 0; scalY = random(-20, 20); if (random() < 0.5) scalY = int(scalX); if (random() < 0.2) scalY = 0; switchs = 1; var r = random([0, 255]); var g = random([0, 255]); var b = random([0, 255]); fill(r, g, b); rectMode(CENTER); rect(random(width), random(height), random(400), random(200)); rectMode(CORNER); } colorMode(RGB); build(); noStroke(); var a = random([0, 1]); if (switchs == 0) { a = 0; t0 = 0; } if (switchs == 1) { if (random() < 0.01) ranA = random([0.9, 0.99, 0.999, 0.9999]); if (random() < 0.01) ranB = random([0.1, 0.5, 0.7, 0.9]); if (random() < 0.01) ranC = random([1, 1, 1, 2, 5, 100]); if (random() < 0.01) ranD = random([1, 1, 1, 2, 5, 100]); if (random() < ranA) { for (let i = 1; i < width; i++) { var colR = get(i % width, (t0 - 1) % height); var colG = get(i % width, (t0 - 1) % height); var colB = get(i % width, (t0 - 1) % height); fill(colR[1], colG[2], colB[0]); if (a == 0 && random() < ranB) { rect(i, t0 % height, ranC, ranD); } } } t0++; } for (var i = 0; i < 100; i++) { var linex0 = random(width); var linex1 = random(height); var liney0 = random(width); var liney1 = random(height); var col0 = get(linex0, liney0); var col1 = get(linex1, liney1); let ss = saturation(col0); if ( col0[0] == col1[0] && col0[1] == col1[1] && col0[2] == col1[2] && ss > 10 ) { stroke(col0); strokeWeight(random(2)); noFill(); bezier( linex0, liney0, random(linex0, linex1), random(liney0, liney1), random(linex0, linex1), random(liney0, liney1), linex1, liney1 ); } noStroke(); } } function build(){ colorMode(RGB); fill(158,158,200); rect(0,0,width,30); for(let b of buildings){ fill(149,156,255); rect(b.x,b.y,b.w+5,b.h+4); fill(93,112,138); rect(b.x,b.y,b.w+5,b.h+2); fill(149,156,175); rect(b.x,b.y,b.w+3,b.h+2); fill(72,72,72); if(b.blueWindow){ fill(0,0,255); } rect(b.x,b.y,b.w,b.h); fill(0,112,138); rect(b.x+(b.w*2)/5,b.y,b.h/4+2,b.h); fill(169); rect(b.x+(b.w*2)/5,b.y,b.h/4,b.h); } }