Draw a Single Audio Reactive Line Instead of Many

computersarecool

Hi, I want to be able to draw audio reactive lines with my mouse (or between some osc event coordinates). Currently I am drawing an arraylist of lines that react to sound at each frame. This almost works but you can see this creates roughness as it is not one solid line but many many individual lines close together. Is there a way to draw one connected shape instead of many individual lines and have it react to the music. When I say react to the music, it really just updates the strokeweight based on the volume level.

Here is what the array list of lines looks like. I have also attached my code. Basically it just adds lines when mouse is pressed and updates the strokeweight continuously. Could I add curved vertices instead or something?

void draw(){
  background(0,0); //refresh background
  colorPickers(); //Show color pickers
  clearClear(); //Check to clear lines

  //Update line list array
  for(int i=0; i<lines.size(); i++){
    Line currentLine=lines.get(i);
    currentLine.lineThickness= band;
    currentLine.display(); 
  }
  if(mousePressed){
    lines.add(new Line(mouseX, mouseY, pmouseX, pmouseY, 26, color(colorPickers[chooser])));
  }
} 


void oscEvent(OscMessage theOscMessage) {
  colorChooser();
    //Get line thickness from ableton
    if(theOscMessage.checkAddrPattern("band7")) {
      band = map((theOscMessage.get(0).floatValue()), .0, 1.0, 0,35);
  }
} 

class Line {
  float lineFromX=100, lineFromY=100;
  float lineToX=300, lineToY=200;
  float lineThickness=15;
  color lineColor=color(#FF0000);

  // constructor I:
  Line (float lineFromX, float lineFromY, float lineToX, float lineToY, float lineThickness, color lineColor) {
    this.lineFromX = lineFromX;
    this.lineFromY = lineFromY;
    this.lineToX = lineToX;
    this.lineToY = lineToY;
    this.lineThickness = lineThickness;
    this.lineColor = lineColor;
  } 


  //Method
  void display() {
    strokeWeight(lineThickness);
    stroke(lineColor);
    line ( lineFromX, lineFromY, lineToX, lineToY );
    strokeWeight(1); // back to normal
  } // method
} // class

computersarecool

Anyone have any ideas?

computersarecool

Hi, I don't mean to annoying bump this thread, but it seems to me like there has to be an easy way to do this. Is there not a way to draw one long line, having it continually grow, only a way to may an arrayList and keep adding individual lines to that?

amnon

Option 1: Use vertex/curveVertex in a begin/endShape & tweak the Shape kind and strokeWeight.

Option 2: convert points/line to 2D polygon mesh, such as done here.