fractalkitty looking for math? fractalkitty.com

all

String Art Investigate tool

#trig#color#interactive#animation#dom#tool#math#geometry#classroom

playBoolmakeButtonsliderChange1sliderChange2sliderChange3bPressbPress2

let a = 1,
  b = 2,
  c = 6;
let ch = 183,
  cs = 42,
  cb = 100,
  t = 1;
let playBool = false;
function setup() {
  tmp = min(windowWidth, windowHeight) * 0.95;
  createCanvas(tmp, tmp);
  angleMode(DEGREES);
  makeButton();
  strokeWeight(1);
  colorMode(HSB);
}

function draw() {
  translate(width / 2, width / 2);
  background(ch, cs, 100 - cb * 2);
  valueDisp3.html("nStrings  " + t);
  for (let i = 0; i <= 360; i += c) {
    x1 = (width / 2.5) * sin(i);
    y1 = (width / 2.5) * cos(i);
    circle(x1, y1, 2);
  }

  if (playBool) {
    a = (a + 0.001) % 40;
    valueDisp1.html("string step a =  " + round(a, 2));
    aSlider.value(a);
  }
  for (let i = 0; i <= c * t; i += c) {
    stroke(ch, cs, cb);
    x1 = (width / 2.5) * sin(i * a);
    y1 = (width / 2.5) * cos(i * a);
    x2 = (width / 2.5) * sin(i * b);
    y2 = (width / 2.5) * cos(i * b);
    line(x1, y1, x2, y2);
  }
}
function mousePressed() {
  t++;
}
function makeButton() {
  stroke(255);
  fill(255);
  button = createButton("Animate a");
  button.position(5, 20);
  button.mousePressed(bPress);
  aSlider = createSlider(1, 40, a, 1);
  aSlider.position(5, 100);
  aSlider.size(80, 20);
  bSlider = createSlider(1, 40, b, 1);
  bSlider.position(5, 130);
  bSlider.size(80, 20);
  button = createButton("Reset Strings");
  button.position(5, 50);
  button.mousePressed(bPress2);

  valueDisp1 = createP();
  valueDisp1.position(5, 72);
  valueDisp1.html("string step a = " + a);
  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, 140);
  valueDisp3.html("nStrings:  " + t);
  valueDisp3.style("color", "#e6fbff");
  valueDisp4 = createP();
  valueDisp4.position(300, 12);
  valueDisp4.html("Click to add strings");
  valueDisp4.style("color", "#e6fbff");

  aSlider.input(sliderChange1);
  bSlider.input(sliderChange2);
  function sliderChange1() {
    a = aSlider.value();
    valueDisp1.html("string step a =  " + round(a, 2));
  }
  function sliderChange2() {
    b = bSlider.value();
    valueDisp2.html("string step b =  " + b);
  }
  function sliderChange3() {
    c = cSlider.value();
    valueDisp3.html("step size =  " + c);
  }
}
function bPress() {
  playBool = !playBool;
  a = round(a);
  valueDisp1.html("string step a =  " + round(a, 2));
  t--;
}
function bPress2() {
  t = -1;
}

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