p5.js - Towers
https://editor.p5js.org/LVRS/sketches/ptMxiF_U-
// Set up the canvas
let rotationX, rotationY;
let rainDrops = [];
let rows = 150; // number of rows in the grid
let cols = 150; // number of columns in the grid
let scl = 25; // scaling factor for the grid
let zoff = 0.9; // z offset for Perlin noise
let zrange = 1000; // range of z position
function setup() {
createCanvas(600, 800, WEBGL);
rotationX = random(-PI / 3, PI / 3);
rotationY = random(-PI / 3, PI / 3);
for (let i = 0; i < 1000; i++) {
let x = random(-1500, 1500);
let y = random(-1000, 250);
let z = random(-1000, 1000);
rainDrops.push({ x: x, y: y, z: z });
}
}
// Draw the scene
function draw() {
let numPlanes = Math.floor(random(14, 30)); // random number of planes
background(random(35, 225));
rotateX(-1.27);
rotateY(3.14);
rotateZ(random(1, 3));
translate(random(-50, 800), random(-50, 50), 0);
// Set up the lights
pointLight(255, 255, 255, 500, -1200, -1200);
ambientLight(80);
// Draw the three sets of telephone poles, wires, and planes
for (let i = 0; i < 10; i++) {
let x = random(-300, 300); // random x position
let y = random(-700, 700); // random y position
push();
translate(x, y, 0);
// Draw the telephone poles
strokeWeight(0.5);
stroke(random(255), random(255), random(255), 100);
for (let x = -40; x <= 70; x += 50) {
for (let y = -40; y <= 70; y += 50) {
push();
translate(x, y, 0);
box(0.5, 0.5, 440);
pop();
}
}
// Draw the wires
noFill();
stroke(random(255), random(255), random(255), random(255));
for (let x = -80; x <= 80; x += 55) {
beginShape();
for (let y = -80; y <= 80; y += 55) {
push();
translate(x, y, random(500, -170));
box(random(10, 30));
pop();
}
}
// Draw the translucent planes with a random gradient
let c1 = color(random(255), random(255), random(255), random(255));
let c2 = color(random(255), random(255), random(255));
for (let i = 0; i < numPlanes; i++) {
let z = map(i, 0, 12, -200, 200); // calculate z position
let c = lerpColor(c1, c2, i / 12); // calculate color for this plane
push();
translate(0, 0, z);
specularMaterial(c);
fill(c);
noStroke();
box(150, 150, 8);
pop();
noLoop();
}
pop();
}
// Draw the grid of lines on the ground
push();
strokeWeight(0.1);
stroke(150);
specularMaterial(5);
for (let x = -1000; x <= 1000; x += 20) {
line(x, -1000, -220, x, 1000, -220);
}
for (let y = -1000; y <= 1000; y += 20) {
line(-1000, y, -220, 1000, y, -220);
}
pop();
// Draw the static rain drops in the sky
push();
rotateX(-HALF_PI); // rotate rain drops by 90 degrees around x-axis
for (let i = 0; i < rainDrops.length; i++) {
let dropa = rainDrops[i];
let z = map(i, 0, 12, -300, 300);
let c1 = color(150, 150, 255); // start color
let c2 = color(255); // end color
let c = lerpColor(c1, c2, map(z, -800, -200, 0, 1));
stroke(255, 255, 255, 100);
strokeWeight(2);
line(dropa.x, dropa.y, dropa.z, dropa.x, dropa.y + 8, dropa.z);
}
pop();
stroke(0); // set the stroke color to black
strokeWeight(2); // set the stroke weight to 2 pixels
noFill(); // disable fill
// CLOUDS loop through each row and column of the grid
translate(-1200, -1200, 400);
stroke(150);
strokeWeight(2); // set the stroke weight to 4 pixels
noFill(); // disable fill
for (let y = 0; y < rows; y++) {
beginShape();
for (let x = 0; x < cols; x++) {
// calculate the x, y, and z position of each vertex in the grid
let posX = x * scl;
let posY = y * scl;
let posZ = noise(x / 30, y / 30, zoff) * zrange;
vertex(posX, posY, posZ); // add the vertex to the shape
}
endShape();
}
push();
{
translate(1500, 500, 900);
fill(220, 220, 220, 40);
noStroke();
sphere(80);
}
pop();
// Update the camera rotation
rotationX += 0.01;
rotationY += 0.01;
}