Hyperritual

Fifth TAD project. Similar to yesterday’s, but labels each node with a sequential number.

Source code:

/**
 * LabeledGraphMaker
 * by Joshua Madara, hyperRitual.com
 * This sketch draws complete graphs from 1 to 20 nodes,
 * and labels each node with a sequential number.
 * The vertex calculations are based on Ira Greenberg's
 * Poly Maker from _Processing: Creative Coding and 
 * Computational Art_, pp. 229-230.
 * Move your mouse left/right across the drawing to 
 * decrease/increase the size of the graph.
 */

PFont nanoSansLC;
int minNodes = 1;
int maxNodes = 20;

void setup() {
  size(400, 400);
  background(0);
  smooth();
  fill(0);
  stroke(255);
  strokeWeight(1);
  ellipseMode(CENTER);
  nanoSansLC = loadFont("NanoSansLC.vlw");
  textFont(nanoSansLC);
  textAlign(CENTER, CENTER);
}

void draw() {
  background(0);
  // vary # of nodes by mouse's horizontal position
  int varNodes = round(map(mouseX, 0, width, minNodes, maxNodes));
  // calc # of edges from # of nodes
  int edges = varNodes*(varNodes - 1)/2;
  // call function to draw graph
  makeGraph(width/2, height/2, varNodes, width/2.5);
}

void makeGraph(int x, int y, int nodes, float radius) {
  float[] px = new float[nodes];
  float[] py = new float[nodes];
  float angle = 270;
  // calculate and store vertex positions
  for(int i=0; i<nodes; i++) {
    px[i] = x+cos(radians(angle))*radius;
    py[i] = y+sin(radians(angle))*radius;
    angle+=360.0/nodes; // 360/nodes returns int; need float
  }
  // draw edges
  for(int j=0; j<nodes; j++) {
    for(int k=1; k<nodes; k++) {
      line(px[j], py[j], px[k], py[k]);
    }
  }
  // draw labeled nodes
  for(int j=0; j<nodes; j++) {
    fill(0);
    ellipse(px[j], py[j], width/8, height/8);
    fill(255);
    text(j+1, px[j], py[j]);
  }
}

Fourth TAD project. Unfortunately, some personal matters have become more pressing such that I may need to soon bow out of this year’s TAD having barely begun.

I am uncertain what it is that so fascinates me about graphs such as those generated here, but it has long been part of my interest in the occult and its circles, triangles, squares, pentagrams, hexagrams, etc. Geometry was one of my favorite subjects in school, and I often fantasized about what goes on at the corners of these shapes, what happens to us when we gain or lose a dimension.

This is my first time using Processing.js with Keyvan Minoukadeh‘s Processing JS WordPress plugin, so you can play with the sketch right here on this page, and do not need Java (move your mouse around the image until you see interaction):

Source code:

/**
 * GraphMaker
 * by Joshua Madara, hyperRitual.com
 * This sketch draws complete graphs from 1 to 20 nodes.
 * The vertex calculations are based on Ira Greenberg's
 * Poly Maker from _Processing: Creative Coding and 
 * Computational Art_, pp. 229-230.
 * Move your mouse left/right across the drawing to 
 * decrease/increase the size of the graph.
 */

int minNodes = 1;
int maxNodes = 22;

void setup() {
  size(400, 400);
  background(0);
  smooth();
  noFill();
  stroke(255);
  strokeWeight(1);
  ellipseMode(CENTER);
}

void draw() {
  background(0);
  // vary # of nodes by mouse's horizontal position
  int varNodes = round(map(mouseX, 0, width, minNodes, maxNodes));
  // calc # of edges from # of nodes
  int edges = varNodes*(varNodes - 1)/2;
  // display # of vertices and # of edges
  text("vertices: "+varNodes+"  edges: "+edges, 5, 15);
  // call function to draw graph
  makeGraph(width/2, height/2, varNodes, width/2.5);
}

void makeGraph(int x, int y, int nodes, float radius) {
  float[] px = new float[nodes];
  float[] py = new float[nodes];
  float angle = 270;
  // calculate and store vertex positions
  for(int i=0; i<nodes; i++) {
    px[i] = x+cos(radians(angle))*radius;
    py[i] = y+sin(radians(angle))*radius;
    angle+=360.0/nodes; // 360/nodes returns int; need float
  }
  // draw nodes and edges
  for(int j=0; j<nodes; j++) {
    ellipse(px[j], py[j], width/9, height/9);
    for(int k=1; k<nodes; k++) {
      line(px[j], py[j], px[k], py[k]);
    }
  }
}