JS: add data to the colors of the lines so that it affects thickness

1

I am currently experimenting with this code and would like to add data behind each generated line so that it also affects its thickness. I am new to this tool and I would like support.

var nwalls=100;
var walls=[];
var hgrad;
function setup() {
    canvas = createCanvas(window.innerWidth, window.innerHeight);
  colorMode(HSB,360,255,255,255);
  noFill();
  hgrad=height/nwalls;
  for(var i=0;i<nwalls;i++){
    walls[i]=new Wall(i*hgrad);
  }
}

function draw() {
  background(0,0,255);
  for(var i=0;i<nwalls;i++){
    walls[i].update();
    walls[i].display();
  }
}
function Wall(y0){
  this.npoints=int(width/20);
  this.points=[];
  this.wgrad=int(width/(this.npoints-1));
  this.hu=int(random(270));
  this.sat=200;//int(random(255));
  this.bri=200;//int(random(255));
  this.col=color(this.hu,this.sat,this.bri,65);
  this.y0=y0;
}
Wall.prototype.update=function(){
  for(var i=0;i<this.npoints;i++){
    this.points[i]=createVector(i*this.wgrad,this.y0+mouseY*.1*hgrad*(1-2*noise(i*.01,this.y0*.01+sin(this.y0+frameCount*.01))));
  }
}
Wall.prototype.display=function(){
  stroke(this.col);
  fill(this.col);
  beginShape();
  vertex(0,height);
  for(var i=0;i<this.npoints-1;i++){
    vertex(this.points[i].x,this.points[i].y);
    vertex(this.points[i+1].x,this.points[i+1].y);
  }
  vertex(width,height);
  endShape();
}
    
asked by arocha 03.09.2017 в 15:41
source

0 answers