Animated Lines - OpenProcessing

mySketch
xxxxxxxxxx
 
var Points =[];
var Elements_10 =[];
var Elements_15 =[];
var Elements_20 =[];
var counts = 0;
var current = 0;
var StrokeRank;
var NumRank;
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
  strokeWeight(1);
  stroke(255);
  textSize(height/45);
  textAlign(CENTER, CENTER);
  rectMode(CENTER);
  StrokeRank = 2;
  NumRank = 20;
}
​
function draw() {
  
  background(0);
  /*
  strokeWeight(4);
  for(var P2 = 0; P2 < Points.length; P2+=2){
      line(Points[P2].x, Points[P2].y, Points[P2+1].x, Points[P2+1].y);
  }
  */
  
  fill(255);
  noStroke();
  rect(width/15, height/2, width/7.5, height);
  
  if(StrokeRank === 1){ fill(240);} 
  else{ fill(0); }
  rect(width/15, height/3.5 - height/10, width/15, height/20,10);
  if(StrokeRank === 2){ fill(240);} 
  else{ fill(0); }
  rect(width/15, height/3.5, width/15, height/20,10);
  if(StrokeRank === 5){ fill(240);} 
  else{ fill(0); }
  rect(width/15, height/3.5 + height/10, width/15, height/20,10);
  if(NumRank === 10){ fill(240);} 
  else{ fill(0); }
  rect(width/15, 2.625*height/3.5 - height/10, width/15, height/20,10);
  if(NumRank === 15){ fill(240);} 
  else{ fill(0); }
  rect(width/15, 2.625*height/3.5, width/15, height/20,10);
  if(NumRank === 20){ fill(240);} 
  else{ fill(0); }
  rect(width/15, 2.625*height/3.5 + height/10, width/15, height/20,10);
  
  fill(0);
  text("Stroke Size", width/15, height/3.5 - 2*height/10);
  text("Number of Lines", width/15, 2.625*height/3.5 - 2*height/10);
​
  if(StrokeRank === 1){ fill(0);} 
  else{ fill(240); }
  text("1", width/15, height/3.5 - height/10);
  if(StrokeRank === 2){ fill(0);} 
  else{ fill(240); }
  text("2", width/15, height/3.5);
  if(StrokeRank === 5){ fill(0);} 
  else{ fill(240); }
  text("5", width/15, height/3.5 + height/10);
  
  if(NumRank === 10){ fill(0);} 
  else{ fill(240); }
  text("10", width/15, 2.625*height/3.5 - height/10);
  if(NumRank === 15){ fill(0);} 
  else{ fill(240); }
  text("15", width/15, 2.625*height/3.5);
  if(NumRank === 20){ fill(0);} 
  else{ fill(240); }
  text("20", width/15, 2.625*height/3.5 + height/10);
  
  points();
  lines();
}
​
function keyPressed(){
  if(keyCode === ENTER){
    create();
    //background(0);
  }
}
​
function create(){
  for(var b = current; b < Points.length-1; b+=1){
    var Addx = (Points[b+1].x - Points[b].x)/(9);
    var Addy = (Points[b+1].y - Points[b].y)/(9);
    var Addx2 = (Points[b+1].x - Points[b].x)/(14);
    var Addy2 = (Points[b+1].y - Points[b].y)/(14);
    var Addx3 = (Points[b+1].x - Points[b].x)/(19);
    var Addy3 = (Points[b+1].y - Points[b].y)/(19);
    for(var a = 0; a < 10; a++){
      Elements_10.push(createVector(Points[b].x + Addx*a, Points[b].y + Addy*a));
    }
    for(var c = 0; c < 15; c++){
      Elements_15.push(createVector(Points[b].x + Addx2*c, Points[b].y + Addy2*c));
    }
    for(var d = 0; d < 20; d++){
      Elements_20.push(createVector(Points[b].x + Addx3*d, Points[b].y + Addy3*d));
    }
  }
  current = counts-1;
}
​
function points(){
  fill(240);
  for(var q = 0; q < Points.length; q++){
    ellipse(Points[q].x, Points[q].y, 5)
  }
}
​
function lines(){
  stroke(255);
  strokeWeight(StrokeRank);
  if(NumRank === 10){
    for(var P1 = 0; P1 < Elements_10.length - 10; P1+=1){
      line(Elements_10[P1].x, Elements_10[P1].y, Elements_10[P1+10].x, Elements_10[P1+10].y);
    } 
  }
  if(NumRank === 15){
    for(var P2 = 0; P2 < Elements_15.length - 15; P2+=1){
      line(Elements_15[P2].x, Elements_15[P2].y, Elements_15[P2+15].x, Elements_15[P2+15].y);
    }
  }
  if(NumRank === 20){
    for(var P3 = 0; P3 < Elements_20.length - 20; P3+=1){
      line(Elements_20[P3].x, Elements_20[P3].y, Elements_20[P3+20].x, Elements_20[P3+20].y);
    }
  }
}
​
function mouseClicked(){
  if(abs(mouseX - width/15) <= width/30 && abs(mouseY- (height/3.5 - height/10)) <= height/40){ 
     StrokeRank = 1;
     }
  else if(abs(mouseX - width/15) <= width/30 && abs(mouseY- (height/3.5)) <= height/40){ 
     StrokeRank = 2;
     }
  else if(abs(mouseX - width/15) <= width/30 && abs(mouseY- (height/3.5 + height/10)) <= height/40){ 
     StrokeRank = 5;
     }
  else if(abs(mouseX - width/15) <= width/30 && abs(mouseY- (2.625*height/3.5 - height/10)) <= height/40){ 
     NumRank = 10;
     }
  else if(abs(mouseX - width/15) <= width/30 && abs(mouseY- (2.625*height/3.5)) <= height/40){ 
     NumRank = 15;
     }
  else if(abs(mouseX - width/15) <= width/30 && abs(mouseY- (2.625*height/3.5 + height/10)) <= height/40){ 
     NumRank = 20;
     }
  else if(mouseX > width/7.5){
    Points.push(createVector(int(mouseX), int(mouseY)));
    //ellipse(mouseX, mouseY, 5);
    counts+=1;
  }
  
}
​