Move your mouse over the screen. Ten lines will reach out and grab your mouse from an invisible grid of circles. I drew this out in peak condition on paper beforehand, as seen below:

my plan

While there were some speed bumps navigating the javascript arrays, I was able to complete it exactly as I had initially envisioned:

tenlines

Menhirs, also called standing stones, are a type of monolith found in Northern Europe. This is a minimal experiment in landscape generation using these objects as inspiration. They rotate with the mouse, and stones are added and remove by left and right clicking respectively.

code:

//The Menhirs. Ignore the Aztec look.

ArrayList<Menhir> menhirs;

//seperately handles a menhir drawing
void drawMenhir(int x,int y,int dw,int dh){
  noStroke();
  int ang = dw/4;
  fill(255);
  beginShape();
  vertex(x+dw, y+dh-ang);
  vertex(x+dw/2, y+dh);
  vertex(x, y+dh-ang);
  vertex(x, y+ang);
  vertex(x+dw/2,y);
  vertex(x+dw,y+ang);
  endShape();
  stroke(0);
  strokeWeight(3);
  beginShape();
  vertex(x+dw,y+ang + 20);
  vertex(x+dw, y+dh-ang);
  vertex(x+dw/2, y+dh);
  vertex(x+dw/2,y+2*ang);
  vertex(x+dw,y+ang);
  vertex(x+dw/2,y);
  vertex(x, y+ang);
  vertex(x, y+dh-ang);
  endShape();
  noFill();

}

//seperately draws the shadow of a menhir
void drawShadow(int x,int y,int dw,int dh){
  int ang = dw/4;
  stroke(0);
  noFill();
  beginShape();
  vertex(x, y+dh-ang);
  vertex(x-dh,y+dh-ang+(dh/2));  //here be logial derails
  vertex(x-dh+dw/10,y+dh-ang+(dh/2)+ang/5);
  vertex(x + dw/10, y+dh-ang + ang/5);
  vertex(x+ (2*dw/10), y+dh-ang +(2*ang/5));
  vertex(x-dh+ (2*dw/10),y+dh-ang+(dh/2)+(2*ang/5));
  vertex(x-dh+ (3*dw/10),y+dh-ang+(dh/2)+(3*ang/5));  
  vertex(x+ (3*dw/10), y+dh-ang +(3*ang/5));
  vertex(x+ (4*dw/10), y+dh-ang +(4*ang/5));
  vertex(x-dh+ (4*dw/10),y+dh-ang+(dh/2)+(4*ang/5));
  vertex(x-dh+ (5*dw/10),y+dh-ang+(dh/2)+(5*ang/5)); 
  vertex(x+ (dw/2) - ang , y+dh-ang + 3*ang/2);
  endShape();
  
}

// class that handles the standing stones
class Menhir{
  int x;
  int y;
  int trueY;
  int h;
  int w;
  float radius;
  
  Menhir(){
    x = 0;
    y = 0;
    trueY = 0;
    h = int(random(90,height/4));
    w = int(random(30,width/8));
    radius = map (noise(millis()), 0.0,1.0 , 0.0,0.6);
  }
  
  //given an angle relative to the baseline (y = width/2), 
  //places the menhir on that angle. 
  void update(float ang){
    x = width/2 + int(width*radius * cos(ang));
    y = height/2 + int(height*radius * sin(ang));
    trueY = y;
    if(mouseX < width/2) { 
      x = width - x;
      y = height - y;
    }
  }
  
  //I'm bad at code.
  void displayShadow(){
    drawShadow(x,y,w,h);
  }
  
  void display(){
    drawMenhir(x,y,w,h);
  }
  
}

//creates the environment and the first menhir
void setup(){
  size(700,700);
  menhirs = new ArrayList<Menhir>();
  menhirs.add(new Menhir());
}

//function that sorts the menhirs based on y position, so that
//they can later drawn from front to back.
//Zach Rispoli helped write this. 
ArrayList<Menhir> zjrispolsort(ArrayList<Menhir> menhirs){
  ArrayList<Menhir> sorted = new ArrayList<Menhir>();
  ArrayList<Menhir> temp = new ArrayList<Menhir>();
  for(int i = 0; i < menhirs.size(); i++){
    temp.add(menhirs.get(i));
  }
  while(temp.size() > 0) {
    int minIndex = 0;
    for(int i = 0; i < temp.size(); i++) {
      if(temp.get(i).y < temp.get(minIndex).y) {
        minIndex = i;
      }
    }
    sorted.add(temp.get(minIndex));
    temp.remove(minIndex);
  }
  
  return sorted;
}

//finds the relative angle of the mouse, and uses that to find
//the angle that each menhir should hold, then draws them in place
void draw(){
  background(255);
  float dx = float(mouseX -(width/2));
  float dy = float(mouseY -(height/2));
  float mrads = atan(dy/dx);
  float diff = TWO_PI/float(menhirs.size()+1);

  for (int i = 0; i< menhirs.size(); i++) {
    Menhir menhir = menhirs.get(i);
    float ang = mrads + diff*(i+1);
    menhir.update(ang);
  }
  
  
  ArrayList<Menhir> tempMenhirs = zjrispolsort(menhirs);
  
  //shadows rendered seperately so that all menhirs appear in front
  //of the other menhirs' shadows
  for (int i = 0; i< tempMenhirs.size(); i++) {
    Menhir menhir = tempMenhirs.get(i);
    menhir.displayShadow();
  }
  
  for (int i = 0; i< tempMenhirs.size(); i++) {
    Menhir menhir = tempMenhirs.get(i);
    menhir.display();
  }
}

// left click adds a menhir up to 10, right click removes a menhir
// down to 1
void mousePressed() {
  if (mouseButton == LEFT && menhirs.size() < 10){
    println("menhir added");
    menhirs.add(new Menhir());
  } else if (mouseButton == RIGHT && menhirs.size() > 1){
    menhirs.remove(0);
  }
}

For this project, I wanted 10 lines to vibrate around the courser. Several challenges that arose were trying to figure out how to make diagonal lines starting at the bottom left and moving to the top right. I still have not figured out how to make the random variable move on the inverted axis. Therefore, unlike thee other lines that run diagonal from top left to bottom right, horizontal and vertical, the diagonal lines that run from bottom left top top right do not vibrate into each other.

void setup() {
  size(400,400);
  frameRate(10);
}

void draw(){
  background(0);
  
  float dx=random (-10, 10);
  float dy=random (-12, 12);
  float da=random (-15,15);
  float db=random (-17,17);
  float dc=random (-20,20);
  strokeWeight(3);
  
  //diagonal L to R down
  stroke(50);
  line(0,0, (mouseX-6)+dx,(mouseY-6)+dx);
  stroke(150);
  line((mouseX+6)+db,(mouseY+6)+db, width,height);
  
  //horizontal
  stroke(75);
  line(0,height/2, (mouseX-10)+da,(mouseY));
  stroke(175);
  line((mouseX+10)+dc,(mouseY), width,height/2);
  
  //vertical
  stroke(255);
  line(width/2,0, (mouseX),(mouseY-10)+dy);
  stroke(125);
  line((mouseX),(mouseY+10)+dc, width/2,height);
  
  //diagonal L to R up top
  stroke(50);
  line(0,350, (mouseX-8)+db,(mouseY+5)+db);
  stroke(225);
  line((mouseX+5)+dy,(mouseY-8)+dy, 350,0);
  
  //diagonal L to R up btm
  stroke(100);
  line(50,height, (mouseX-5)+dc,(mouseY+8)+dc);
  stroke(200);
  line((mouseX+8)+da,(mouseY-5)+da, width,50);
}