Plants

plants.markdown

Plants

A Pen by Joe Lanman on CodePen.

License.

script.js

var svg = Snap(400,300)
svg.attr({ id: 'svg' })

const growthVariance = 30
const maxGrowth = 60
const maxAngle = Math.PI/3
const maxLength = 8

var grow = function(plant){

  var growth = maxGrowth - Math.random() * growthVariance
  growth = growth * (maxLength-plant.length)/maxLength
  console.log("growth", growth)

  plant.direction += Math.random() * (maxAngle) - (0.5 * maxAngle)
  console.log("direction", plant.direction)

  var x = Math.sin(plant.direction) * growth
  console.log("x", x)
  var y = -Math.cos(plant.direction) * growth
  console.log("y", y)

  plant.pathString += `l ${x} ${y}`
  console.log("pathString", plant.pathString)
  
  plant.length += 1
  console.log("length", plant.length)
  
  if (plant.length < maxLength){
    grow(plant)
  }
}

var draw = function(plant){
    let path = svg.path(plant.pathString)
    path.attr({
      "stroke": "#337711",
      "strokeWidth": 2,
      "fill-opacity": "0",
      "stroke-opacity": Math.random()
    })
}
  
for (let count = 0; count<50; count++){
  
  var plant = {
    length: 0,
    direction: 0,
    pathString: "M 200 300",
    children: []
  }

  grow(plant)
  draw(plant)
  
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>

style.css

body{
  background: black;
  display: flex;
  align-items: center;
  justify-content: center;
}

#svg{
  background: #CCEEFF;
}