​

var AMT_SLIDER;

​

const deltas = [];

const ts = [];

const T_OFFSET_SLIDERS = [];

const POS_ANCHOR_SLIDERS = [];

const COLOR_SLIDERS = [];

var SIZE_SCALER_SLIDER;

​

var curveyCheckbox;

​

​

​

function setup() {

  createCanvas(400, 400);

  frameRate(60)

  // for same sequence.. debugging

  randomSeed(0);

  noiseSeed(0);

  SIZE_SCALER_SLIDER = createSlider(0.01, 100, 1, 0.01);

//   colorMode(HSB)

  noFill();

  AMT_SLIDER = createSlider(1, 400, 100, 1).input(mouseClicked)

  for (var i = 0; i < 8; i++) {

    T_OFFSET_SLIDERS.push(createSlider(-100,100, 1, 0.01))

  }

  for (var i = 0; i < 8 ; i++) {

    POS_ANCHOR_SLIDERS.push(createSlider(-100,500, random(100,300), 0.01))

  }

  for (var i = 0; i < 8 ; i++) {

    COLOR_SLIDERS.push(createSlider(0,255, random(50,200), 0.01))

  }

  curveyCheckbox = createCheckbox('make them curvey').checked(true);

  mouseClicked()

}

​

function mouseClicked(a){

  if (a) {

    aaaa=1;

  }

  else if (mouseX < 0 ||

     mouseX > width ||

     mouseY > height ||

     mouseY < 0){

    return;

  }

  // this is a hack to empty const ararys.

  deltas.length = 0;

  ts.length = 0;

  colorMode(HSB)

  for (var i = 0; i < AMT_SLIDER.value(); i ++){

    deltas.push(random()/random(1000, 100000))

    ts.push(random()*100)

  }

​

  // print(deltas[0], ts[0])

}

​

function gradientbackground(col1, col2){

  push()

  colorMode(RGB);

    for (var i = 0; i < height ; i ++){

    stroke(lerpColor(col1, col2, i/height))

    rect(0, i , height, 2);

  }

  pop()

}

​

function drawstraights()  {

  strokeWeight(SIZE_SCALER_SLIDER.value())

  for (var i = 0 ; i < AMT_SLIDER.value() ; i ++ ) {

    rval = COLOR_SLIDERS[0].value();

    gval = COLOR_SLIDERS[1].value();

    bval = COLOR_SLIDERS[2].value();

    aval = map(COLOR_SLIDERS[3].value(),0,255,0,1);

    col = color(rval, gval, bval,aval)

    stroke(col)

    line(0, random(0,height), width, random(0, height))

  }

}

​

function drawCurveys()  {

    push()

  for (var i = 0 ; i < AMT_SLIDER.value() ; i ++ ) {

    t = ts[i];

    // TODO 

    // CHECKBOXes for color change modes

    // and uhhhh

    // lerp between two colours based on T or something

    // maybe loop t % 255 orsmth

    stroke(

      T_OFFSET_SLIDERS[4].value()*noise(t)*COLOR_SLIDERS[0].value(),

      T_OFFSET_SLIDERS[5].value()*COLOR_SLIDERS[1].value(),

      T_OFFSET_SLIDERS[5].value()*T_OFFSET_SLIDERS[4].value()*COLOR_SLIDERS[2].value(),

      T_OFFSET_SLIDERS[6].value()*map(COLOR_SLIDERS[3].value(),0,255,0,10)

    )

​

    strokeWeight(noise(t)*SIZE_SCALER_SLIDER.value())

    bezier(0,

           map(noise(t), 0, 1, -50, 450),

           map(noise(t)*T_OFFSET_SLIDERS[0].value(), 0, 1, POS_ANCHOR_SLIDERS[0].value(), POS_ANCHOR_SLIDERS[1].value()),

           map(noise(t)*T_OFFSET_SLIDERS[1].value(), 0, 1, POS_ANCHOR_SLIDERS[2].value(), POS_ANCHOR_SLIDERS[3].value()),

           map(noise(t)*T_OFFSET_SLIDERS[2].value(), 0, 1, POS_ANCHOR_SLIDERS[4].value(), POS_ANCHOR_SLIDERS[5].value()),

           map(noise(t)*T_OFFSET_SLIDERS[3].value(), 0, 1, POS_ANCHOR_SLIDERS[6].value(), POS_ANCHOR_SLIDERS[7].value()),

           height,

           map(noise(t), 0, 1, -50, 450))

    // why is it so flashy deltas are small

    ts[i] += deltas[i];

  }

​

  pop()

}

​

function draw() {

​

  gradientbackground(color('orange'), color('purple'))

  if (curveyCheckbox.checked()) { 

    drawCurveys()

  } else {

    drawstraights()

  }

​

}

​

​

​