body {
margin: 0;
padding: 0;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: black;
}
//no comments on this one - horsetail is ancient - Paleozoic era and is related to ferns. It has nodes along its stalk.
//wccchallenge for "nodes"
let reeds;
let nReeds ;
function setup(){
createCanvas(windowWidth,windowHeight);
nReeds = int(random(width/12,width/8))
angleMode(DEGREES);
strokeWeight(0.1);
noFill();
reeds = [];
for(let i = 0;i<nReeds;i++){
reeds[i] = createVector(random(-width/2,width/2),random(0.5,2.8));
}
}
function draw(){
translate(width/2,height/2)
for(let i = 0;i<10;i++){
r = randomGaussian(0,width/4)
arc(0,-height/4,r,r,random(0,360),random(0,360))
}
t = 255;
background(t,t,t,10)
for(let i = 0;i<nReeds;i++){
push()
translate(reeds[i].x,height/2 + reeds[i].y*2)
scale(1-0.3*sin(reeds[i].x),reeds[i].y)
stroke(255-t+10+reeds[i].y*30)
rotate((reeds[i].y*reeds[i].x*2)%20+10*sin(frameCount/30*reeds[i].y))
if((reeds[i].y)>1&&reeds[i].y<1.3){
horseTail(2,reeds[i].y,reeds[i].x)
}else{
horseTail(1)
}
pop()
}
}
function horseTail(n,p,q){
if (n===1){
push()
noFill()
tilt = random(-6 ,6)
h = random(10,20)
segment(0,0,70,5,3,tilt,10)
tilt2 = random(-6 ,6)
segment(tilt/3,-85,53,3,3,tilt2,8)
for(let i = 0;i<2;i++){
arc(0,-118,45,85,random(-20,20),180+random(-20,20))
arc(0,-118,65,85,random(-20,20),180+random(-50,20))
arc(0,-118,95,85,40+random(-20,20),140+random(-50,20))
}
segment(tilt/3,-150,30,2,3,tilt2,5)
for(let i = 0;i<2;i++){
arc(0,-175,35-p*3,65,p*2+random(-20,20),180+random(-20,20))
arc(0,-175,45-p*3,65,random(-20,20),180+random(-50,20))
arc(0,-175,65-p*2,65,40+random(-20,20),140+random(-50,20))
arc(0,-175,25-p*3,65,40+random(-20,20),140+random(-50,20))
}
segment(tilt/3,-190,30,1,3,tilt2,2)
for(let i = 0;i<2;i++){
arc(0,-196,35,25,20+random(-20,20),160+random(-20,20))
arc(0,-196,45,25,30+random(-20,20),150+random(-50,20))
arc(0,-196,65,25,40+random(-20,20),140+random(-50,20))
arc(0,-196,25,25,40+random(-20,20),140+random(-50,20))
}
for(let j = 0;j<10;j++){
for(let i = 0;i<2;i++){
arc(0,-238-j*6,25-j*2,25,20+random(-20,20),160+random(-20,20))
arc(0,-238-j*6,35-j*2,25,30+random(-20,20),150+random(-50,20))
arc(0,-238-j*6,45-j*2,25,40+random(-20,20),140+random(-50,20))
arc(0,-238-j*6,15-j,25,40+random(-20,20),140+random(-50,20))
}
}
pop()
}
if (n===2){
noFill()
tilt = random(-6 ,6)
h = random(10,20)
segment(0,0,70,5,3,tilt,10)
tilt2 = random(-6 ,6)
segment(tilt/3,-85,53,3,3,tilt2,8)
segment(tilt/3,-150,30,2,3,tilt2,5)
segment(tilt/3,-190,30,1,3,tilt2,2)
for(let j = 0;j<15;j++){
for(let i = 0;i<2;i++){
arc(0,-238-j*2,15-j*2,25 ,20+random(-20,20),160+random(-20,20))
arc(0,-238-j*2,25-j*1.5,25,30+random(-20,20),150+random(-50,20))
arc(0,-238-j*2,35-j*1.5,25,40+random(-20,20),140+random(-50,20))
arc(0,-238-j*2,15-j,25,40+random(-20,20),140+random(-50,20))
}
}
}
}
function segment(x,y,s,xdelta,ydelta,tilt,h){
for(let i = 0;i<h;i++){
line(x+random(-xdelta,xdelta),y+random(-ydelta,ydelta),x+random(-xdelta/2,xdelta/2),y-s+random(-3,3),)
}
}
function mousePressed(){
setup()
draw()
}
This Pen doesn't use any external CSS resources.