Modeling Grass

with Math

and SVG

and React

Presentation: https://grassvg.mikekelly.io
Code: https://github.com/mikekellyio/grassvg

Real Grass

Generated Grass

Generated blade of grass

How?

Parabolas

De Castlejau's Algorithm

Given 3 points, we can approximate a parabola

De Castlejau's Algorithm

Divide the segments AB and BC into an arbitrary number of steps

De Castlejau's Algorithm

Connect the steps with their own line segments.

De Castlejau's Algorithm

The same fraction (t) that the line segment QR started at, is P.


										point(a, b, c, t) {
										  var q = (1 - t) * a + t * b;
										  var r = (1 - t) * b + t * c;
										  var p = (1 - t) * q + t * r;
									
										  return p;
										}

De Castlejau's Algorithm

Connect all the points P to form a parabola


									  line(numSteps) {
										  var l = [];
										  for (var currentStep = 0; 
											     currentStep <= numSteps; 
											     currentStep++) {
										    var t = currentStep/numSteps;
										    l.push(this.point(a, b, c, t));
										  }
									
										  return l;
										}

De Castlejau's Algorithm

If we increase the number of steps, we get a higher resolution parabola

Modeling Grass using a Parabola

Looks kind of skinny...


var parabola = 
  new Parabola(a,b,c);

var line = parabola.line(20);
var svgLine = 
  <polyline
    points={line.join(" ")}
    strokeWidth="3"
    stroke="green"
    fill="none"
  />

Generate perpendicular lines to form ribs along the parabola


var points = [];
for (var i = 1; i < line.length; i++) {
  //get perpendicular line 
  //to each line segment
  //of the approximated parabola
  var rib = 
    perpendicular(line[i - 1], 
      line[i], 
      length);
  points.push(rib);
}
var ribs = points.map((p, i) => (
  <line className="rib" 
    {...p} 
    strokeWidth="2" 
    stroke="#999" 
    key={i} />
));

Draw new outline using endpoints of the ribs, and Voilà!

Voilà * 50!

SVG Transforms & Filters

Filter Definition

Transforms



  
    {grassBlades}
    {grassBlades}
  
  
    {grassBlades}
    {grassBlades}
  
  {grassBlades}