Day 30 - Art 1

Abstract map

Dynamic Node Network

Dynamic Node Network is a generative art piece that simulates a constantly evolving network of nodes. Each node moves organically across the canvas based on Perlin noise, creating fluid, smooth motions. The nodes are connected by edges when they are close enough, forming a dynamic web of relationships that grows and shifts over time. As the nodes interact, the web constantly changes, offering a mesmerizing visual representation of interconnectedness and movement within a virtual system.

  // Array to store nodes (as vectors)
  let nodes = [];
  
  // Array to store edges (connections between nodes)
  let edges = [];
  
  // Canvas reference
  let canvas;
  
  function setup() {
    // Create a 800x800 pixel canvas and attach it to a container in the HTML
    canvas = createCanvas(800, 800);
    canvas.parent('canvas-container');
  
    // Set drawing settings: no fill, white stroke with transparency, and line weight
    noFill();
    stroke(255, 100);  // White color with some transparency
    strokeWeight(2);   // Line thickness for edges
    
    // Initialize nodes with random positions within the canvas
    for (let i = 0; i < 30; i++) {
      nodes.push(createVector(random(width), random(height)));
    }
  }
  
  function draw() {
    // Clear the canvas with a black background
    background(0);
  
    // Move each node using Perlin noise for smooth, organic motion
    for (let i = 0; i < nodes.length; i++) {
      let n = nodes[i];
      
      // Use noise for smooth, random movement of each node
      n.x += map(noise(i * 0.1), 0, 1, -1, 1);
      n.y += map(noise(i * 0.1 + 100), 0, 1, -1, 1);
    }
  
    // Create empty edge list before recalculating which nodes are close enough to be connected
    edges = [];
  
    // Calculate distances between each pair of nodes
    for (let i = 0; i < nodes.length; i++) {
      for (let j = i + 1; j < nodes.length; j++) {
        let n1 = nodes[i];
        let n2 = nodes[j];
        let d = dist(n1.x, n1.y, n2.x, n2.y);
        
        // If distance between nodes is smaller than 75 pixels, add an edge between them
        if (d < 150) {
          edges.push([n1, n2]);
        }
      }
    }
  
    // Draw edges as lines between nodes
    for (let i = 0; i < edges.length; i++) {
      let [n1, n2] = edges[i];
      line(n1.x, n1.y, n2.x, n2.y);
    }
  
    // Draw nodes as small ellipses
    for (let i = 0; i < nodes.length; i++) {
      let n = nodes[i];
      ellipse(n.x, n.y, 5, 5);  // Small circles to represent nodes
    }
  }