# Waving Reed in a snowglobe (p5.js)

## Introduction

In the previous article I talked about creating waving grass in a p5.js project using typescript. In this article I want to talk about a similar style of sketch but now with a focus on ‘tree like structures’ with branches as an intermediate step to the full blown trees. This project, as a stepping stone to having actual trees, I call ‘Waving reed in a snowglobe’.

### Branches and growth

When you look at how nature makes trees grow there is some algorithmic logic to be distilled right? A sapling starts growing from a seed in the ground towards the sky (or is it away from gravity’s pull). Once above ground it will grow further to the sky while expanding it’s diameter becoming a more sturdy trunk and in the meantime branches appear. First one to the left then another to the right. These branches behave like the main branch, grow toward the light, increase in diameter (still relative to the main branch) and develop it’s own sub branches.

There are loads of discussions on how to solve this problem, think of fractal like behaviour, attraction based growth algorithms etc.

## Sun as an attractor

For this implementations I started out with a very naive approach (I like naive very much) with a virtual walker object that will first draw the main branch, then at a certain point create a sub branch by walking in a certain direction (preferrably up and not down), preferrably in a different direction than previously, for instance left vs right etc. That turned out to be rather complicated (and boring to be honest) because I ended up writing a lot of silly code like

``````- choose a point on a branch
- determine the angle of the branch with it's parent branch
- choose a new angle into a new part of space (based on the rules: not occupied yet and has more light available than the alternatives)
- etc.
``````

As you can see a smart guy could pull this of but for me this felt like over-micro-engineering and I quickly realized I had to stop this foolishness. (learned a lot about the P5 Vector system in the process though).

So in the next iteration I tried to solve the problem in another way. I introduced a ‘sun’ object that traveled through a imaginary curve in the sky that was generating an attraction force that would be used by the growing branch to determine the direction and speed (or length if you will) of the growth.

## The sketch

As with the previous grass demo I also wanted to incorporate the wind force when clicked so if you look at the main sketch (main.ts) you will see the typical P5 methods implemented.

``````    p5.setup = () =>
{
// setup things here
};

p5.draw = () =>
{
// make use of the P5 drawing loop here
};

p5.mousePressed = () =>
{
};``````

# The code

The code for this project can be found at Github

When you clone the repository you will get a project structure like this.

``````main-folder/
├─ node-modules
├─ out
├─ src
│  ├─ factories
│  │  ├─ reedFactory.ts
│  │  ├─ snowGlobeFactory.ts
│  │  ├─ sunFactory.ts
│  ├─ shapes
│  │  ├─ bottom.ts
│  │  ├─ branch.ts
│  │  ├─ reed.ts
│  │  ├─ snowGlobe.ts
│  ├─ directionType.ts
│  ├─ main.ts
│  ├─ reedArtist.ts
├─ tests
├─ index.html
├─ package.json
├─ tsconfig.json
``````

## What’s with all these factories

You’ll notice that for this project I use three factory classes: the `sunFactory`, the `snowGlobeFactory` and the `reedFactory`. You can solve this problem any way you like but I like to treat my objects as complex types with behaviour and I’m usually not very interested in how they are created I just need some method that has all the information available to be able to fullfill my request. The factory pattern suits me very well in that sense. The idea behind the factory pattern is, well very similar to the real life factory concept; you create a factory with all it’s machinery, knowledge and resources and you as a factory customer just order a product that this factory can produce. You do not have to know how this product is created, you do not need any info on the resources acquired, scheduling transport etc. That is how I treat my factories. Eventually I want to display a reed object on the canvas and my factory class knows how to create that object.

## The snow globe

The `snowGlobe` object is a tongue in cheek representation/visualisation of the arc at which the sun or attractor object can be found at the different intervals. The object is a composite of a simple rectangle object at the bottom and a sun object represented by the curve.

## The sun

The `sun` object then basically is just a curve and an attractor positioned on the curve at time `t` and implements an attract function that takes the end of a branch (in the form of a vector) and a `t`, range 0 to 1 to get a specific location on the curve.

``````    attract = (branchEnd: P5.Vector, t: number): P5.Vector =>
{
const location = this._getLocation(t);
const force = P5.Vector.sub(location, branchEnd);
let distance = force.mag();
distance = this._p5.constrain(distance, 5.0, 25.0);
force.normalize();
const strength = this.solarForce * distance;
force.mult(strength);
return force;
}``````

What I want to express here is a attraction force on a ‘growing’ branch. This force has a direct relation with the position of the ‘sun’ on the curve and the distance of the ‘growing’ branch and the attractor object.

`_getLocation()` is the function to determine a position on the curve at `t` where `t` between 0 and 1 using p5’s curvepoint function.

``````    _getLocation = (t: number): P5.Vector =>
{
const x = this._p5.curvePoint(
this._curveStartControlX,
this._curveStartX,
this._curveEndX,
this._curveEndControlX,
t);
const y = this._p5.curvePoint(
this._curveStartControlY,
this._curveStartY,
this._curveEndY,
this._curveEndControlY,
t);
const location = this._p5.createVector(x, y);
return location;
}``````

## The reedFactory

The `reedFactory` class is where all the nasty work of branch creation is done. The `reedFactory` is constructed with details of the canvas we are drawing on and gets a reference to the `sun` object to determine the attraction force at a certain moment in time.

Furthermore the `reedFactory` has the notion of the number of branches it needs to create.

``````    createReed = (x: number, height: number): Reed =>
{
const allBranches = this._create(x, height);
const reed = new Reed(this._p5, allBranches);

return reed;
}``````

If we break down the `_create` function we can see the following logic.

• create a main trunk
• create a branch on this trunk (loop)
• while doing that determine the general direction to grow to (EAST or WEST)
• position the sun in the eastern of western ‘hemisphere’
• create a branch starting from the parent in the direction of the sun (attractor)
• and of course use some recursion for the additional sub branches

Which looks like this.

``````    _create = (x: number, height: number): Array =>
{
let result = new Array();

const trunk = this._createTrunk(x, height);
result.push(trunk);
for (let i = 1; i
{
const start = this._p5.createVector(x, height);
const end = this._p5.createVector(x, this._drawHeight);
const startControl = this._createStartControl(start, end);
const endControl = this._createEndControl(start, end);

const trunk = new Branch(this._p5, start, startControl, end, endControl, undefined, undefined);
return trunk;
}``````

Then this main trunk is handed over to the `_createBranch` method that will create branches with more branches recursively.

``````    createBranch = (parent: Branch,
direction: DirectionType,
branchContainer: Array,
index: number,
level: number,
iterations: number): Array =>
{
// create connector to the parent
const start = this._getConnectorToTheParent(parent, level);

const end = start.copy();

// some magic nudging of the sun to get a different growth direction
index = index + this._p5.random(-2, 2);
let sunPositionOnCurve = this._determineSunPositionOnCurveForDirection(index, direction);
const attraction = this._sun.attract(end, sunPositionOnCurve).limit(parent.length / 2.5);

const startControl = this._createStartControl(start, end);
const endControl = this._createEndControl(start, end);

const branch = new Branch(this._p5, end, endControl, start, startControl, parent, level);
branchContainer.push(branch);

if (iterations == 0)
{
return branchContainer;
}
else
{
// some magic nudging of the level to obtain different connector nodes
// in the next recursive call
const nextLevel = this._p5.constrain(this._p5.randomGaussian(0.3, 0.5), 0.1, 0.8);
this._createBranch(branch, direction, branchContainer, index, nextLevel, iterations -1);
}
}``````

This method can be broken down in the following logic:

• get a position on the parent branch to start a new branch off
• determine a new position for the sun attractor to get a new heading to grow to
• create a new branch
• with this new branch as the new parent recursively call _createSub to create the new ‘offshoot’ branch (see the code repository to examine the details more closely)

## The reed and branch objects

The `branch` object is very similar to the `grass` object from my previous article with just a curve definition and an `animate` function. The main difference can be found in the `rewriteStart` function. The windforce that is moving the branch objects will change the curve of the object, but that means that the connected branch is also moving. The `rewriteStart` function makes sure that the curve’s start stays connected to the parent branch.

``````    rewriteStart = (): void =>
{
if (this.parent)
{
const x = this._p5.curvePoint(
this.parent.startControl.x,
this.parent.start.x,
this.parent.end.x, this.parent.endControl.x,
this.level);
const y = this._p5.curvePoint(
this.parent.startControl.y,
this.parent.start.y,
this.parent.end.y,
this.parent.endControl.y,
this.level);
this.end = this._p5.createVector(x, y);
}
}``````

The `reed` object is then actually just a container object for the interconnected branches with a `display` and an `animate` function to display and move the branches.

``````    display = (debug: boolean):void =>
{
this._branches.forEach(element =>
{
this._p5.beginShape();
element.draw(debug);
element.rewriteStart();
this._p5.endShape();
});
}

animate = (x: number): void =>
{
this._branches.forEach(element =>
{
element.animate(x);
});
}``````

## The artist class

And last but not least for convenience I wrap all this into an `artist` class that is constructed with all the factories and provides a simple `create` and `animate` function to the ‘user interface’ or better said the main class.

The rest of the main setup is then just plumbing.

``````const _canvasWidth = 900;
const _canvasHeight = 900;
const _bottomMargin = 150;
const _drawHeight = _canvasHeight - _bottomMargin;
const _debug = false;

const hsbColor = p5.floor(p5.randomGaussian(180, 50));
const _backgroundColor = "hsb(" + hsbColor + " , 40%, 80%)";
const sunFactory = new SunFactory(p5, _canvasWidth, _canvasHeight);
const snowGlobeFactory = new SnowGlobeFactory(p5, sunFactory, hsbColor, _canvasWidth, _canvasHeight, _drawHeight);
const reedFactory = new ReedFactory(p5, _canvasWidth, _drawHeight, _canvasHeight, sunFactory)
const artist = new ReedArtist(p5, reedFactory, snowGlobeFactory, _canvasWidth, _canvasHeight, _drawHeight)
``````

## The final result

Still no trees but hopefully a step in the right direction. Thanks for reading.

# Waving grass in processing (p5.js)

## Introduction

I saw the call for contributing a page to the Processing community catalog for the 20th birthday of the Processing Foundation and although my contribution to the community is very limited I was working on a waving grass sketch in Processing and at the same time I was looking for an opportunity to increase my collaboration skills. So this seems a perfect opportunity to give something back!

My contribution has the form of a technical article on how I implemented moving bezier curves in Processing with the intention to resemble ‘waving grass’ in the wind. The idea started from a completely different angle though. I’m currently working with an AxiDraw Plotter and have been porting some old Processing 3 code to a Java based Processing solution for a generative art project. What I really wanted to achieve was to algorithmically create trees and feed them directly into the plotter. While scouring the internet for information to help me controlling the AxiDraw plotter I stumbled upon Daniel Shiffman’s excellent and entertaining coding train tutorials on how to use vectors to mimic real life forces by creating this so called physics engine. This engine was the perfect solution to add to my generative art coding concepts to create trees and use ‘natural’ forces to alter the shapes of the trees.

## Not trees but grass

Ok that’s the why but of course my algorithmic trees were by no means ready yet and the physics engine was a completely new setup for me, so to start I dialed it back a little and tried to create a sketch that displays ‘waving grass’. Or in other words green bezier curves, immobile at one end, that are moved by force (wind).

## Warning typescript

The sketch that I will try to unfold is written using the p5.js framework using typescript and some object orientated implementations. For the typescript part, I personally think that it fits more with my own coding preferences but I also hope it can serve as an example if you ever want to code sketches in typescript. I like the type safety it provides a lot and it suites my style and object oriented approaches.

I will not talk about how to set this up there are some excellent resources out there to help you with that and I hope my coding is clear enough to follow.

I know that’s a dangerous statement, but here it goes. Full Source code here

## Waving grass

The sketch starts with an overall blue canvas with a green margin at the bottom representing the sky and the earth. A mouse click event in the canvas creates a new grass object and displays it while a the same time a ‘wind’ force is applied that makes the grass behave like it is waving in the wind. How cool is that!

# The sketch

The sketch is a canvas that responds to mouse clicks. When the mouse is clicked within the canvas it will will execute two new instructions and a movement update (drag):

1. draw a bezier curve at the clicked x coordinate from the start (bottom) to the end (top), the white dots in the image below. A control point at the bottom of the screen and a control point at the top of the screen, the red dots. Which then results in a bezier that is just a straight line.
1. apply a horizontal wind force that will move the top control point and the top of the bezier curve. Note that the top control point receive way more force than the top point of the curve itself.
1. the force will continuously be applied with a drag and when a boundary is reached the direction of the ‘wind’ force will change to the opposite direction which will result in a horizontal ‘bouncing’ of the bezier control and end point with a decreasing amplitude and the line will eventually stop moving after the force has died out because of the drag.

# The application setup

For this sketch I follow a typical javascript with Node.js structure with npm as the package manager. (did I mention I use Visual Studio Code as my editor). If you clone this repository from the github link you can and execute:

``````npm install
``````

and you should be ready to go.

The folder structure looks like this.

``````main-folder/
├─ node-modules
├─ out
├─ src
│  ├─ main.ts
│  ├─ grass.ts
│  ├─ grassFactory.ts
├─ tests
├─ index.html
├─ package.json
``````

To compile or transpile the code from typescript to javascript I use the command (from the package.json)

``````npm run -S esbuild-base -- --sourcemap
``````

Not 100% sure how that works but in the `package.json` there is a script statement that uses `esbuild` and `rollup` to generate a minified `main.js` in the out directory that is referenced in the `index.html`. You can just open the `index.html` file (Visual Studio Code has this nice feature of Live Server that you can use) to see the running sketch in your browser.

# The code

Let’s dive into the code.

## The Index.html

The `index.html` is the starting point for the browser and contains just the bare reference to the `main.js` file that holds the p5 javascript.

``````    Sketch
<a href="http://libraries/p5.min.js">http://libraries/p5.min.js</a>
<a href="http://libraries/p5.sound.min.js">http://libraries/p5.sound.min.js</a>

<a href="http://out/main.js">http://out/main.js</a>
``````

## The main class

The `main.ts` is a typical typescript setup for a p5 sketch.

``````const sketch = (p5: P5) =>
{
...
const _canvasWidth = 1024;
const _canvasHeight = 768;

p5.setup = () =>
{
p5.createCanvas(_canvasWidth, _canvasHeight);
};

p5.draw = () =>
{
p5.background("hsb(220, 50%, 70%)");

...
};
};
const mySketch = new P5(sketch);
``````

Setting up some screen dimension variables and the implementation of Processing’s setup and draw functions.

Then conceptually I introduce two objects:

• <b>the `grass` object</b> that will be able to draw itself and be animated
• and <b>the `grassFactory` object</b> that is capable of creating grass objects based on the mouse click coordinates.

In the `main.ts` file I use a backing field of type `Array` to store the created grass objects and the `grassFactory` is instantiated with some information about the drawing area and the total screen height.

``````import Grass from './grass';
import GrassFactory from './grassFactory';

...

const _bottomMargin = 150;

const _shapes = new Array();
const _drawHeight = _canvasHeight - _bottomMargin;
const _factory = new GrassFactory(p5, _drawHeight, _canvasHeight);
``````

The `grass` object consists of a `constructor`, a `draw` and an `animate` function. The draw function is used in the p5 draw loop and the animate function is used in the p5 `mousePressed` function implementation to animate the grass object or apply the wind force if you will.

``````p5.draw = () =>
{
p5.background("hsb(220, 50%, 70%)");
_shapes.forEach(element =>
{
element.draw(_debug);
});
};
``````

The `mousePressed` function is used to add a new `grass` object based on where the mouse click is located and also calls the `animate` function on all the existing grass objects to apply the ‘wind’ force.

``````p5.mousePressed = () =>
{
const shape = _factory.createShape(p5.mouseX);
_shapes.push(shape);
_shapes.forEach(element =>
{
element.animate(p5.mouseX);
});
};
``````

## The grassFactory object

The `grassFactory` is a simple factory class that is constructed with some canvas dimension information that is used to determine the size of the grass object.

``````constructor(P5: p5, drawHeight: number, canvasHeight: number)
{
this._p5 = P5;
this._drawHeight = drawHeight;
this._canvasHeight = canvasHeight;
}
``````

And implements the function `createShape` that takes the mouse `x` coordinate as an input parameter. This `x` coordinate is used to determine where the grass object should be placed (horizontally that is) on the canvas. A random height, stroke width and color is chosen. The grass object is created and then returned to the caller.

``````createShape = (x: number): Grass  =>
{
const bottom: p5.Vector = this._p5.createVector(x, this._drawHeight);
const height = this.calculateHeight();
const top: p5.Vector = this._p5.createVector(x, height);
const strokeWidth = this.calculateStrokeWidth(height);
const color = this.calculateColor();
const grass = new Grass(this._p5, bottom, top, strokeWidth, color, this._canvasHeight);
return grass;
};
``````

## The grass object

The `grass` object is constructed with a couple of parameters.

• a reference to the p5 module to get access to vectors and shapes and all the Processing components.
• a bottom `x` and `y` in the form of a vector.
• the top `x` and `y` also in the form of a vector.
• a stroke width (which is determined in the grass factory)
• a color for the curve (also provided by the grass factory).
• and finally the screen height to position to bottom control point.
• note you do not need a notion of the top of the canvas because we assume this is where `y=0`. Of course you can solve/implement this in any other way.

Once a `grass` object is created by the `grassFactory` the object is stored in the `_shapes` backing field and updated in the processing draw loop.

``````constructor(p5: p5, bottom: p5.Vector, top: p5.Vector, strokeWidth: number, color: string, canvasHeight: number)
{
this._color = color;
this._strokeWidth = strokeWidth;
this._p5 = p5;
this._acceleration = this._p5.createVector(0, 0);
this._bottom = bottom;
this._initialtop = top;
this._top = this._initialtop.copy();
this._curveStart = this._p5.createVector(bottom.x, canvasHeight);
this._curveEnd = this._p5.createVector(top.x, 0);
this._forceMultiplier = 5;
this._animationDelay = 50;
this._defaultWindForce = 10;
}
``````

The `constructor` also sets some base values

• a default acceleration vector of (0, 0)
• a reference of the top coordinates in the variable `_initialTop`. I use this value to remember the initial state of the grass before wind force is applied
• a new vector top (a copy of the incoming variable) to draw and apply force to
• a curve start control point
• a curve end control point
• a force multiplier. When you look again at the curve, you need to apply more force to the top control point than to the top point to keep the grass wave natural
• an animation delay value to control the speed of the ‘wave’ of the grass
• a default windforce that is applied at the initial mouse click

The grass’s draw function is split into two functions: `display` and `update`. `Display` is responsible for drawing the bezier curve based on the start, end and the two control points.

``````display = (debug: boolean): void =>
{
this._p5.stroke(this._color);
this._p5.strokeWeight(this._strokeWidth);
this._p5.noFill();

this._p5.curve(
this._curveStart.x, // control point 1
this._curveStart.y,
this._bottom.x,     // the start of the curve
this._bottom.y,
this._top.x,        // the end of the curve
this._top.y,
this._curveEnd.x,   // control point 2
this._curveEnd.y);
};
``````

`Update` is the function that applies the force and drag on both the top point of the curve and the corresponding `curveEnd` control point. This is a loose implementation of Daniel Shiffman’s physics engine.

• apply the current acceleration to the top point and the top control point
• if points exceed their boundaries invers the force to move the point in the other direction
• apply the drag to the acceleration

The implementation looks something like this.

``````update = (): void =>
{
const wind = this._p5.createVector(0, 0);

this.applyWind(wind);
this.applyBounds();
this.applyDrag();
};
``````

The `applyWind` function applies the so called wind force on the top part of the grass curve.

``````applyWind = (wind:p5.Vector): void =>
{
};
``````

Here I multiply the force on the `curveEnd` control point to create a circular movement.

The `applyBounds` function reverses the force and bounces the points back and forth.

``````applyBounds = (): void =>
{
const distance = Math.abs(this._top.x - this._topBase.x);
const force: p5.Vector = this._p5.createVector(1, 0).mult(distance / this._animationSpeed);
if (this._top.x > this._topBase.x)
{
force.mult(-1);
}

this.applyForce(force);
};
``````

This is actually a bit of a messy implementation (and should be refactored/redesigned) but it seems to work for now.

The `applyDrag` function slows the curve movements and because of this the curve moves (sort of) back into it’s original state. The function’s main purpose is to slow down the acceleration.

``````applyDrag = ():void =>
{
const drag: p5.Vector = this._acceleration.copy();
const speedSquared: number = drag.magSq();
const constant = -0.01;
drag.normalize();
drag.mult(constant * speedSquared);
this.applyForce(drag);
};
``````

And finally the `applyForce` function updates the acceleration itself.

``````applyForce = (force:p5.Vector): void =>
{
};
``````

The `grass` object implements an `animate` function that applies the initial default wind force and is called in the `mousePressed` function in the `main.ts` class we saw earlier.

``````animate = (x: number): void =>
{
const force: p5.Vector = this._p5.createVector(this._defaultWindForce, 0);
if (x > this._top.x)
{
force.mult(-1);
}
this.applyForce(force);
};
``````

# Final notes

I have been ‘creative coding’ for some time now. For my projects I usually work with the general purpose languages like java, C#, python or specific problem solving frameworks like Accord.net or Tensorflow. Never looked at the processing framework until last year.

This is my first p5.js Sketch in typescript so I think that are a lot of improvements to be made but as a start I think the sketch is very interesting and offers a starting point to evolve on.

# The code

The source code freely available on GitHub. Please use it and improve on it for whatever need you have.

# Thanks

Special thanks to Daniel Shiffman for his excellent and inspiring coding train tutorials. Super thanks to the entire Processing team, I sincerely wish I found your scene earlier in my life. But hey never too late to learn. Processing is going to help an entire generation of artists and creative coders for years to come.

# Keywords

p5.js processing intermediate typescript node npm object-oriented

# Tools I used

Visual studio code, npm, node eslint rollup

I got my p5.js typescript initial setup from p5.js and typescript

Note: that my setup is a little bit different because of the node setup.

Daniel Shiffman’s physics engine on youtube

Visual studio code p5.js extensions

# Hello world

Hi my name is Jeroen Vesseur self-declared computer artist in a tradition. I live and work in the Rotterdam area in the Netherlands.

Formally trained as an information scientist I spend a lot of my time creating art that is computer related. This ranges from creative coding to actually painting computer parts and use them as mosaic pieces in more elaborate physical constructs. My interests range from the computer as an object to the capabilities of computers to the interaction between humans and the computer.

From these opening lines you can tell that this blog will be about computers, art and hopefully the impact of the human onto the computer. If you have a topic to discuss please don’t hesitate to talk to me about it, I’m happy to investigate areas of interest for my readers.

I will use these blog’s to talk about what I’m doing (currently struggling with AxiDraw, Processing and P5.js) and the challenges I’m facing (how to get from the strict rectangle form of a computer part to a more playful esthetic composition) and I’m planning to use this blog to tell you more about my work from the past (generating images from twitter, or any data source for that matter).

Oh and I also want to tell you about another recent project called We See You an assembly of the different disciplines.

Ok but that’s it for my Hello World!

Hope you will enjoy! Laters.