fractalkitty looking for math? fractalkitty.com

all

What if? String Thing

#trig#color#interactive#animation#dom#math

Created for presentation on string art play.

playBoolmakeButtonsliderChange1sliderChange2sliderChange3sliderChange4sliderChange5bPress

let a = 5,
  b = 4,
  c = 0.3;
let ch = 183,
  cs = 42,
  cb = 100;
let playBool = false;
let xs = 1,
  ys = 1;
function setup() {
  tmp = min(windowWidth, windowHeight) * 0.95;
  createCanvas(tmp, tmp);
  angleMode(DEGREES);
  makeButton();
  strokeWeight(0.7);
  colorMode(HSB);
}

function draw() {
  background(ch, cs, 100 - cb * 2);
  t = frameCount / 100;
  translate(width / 2, width / 2);
  if (playBool) {
    a = (a + 0.001) % 40;
    valueDisp1.html("string step a =  " + round(a, 2) + " + b");
    aSlider.value(a);
  }
  for (let i = 0; i <= 360; i += c) {
    stroke(ch, cs, cb);
    strokeWeight(0.3);
    x1 = ((width / 2.5) * sin(i * (a + b))) / xs;
    y1 = ((width / 2.5) * cos(i * (a + b))) / ys;
    x2 = (width / 2.5) * sin(i * b);
    y2 = (width / 2.5) * cos(i * b);

    line(x1, y1, x2, y2);
  }
}
function makeButton() {
  stroke(255);
  fill(255);
  button = createButton("Animate a");
  button.position(5, 20);
  button.mousePressed(bPress);
  aSlider = createSlider(1, 100, a, 0.1);
  aSlider.position(5, 100);
  aSlider.size(80, 20);
  bSlider = createSlider(1, 100, b, 1);
  bSlider.position(5, 130);
  bSlider.size(80, 20);
  cSlider = createSlider(0.1, 2, c, 0.1);
  cSlider.position(5, 70);
  cSlider.size(80, 20);
  chSlider = createSlider(0, 360, cb, 1);
  chSlider.position(5, 190);
  chSlider.size(80, 20);
  csSlider = createSlider(0, 100, cs, 1);
  csSlider.position(5, 220);
  csSlider.size(80, 20);
  cbSlider = createSlider(0, 100, cb, 1);
  cbSlider.position(5, 250);
  cbSlider.size(80, 20);
  valueDisp1 = createP();
  xsSlider = createSlider(-10, 10, xs, 0.05);
  xsSlider.position(5, 300);
  xsSlider.size(80, 20);
  ysSlider = createSlider(-10, 10, ys, 0.05);
  ysSlider.position(5, 330);
  ysSlider.size(80, 20);
  valueDisp1 = createP();
  valueDisp1.position(5, 72);
  valueDisp1.html("string step a = " + round(a, 2) + " + b");
  valueDisp1.style("color", "#e6fbff");
  valueDisp2 = createP();
  valueDisp2.position(5, 102);
  valueDisp2.html("string step b =  " + b);
  valueDisp2.style("color", "#e6fbff");
  valueDisp3 = createP();
  valueDisp3.position(5, 40);
  valueDisp3.html("step size =  " + c);
  valueDisp3.style("color", "#e6fbff");
  valueDisp4 = createP();
  valueDisp4.position(5, 160);
  valueDisp4.html("hue: " + ch);
  valueDisp4.style("color", "#e6fbff");
  valueDisp5 = createP();
  valueDisp5.position(5, 193);
  valueDisp5.html("saturation: " + cs);
  valueDisp5.style("color", "#e6fbff");
  valueDisp6 = createP();
  valueDisp6.position(5, 223);
  valueDisp6.html("brightness: " + cb);
  valueDisp6.style("color", "#e6fbff");
  valueDisp7 = createP();
  valueDisp7.position(5, 275);
  valueDisp7.html("x play: " + xs);
  valueDisp7.style("color", "#e6fbff");
  valueDisp8 = createP();
  valueDisp8.position(5, 305);
  valueDisp8.html("y play: " + ys);
  valueDisp8.style("color", "#e6fbff");
  aSlider.input(sliderChange1);
  bSlider.input(sliderChange2);
  cSlider.input(sliderChange3);
  chSlider.input(sliderChange4);
  csSlider.input(sliderChange4);
  cbSlider.input(sliderChange4);
  xsSlider.input(sliderChange5);
  ysSlider.input(sliderChange5);
  function sliderChange1() {
    a = aSlider.value();
    valueDisp1.html("string step a =  " + +round(a, 2) + " + b");
  }
  function sliderChange2() {
    b = bSlider.value();
    valueDisp2.html("string step b =  " + b);
  }
  function sliderChange3() {
    c = cSlider.value();
    valueDisp3.html("step size =  " + c);
  }
  function sliderChange4() {
    ch = chSlider.value();
    valueDisp4.html("hue: " + ch);
    cs = csSlider.value();
    valueDisp5.html("saturation: " + cs);
    cb = cbSlider.value();
    valueDisp6.html("brightness: " + cb);
  }
  function sliderChange5() {
    xs = xsSlider.value();
    ys = ysSlider.value();
    valueDisp7.html("x play: " + xs);
    valueDisp8.html("y play: " + ys);
  }
  function bPress() {
    playBool = !playBool;
    a = round(a);
    valueDisp1.html("string step a =  " + round(a, 2) + " + b");
  }
}

function windowResized() {
  tmp = min(windowWidth, windowHeight) * 0.95;
  resizeCanvas(tmp, tmp);
}