The node-garden technique : basics section.

The 'node-garden technique' is one of the popular techniques of creative coding. You can make some cool work with node-garden relatively easily.

Let me explain this much fun and applicable node-garden basics simply in this article. I'll show you some simple code also.

👉 この記事は日本語でも読めます。

Using p5.js (JavaScript programming language).

I'll write a code in 'p5.js' in this article.

If you are not familiar with 'p5.js', I recommend 'OpenProcessing' or 'p5.js Web Editor'. It's easy to use and you do not need to build a development environment. You can write a code and run it on the Web browser.

I do not explain the grammar of JavaScript in this article. Even if you're not familiar with 'p5.js' or JavaScript, let start with writing a code along with this article. Write a code first and study about it after is a good manner of learning a programming language I think.

How to make a node-garden?

You can make node-garden very easily.

• Put the nodes.
• Draw lines between nodes.

That's it!

Put the nodes.

Draw lines between nodes. Oh! What a wonder! The cool node-garden is before you!

You can try various expressions by thinking out how to put the nodes and the conditions when drawing the lines.

The example code drawing the node-garden.

This is the example code that draws the very simple node-garden.

The 'p5.js' example code.

/*
 * Node Garden basics section.
 */

const w = 640;
const h = 480;
const nodeNum = 10;
const nodes = new Array();

function setup() {
  // canvas setting
  createCanvas(w, h);
  background(240);
  noFill();
  stroke(100);

  // put nodes
  for (let i = 0; i < nodeNum; i++) {
    let x = random(w);
    let y = random(h);
    ellipse(x, y, 10, 10);
    nodes.push(createVector(x, y));
  }

  // draw lines
  for (let i = 0; i < nodeNum - 1; i++) {
    let n = nodes[i];
    for (let j = i + 1; j < nodeNum; j++) {
      let m = nodes[j];
      line(n.x, n.y, m.x, m.y);
    }
  }
}

Description of the example code.

※You can skip the part that you don't get.

Initializing.

const w = 640;
const h = 480;
const nodeNum = 10;
const nodes = new Array();

I set the variable of canvas size. The width 640 pixels and height 480 pixels.
The node count is 10.
'nodes' is the array of node location.

Canvas settings.

  // canvas setting
  createCanvas(w, h);
  background(240);
  noFill();
  stroke(100);

Set the background color 240 (almost white), line color 100 (grey).

Nodes putting.

  // put nodes
  for (let i = 0; i < nodeNum; i++) {
    let x = random(w);
    let y = random(h);
    ellipse(x, y, 10, 10);
    nodes.push(createVector(x, y));
  }

Put the 'nodeNum' number of nodes as the circle with 10 pixels size randomly on the canvas. And add the node as Vector to the array 'nodes'.

Draw the lines.

  // draw lines
  for (let i = 0; i < nodeNum - 1; i++) {
    let n = nodes[i];
    for (let j = i + 1; j < nodeNum; j++) {
      let m = nodes[j];
      line(n.x, n.y, m.x, m.y);
    }
  }

Draw line with 'line()' with picking the node from array one by one. Do it with every node.

Draw the lines with a nested loop.

You'll see the result like this.

Add a condition to draw the line.

The example code I showed above draws the line between every nodes pair. Let's try out to add a condition as 'If the distance of two nodes is less than some'.

      if (dist(n.x, n.y, m.x, m.y) < 100) {
        line(n.x, n.y, m.x, m.y);
      }

It measures the distance of two nodes with 'dist()' and draws the line if the measured value is less than 100. You'll see the result like this.

Oops. Looks lonesome node-garden.

Set the number of nodes 100.

const nodeNum = 100;

How about this? Looks cool a bit?

Improve the drawing.

The example code puts the nodes before draws the lines, so the nodes are behind the lines.

  // put nodes
  for (let i = 0; i < nodeNum; i++) {
    let x = random(w);
    let y = random(h);
    ellipse(x, y, 10, 10);      // draw the nodes here
    nodes.push(createVector(x, y));
  }
  
  // draw lines
  for (let i = 0; i < nodeNum - 1; i++) {
    let n = nodes[i];
    for (let j = i + 1; j < nodeNum; j++) {
      let m = nodes[j];
      line(n.x, n.y, m.x, m.y); // draw the lines here
    }
  }

Insert the code below after the part of drawing lines, then the nodes will be in the front of the lines.

  fill(240);
  for (let i = 0; i < nodeNum; i++) {
    let n = nodes[i];
    ellipse(n.x, n.y, 10, 10);
  }

Paint the node with 'fill(240)' the same color of background color. This is the key to the code. If you lost the key, you'll see the result like this.

It will be interesting changing the boldness of the lines.

  strokeWeight(10);

You can make gear nodes with squares.

rectMode(CENTER);
for (let i = 0; i < nodeNum; i++) {
  let n = nodes[i];
  for (let r = 0; r < TWO_PI; r += TWO_PI / 3) {
    push();
    translate(n.x, n.y);
    rotate(r);
    rect(0, 0, 50, 50);
    pop();
  }
}

The rectangles, not squares look interesting also.

The example works that uses node-garden.

Let me show you the example works made with 'Processing', not 'p5.js'. These are two animation works that moving the nodes.

The node-garden animation nodes go back and forth on a straight line.

A geometrical shape animation with a node-garden technique.

Have fun with the node garden!

The basic techniques introduced in this article are fun to play with the sample code. You can improve how to draw or the condition to draw and you can make your own works.

Enjoy!

The node-garden technique : application section.