body {
background-color: black;
display: flex;
height: 100vh;
overflow: hidden;
align-items: center;
justify-content: center;
}
//a coded poem
let air; //there is this substance
let radiance = 3; //that drifts towards a light
let nBubbles = 1000; //encapsulated
function setup() {
c = max(800, min(windowWidth, windowHeight)) * 0.9; //in which you witness
createCanvas(c, c); //through your senses
background(0); //from nothing
ctr = createVector(
random(-width / 5, width / 5),
random(-height / 5, -height / 3)
); //to a single point
hues = {
r1: random(0, 50),
g1: random(100, 150),
b1: random(140, 200)
}; //it is from the depths
noStroke(); //without definition
air = [];
for (let i = 0; i < nBubbles; i++) {
air.push(new Air());
} //you can see what catches the light
}
function draw() {
translate(width / 2, height / 2); //your position
t = frameCount; //in time
push(); //is relative
rotate(-t / 2000); //to the rotation of everything
for (let i = c * 2.5; i > 0; i -= 4) {
//that is focused - here
fill(
hues.r1 + 180 - i / radiance,
hues.g1 + 180 - i / radiance,
hues.b1 + 180 - i / radiance,
80
);
circle(ctr.x, ctr.y, i);
}
for (let i = 0; i < air.length; i++) {
air[i].move(); //change
air[i].display(); //is what makes you aware of life
}
pop();
//here you are - now you are - from beneath
}
class Air {
constructor() {
this.r = random(0, c);
this.theta = random(0, TWO_PI);
this.s = random(1, 5);
this.speed1 = random(0.05, 0.1);
this.speed2 = random(0.0001, 0.0005);
}
display() {
push();
fill(255, 255, 255, 20);
stroke(255, 255, 255, 50);
circle(
ctr.x + this.r * cos(this.theta),
ctr.y + this.r * sin(this.theta),
this.s
);
stroke(255);
strokeWeight(1);
noFill();
arc(
ctr.x + this.r * cos(this.theta),
ctr.y + this.r * sin(this.theta),
this.s,
this.s,
this.theta,
this.theta + PI / 4
);
pop();
}
move() {
if (this.r > 0) {
this.r -= this.speed1;
this.theta += this.speed2;
this.s = this.s * 0.9999;
} else {
this.r = random(c, c * 1.5);
this.s = random(1, 6);
}
}
}
function mousePressed() {
setup();
draw();
}
This Pen doesn't use any external CSS resources.