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()
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js