What if? String Thing
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);
}