First step will be to create the random points. We’ll do this by creating a list of vectors and adding positions for the random points in the setup. In the draw function we will add an ellipse at each point position.
//List to hold random point positions
ArrayList <PVector> pts = new ArrayList <PVector>();
//declare a variable to hold the number of poitns
int numpts = 50;
void setup(){
size(800,800);
//use a loop to create the initial set of random points
for(int i = 0; i < numpts; i++){
float posx = random(0,width);
float posy = random(0,height);
pts.add(new PVector(posx,posy,0));
}
}
void draw(){
background(0);
//loop to draw the random points
for(int i = 0; i < pts.size(); i++){
PVector pt = pts.get(i);
fill(255);
noStroke();
ellipse(pt.x,pt.y,10,10);
}
}
The second step will be to create the lines between all of the points. This can be done by adding a loop inside of the loop that displays the points. This is called a nested loop. If the sketch ahs 50 random points, the number of lines between those points should be 50×50 or 2500. The inner loop that draws the points will execute 50 times. Just a note that you don’t really need to draw a line between the point the point in the outer loop and itself so there really should be 50×49 lines, but we will keep it simple at 50×50 for now.
//List to hold random point positions
ArrayList <PVector> pts = new ArrayList <PVector>();
//declare a variable ot hold the number of poitns
int numpts = 50;
void setup(){
size(800,800);
//use a loop to create the initial set of random points
for(int i = 0; i < numpts; i++){
float posx = random(0,width);
float posy = random(0,height);
pts.add(new PVector(posx,posy,0));
}
}
void draw(){
background(0);
//loop to draw the random points
for(int i = 0; i < pts.size(); i++){
PVector pt = pts.get(i);
fill(255);
noStroke();
ellipse(pt.x,pt.y,10,10);
//this is the inner nested loop to draw
//the lines. We need a new variable for the
//loop so we will use j here.
for(int j = 0; j < pts.size(); j++){
//We also need a new variable for the second point
PVector pt2 = pts.get(j);
//draw a line between the point in the outer loop and pt2
stroke(255,100);
line(pt.x,pt.y,pt2.x,pt2.y);
}
}
}
The web of lines is fairly dense. We can add another rule that would take considerable time to do by hand: Only connect points that are within a specific distance. We will do that by adding a conditional to check if the distance between to points is under a predetermined distance threshold before we draw a line between them.
//List to hold random point positions
ArrayList <PVector> pts = new ArrayList <PVector>();
//declare a variable ot hold the number of poitns
int numpts = 50;
//declare a variable to check if points are
//close enough to connect
float dist_limit = 250;
void setup(){
size(800,800);
//use a loop to create the initial set of random points
for(int i = 0; i < numpts; i++){
float posx = random(0,width);
float posy = random(0,height);
pts.add(new PVector(posx,posy,0));
}
}
void draw(){
background(0);
//loop to draw the random points
for(int i = 0; i < pts.size(); i++){
PVector pt = pts.get(i);
fill(255);
noStroke();
ellipse(pt.x,pt.y,10,10);
//this is the inner nested loop to draw
//the lines. We need a new variable for the
//loop so we will use j here.
for(int j = 0; j < pts.size(); j++){
//We also need a new variable for the second point
PVector pt2 = pts.get(j);
//create a conditional to check if the distance
//between points is under the distance limit
float distance = dist(pt.x,pt.y,pt2.x,pt2.y);
if(distance < dist_limit){
//draw a line between the point in the outer loop and pt2
stroke(255,100);
line(pt.x,pt.y,pt2.x,pt2.y);
}
}
}
}
We can also try moving the points since we are using a virtual “wall” rather than a physical one. To do this we need to give each point a speed vector (in this case just x and y) when we create the original point positions. Each frame we add that speed to the current position and then reset the position. We have to check if the new point position is outside of the bounds of the sketch and if it is then we reverse the speed. Otherwise the points will quickly leave the sketch.
//List to hold random point positions
ArrayList <PVector> pts = new ArrayList <PVector>();
//list to hold the x and y speed of each point
ArrayList <PVector> speed = new ArrayList <PVector>();
//declare a variable ot hold the number of poitns
int numpts = 50;
//declare a variable to check if points are
//close enough to connect
float dist_limit = 200;
void setup(){
size(800,800);
//use a loop to create the initial set of random points
for(int i = 0; i < numpts; i++){
float posx = random(5,width-5);
float posy = random(5,height-5);
pts.add(new PVector(posx,posy,0));
float speedx = random(-1,1);
float speedy = random(-1,1);
speed.add(new PVector(speedx,speedy,0));
}
}
void draw(){
background(0);
//loop to draw the random points
for(int i = 0; i < pts.size(); i++){
PVector pt = pts.get(i);
fill(255);
noStroke();
ellipse(pt.x,pt.y,10,10);
//this is the inner nested loop to draw
//the lines. We need a new variable for the
//loop so we will use j here.
for(int j = 0; j < pts.size(); j++){
//We also need a new variable for the second point
PVector pt2 = pts.get(j);
//create a conditional to check if the distance
//between points is under the distance limit
float distance = dist(pt.x,pt.y,pt2.x,pt2.y);
if(distance < dist_limit){
//draw a line between the point in the outer loop and pt2
stroke(255,100);
line(pt.x,pt.y,pt2.x,pt2.y);
}
}
}
//add another loop to move the points
for(int i = 0; i < pts.size(); i++){
PVector pt = pts.get(i);
PVector spd = speed.get(i);
//check to see if the current point plus the speed
//is outside of the bounds of the sketch. If so
//reverse the speed by multiplying by -1
if(spd.x + pt.x > width || spd.x + pt.x < 0){
spd.x = spd.x * -1;
} if(spd.y + pt.y > width || spd.y + pt.y < 0){
spd.y = spd.y * -1;
}
pt.x = pt.x + spd.x;
pt.y = pt.y + spd.y;
//replace the old point and speed in the list
//witht he current point position and speed.
pts.set(i,pt);
speed.set(i,spd);
}
}