diff --git a/Pages/Simulation/Interactions/Button-2/sketch.js b/Pages/Simulation/Interactions/Button-2/sketch.js index 0d6a89b82..508f4819f 100644 --- a/Pages/Simulation/Interactions/Button-2/sketch.js +++ b/Pages/Simulation/Interactions/Button-2/sketch.js @@ -7,7 +7,7 @@ function setup() { createCanvas(windowWidth, windowHeight); slider = createSlider(0, 1, d, 0.001); - slider.position(30,height*(0.42)); + slider.position(width*(0.05),height*(0.468)); slider_g = createSlider(0, 10, g, 0.1); slider_g.position(width*(0.05),height*(0.518)); @@ -19,37 +19,79 @@ function setup() { createCanvas(windowWidth, windowHeight); slider = createSlider(0, 1, d, 0.001); - slider.position(30,height*(1.2)); + slider.position(width*(0.3),height*(1.22)); slider_g = createSlider(0, 10, g, 0.1); - slider_g.position(width*(0.15),height*(1.265)); + slider_g.position(width*(0.3),height*(1.265)); slider_r = createSlider(0, 200, r, 1); - slider_r.position(width*(0.15),height*(1.315)); + slider_r.position(width*(0.3),height*(1.315)); } p = new Pendulum(createVector(width/2,0),400); + + text_g = createP(); + text_r = createP(); + text_d = createP(); } function draw() { background(250); textSize(24); + + + + + if(windowWidth>1010){ fill(1); text("Damping = " + d, width/4, 40); textSize(14); - text("g", width*(0.16), height*(0.258)); - text("r", width*(0.16), height*(0.308)); - text(slider_g.value(), width*(0.03),height*(0.258)); - text(slider_r.value(), width*(0.03),height*(0.308)); + // text("g", width*(0.16), height*(1.265)); + text("r", width*(0.16), height*(1.358)); + // text(slider_g.value(), width*(0.03),height*(0.258)); + // text(slider_r.value(), width*(0.03),height*(0.308)); + + createP("d").position(width*(0.14), height*0.458); + createP("g").position(width*(0.14), height*0.508); + createP("r").position(width*(0.14), height*0.558); + + text_g.position(width*(0.03), height*0.508); + text_g.html(slider_g.value()); + text_g.style('font-size', '12pt'); // Set the desired font size + + text_r.position(width*(0.025), height*0.558); + text_r.html(slider_r.value()); + text_r.style('font-size', '12pt'); // Set the desired font size + + text_d.position(width*(0.015), height*0.458); + text_d.html(slider.value()); + text_d.style('font-size', '12pt'); // Set the desired font size } else{ fill(1); - text("Damping = " + d, width/16, 20); + // text("Damping = " + d, width/16, 20); textSize(14); - text("g", width*(0.56), height*(0.948)); - text("r", width*(0.56), height*(1.00)); - text(slider_g.value(), width*(0.09),height*(0.953)); - text(slider_r.value(), width*(0.09),height*(1.000)); + // text("g", width*(0.56), height*(0.948)); + // text("r", width*(0.56), height*(1.00)); + // text(slider_g.value(), width*(0.09),height*(0.953)); + // text(slider_r.value(), width*(0.09),height*(1.000)); + + createP("d").position(width*(0.7), height*1.21); + createP("g").position(width*(0.7), height*1.255); + createP("r").position(width*(0.7), height*1.305); + + text_g.position(width*(0.23), height*1.255); + text_g.html(slider_g.value()); + text_g.style('font-size', '12pt'); // Set the desired font size + + text_r.position(width*(0.21), height*1.305); + text_r.html(slider_r.value()); + text_r.style('font-size', '12pt'); // Set the desired font size + + text_d.position(width*(0.18), height*1.21); + text_d.html(slider.value()); + text_d.style('font-size', '12pt'); // Set the desired font size + } p.go(); }