String Art Investigate tool
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);
}