​

var linien = [];

var anzahl = 100;

var butshow = 50;

var angle;

var step;

//var x1 = 0;

var dia = 200;

​

function setup() {

  createCanvas(500, 500);

  createline(); // kll

}

​

function createline() {   //______________________________________ Create object

  for (var i = 0; i < anzahl; i++)  linien[i] = new linie();

}

​

function draw() {

  background(232, 232, 220);

  noStroke();

  fill('rgba(255,.5)')

  ellipse(mouseX, mouseY, dia, dia);

  translate(width / 2, height / 2);

  //  createline();        // kll

  for (var i = 0; i < butshow; i++) linien[i].display();

}

​

​

// ein strahl class

this.linie = function() {

  this.x1 = 0;

  this.y1 = 0;

  this.x2 = 100;

  this.y2 = 100;

  this.speed = 1.5;

  this.angle = 0;

  this.step = TWO_PI / anzahl;

​

  this.move = function() {

    this.x2 += random(-this.speed, this.speed);

    this.y2 += random(-this.speed, this.speed);

    this.angle = this.angle;

  }

​

  this.display = function() {

    this.move(); //   kll

    this.keycheck(); //  kll

    strokeWeight(1);

    stroke(0);

    rotate(this.angle + this.step);

    line(this.x1, this.y1, this.x2, this.y2);

  }

  let check = false;

  this.keycheck = function() { //______ handle class variables from inside class

    if ( ! check && keyIsPressed) {

    check = true;

    if      (keyCode === LEFT_ARROW)  this.x1 -= 5;

    else if (keyCode === RIGHT_ARROW) this.x1 += 5;

    print(' x1: ' + this.x1); //____________________ sorry, this is for ONE line only, but effects ALL lines!

    }

    if ( ! keyIsPressed  ) check = false; // 

  }

}

​

function keyPressed() { //___ handle global vars from outside class

  if      (keyCode === UP_ARROW)     butshow += 1;

  else if (keyCode === DOWN_ARROW)   butshow -= 1;

  butshow = constrain(butshow,0,anzahl);

  print(' show: '+butshow);

  //try to change line parameter from here is also possible:

​

  let dy = 5;

  if      (keyCode === LEFT_ARROW)    for (var i = 0; i < anzahl; i++)  linien[i].y1 -=dy;

  if      (keyCode === RIGHT_ARROW)   for (var i = 0; i < anzahl; i++)  linien[i].y1 +=dy;

 //please choose what way you want to use.

}