---
title: "Vines · generative art"
description: "Experimenting with noise and p5.js. Generative art plate #2 by Theodore Vorillas, drawn live in your browser from its code."
url: "https://vorillaz.com/lab/p5-vines"
---

![](https://vorillaz.com/_astro/p5-vines.iHySf8cD_Z3nXnX.svg)

fig. #02 · rendered live in your browser from the code below

# #02 vines

Experimenting with noise and p5.js

- date

  2019.02.24

- tags

  generative-art · javascript

- fork

  - [codepen ↗](https://codepen.io/TheodoreVorillas/pen/MxgKGy)
  - [codesandbox ↗](https://codesandbox.io/s/m4ny5k9508)

For the past few weeks, I have been exploring p5.js as a prototyping solution for generative artistry. This JavaScript library has a tiny footprint, a clean and declarative API and great documentation. As a first example, I decided to create a simple abstract vine pattern. Vertices of strokes are randomly created filling the canvas, creating a “noise” texture that looks like unfinished fractals.

```javascript title="vines.js"
const W = 320;
const H = W;

function setup() {
  let cnv = createCanvas(H, W);
  cnv.parent("cnv");
  smooth();

  const start = random(10);
  let xx = start;
  let yy = random(10);
  const e = random(0.6);

  for (let y = 0; y <= H; y += 5) {
    yy += e;
    xx = start;
    for (let x = 0; x <= W; x += 5) {
      xx += e;
      push();
      translate(x, y);
      rotate(noise(xx, yy) * radians(360));

      stroke(0, 0, 0);
      line(0, 0, 7, 0);
      pop();
    }
  }
}
```