Propozycja 
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.1/p5.min.js"></script>
<!-- <script src="http://188.68.232.96/script.js"></script> -->
<div class="page-container">
<div>
<h2>Czym jest Lorem Ipsum?</h2>
<p class="green"><b>Lorem Ipsum</b> jest tekstem stosowanym jako przykładowy wypełniacz w przemyśle poligraficznym. Został po raz pierwszy użyty w XV w. przez nieznanego drukarza do wypełnienia tekstem próbnej książki. Pięć wieków później zaczął być używany przemyśle elektronicznym, pozostając praktycznie niezmienionym. Spopularyzował się w latach 60. XX w. wraz z publikacją arkuszy Letrasetu, zawierających fragmenty Lorem Ipsum, a ostatnio z zawierającym różne wersje Lorem Ipsum oprogramowaniem przeznaczonym do realizacji druków na komputerach osobistych, jak Aldus PageMaker</p>
</div>
<div>
<h2>Do czego tego użyć?</h2>
<p>Ogólnie znana teza głosi, iż użytkownika może rozpraszać zrozumiała zawartość strony, kiedy ten chce zobaczyć sam jej wygląd. Jedną z mocnych stron używania Lorem Ipsum jest to, że ma wiele różnych „kombinacji” zdań, słów i akapitów, w przeciwieństwie do zwykłego: „tekst, tekst, tekst”, sprawiającego, że wygląda to „zbyt czytelnie” po polsku. Wielu webmasterów i designerów używa Lorem Ipsum jako domyślnego modelu tekstu i wpisanie w internetowej wyszukiwarce ‘lorem ipsum’ spowoduje znalezienie bardzo wielu stron, które wciąż są w budowie. Wiele wersji tekstu ewoluowało i zmieniało się przez lata, czasem przez przypadek, czasem specjalnie (humorystyczne wstawki itd).</p>
</div>
</div>
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
border: 0;
}
main { /* Twoje animowane tło tego używa */
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
z-index: -1;
}
.page-container {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0,0,0,0.2); /* Możesz zmienić kolor tła nad animacją */
/*
rgba(0,0,0,0.8)
rgba(0,255,0,0.25)
*/
overflow-y: auto;
padding: 1em; /* Możesz zmienić odstęp wokoło treści na stronie*/
}
/* Przykładowe style dla tekstu */
h2 {
font-size: 2em;
color: limegreen;
}
p {
font: 1.6em Arial;
color: orange;
padding: 1em;
}
.green {
background-color: rgba(0,255,0,0.25);
border-radius: 1em;
border: 0.15em solid rgba(0,255,0,0.15);
}
let p=[];
let n=500;
function setup(){
createCanvas(windowWidth,windowHeight);
strokeWeight(0.5);
for(let i=0;i<n;i++){
p.push(new plankton());
}
}
function draw(){
background(0,10,50);
translate(width/2,height/2);
t=frameCount/1200
rotate(t*3)
for (let i = 0;i<n;i++){
p[i].move();
p[i].display();
}
}
class plankton{
constructor(){
this.x1=randomGaussian(-width/2,width/2);
this.y1=randomGaussian(-height/2,height/2);
this.type = int(random(1,4.2))
this.size = int(random(3,20))
this.radius = random(100,400)
this.x=this.x1;
this.y=this.y1;
}
move(){
this.x = this.x1*cos(t*this.type-this.radius)-this.x1*sin(this.type*t)-this.x/4*sin(t+this.x1);
this.y = this.y1*cos(t/this.size)+this.y1*sin(t+this.radius)*cos(t/5+this.x1);
}
display(){
push()
rotate(t/1000*this.size)
if (this.type === 1){
stroke(255);
fill(0,180-this.x/2,200+this.y/2);
circle(this.x,this.y,this.size);
noStroke()
fill(190,120,90+this.y/2,90);
circle(this.x,this.y,this.size/2);
fill(190+this.x/2,190,90,90);
circle(this.x,this.y,this.size/4);
}
if (this.type === 2){
push()
rotate(this.radius*2)
fill(this.x/10,180-this.x/2,200+this.y/2);
stroke(0,180-this.x/2,200+this.y/2);
for(let j=0;j<this.size;j++){
push()
rotate(j/50+this.x/1000);
rect(this.x,this.y+j*2,this.size/5,this.size/20)
pop()
}
pop()
}
if (this.type ===3){
push()
rotate(this.radius*2)
stroke(255)
noFill()
for(let j=0;j<this.type;j++){
push()
arc(this.x, this.y+j, this.size*4, this.size*4, 0, TWO_PI/(this.size/2))
pop()
}
pop()
}
if (this.type ===4){
stroke(255)
push()
translate(this.x,this.y)
for (let j=0;j<this.size*2;j++){
rotate(j)
point(j/4,j/4)
}
pop()
}
pop()
}
}
function mouseClicked(){
p=[];
for(let i=0;i<n;i++){
p.push(new plankton());
}
}
