/*
Inspired by Frieder Nake's ER56 / 264 (1963) and Vera Molnár's Du Cycle: Segments et leurs Croisements No. 9 (1973)
*/

let startX;
let startY;
let endX;
let endY;

let seed = 1;

function setup() {
  createCanvas(windowWidth, windowHeight);
  stroke(255);
  strokeWeight(2);
}

function draw() {
  background(0);
  
  for (let i = 0; i < 100; i++) {
    
    startX = random(20, width - 20);
    startY = random(20, height - 20);

    if (random(10) < 1) {
      let amount = random(5, 20);
      endX += amount;
      endY = startY + amount;
    } else {
      let amount = random(5, 20);
      endY += amount;
      endX = startX + amount;
    }
    
    line(startX, startY, endX, endY);
  }

  noLoop();
}

function mousePressed() {
  seed = random(1000);
  loop();
}
/* ------------↓↓ My comment here ↓↓----------*/


/*
Inspired by Frieder Nake's ER56 / 264 (1963) and Vera Molnár's Du Cycle: Segments et leurs Croisements No. 9 (1973)
*/

let startX;
let startY;
let endX;
let endY;

//two set of start and end point
//X&Y

let seed = 1;
//seed again lol

function setup() {
  createCanvas(windowWidth, windowHeight);
  stroke(255);
  strokeWeight(2);
  //white storke
}

function draw() {
  background(0);
  
  //black background
  
  //run this for loop 100 times
  for (let i = 0; i < 5; i++) {
    
    // control the start point will start inside the canvas 
    // and stay away from the 4 edges for 20px
    startX = random(20, width - 20);
    startY = random(20, height - 20);

    
    if (random(10) < 1) {
      let amount = random(5, 20);
      endX += amount;
      //means endX = endX+(5~20)
      //but in the first few line, endX and endY are empty variable
      //which means it can't draw in X direction
      
      //only if this loop have already get in to the other part,
      //the end X will = startX+ amount, it become a real number
      //because it was defined in line 36,37
      
      endY = startY + amount;
      //Y move 5~20 pixel
      
      
      //to know the line are drawn by this situation or the next one
      //depands on the random number > or <1
      console.log("Situation01__"+startX,startY,endX,endY)
      // 
      
    } else {
      let amount = random(5, 20);
      endY += amount;
      endX = startX + amount;
      console.log("Situation02__"+startX,startY,endX,endY)
    }
    
    line(startX, startY, endX, endY);
    
  }

  noLoop();
}

function mousePressed() {
  seed = random(1000);
  loop();
}







/*!!!!!!!!!! Modify!!!!!!!!!!*/


/*
Inspired by Frieder Nake's ER56 / 264 (1963) and Vera Molnár's Du Cycle: Segments et leurs Croisements No. 9 (1973)
*/

let startX;
let startY;
let endX;
let endY;

//two set of start and end point
//X&Y

let seed = 1;
//seed again lol

function setup() {
  createCanvas(windowWidth, windowHeight);
  
  
  //white storke
}

function draw() {
  background(0);
  stroke(0,random(255),255);
  strokeWeight(random(0.5,2));
  
  //black background
  
  //run this for loop 100 times
  for (let i = 0; i < 5; i++) {
    
    // control the start point will start inside the canvas 
    // and stay away from the 4 edges for 20px
    startX = random(20, width - 20);
    startY = random(20, height - 20);

    
    if (random(10) < 5) {
      let amount = random(5, 20);
      endX += amount;
      //means endX = endX+(5~20)
      //but in the first few line, endX and endY are empty variable
      //which means it can't draw in X direction
      
      //only if this loop have already get in to the other part,
      //the end X will = startX+ amount, it become a real number
      //because it was defined in line 36,37
      
      endY = startY + amount;
      //Y move 5~20 pixel
      
      
      //to know the line are drawn by this situation or the next one
      //depands on the random number > or <1
      // console.log("Situation01__"+startX,startY,endX,endY)
      // 
      
    } else {
      let amount = random(5, 20);
      endY += amount;
      endX = startX + amount;
      // console.log("Situation02__"+startX,startY,endX,endY)
    }
    
    line(startX, startY, endX, endY);
    
  }

  // noLoop();
}

function mousePressed() {
  seed = random(1000);
  loop();
}