Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: Slider values in simulations are Stacked on Previous Value #266

Merged
merged 3 commits into from
May 19, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
211 changes: 102 additions & 109 deletions Pages/Simulation/Interactions/Button-2/sketch.js
Original file line number Diff line number Diff line change
@@ -1,168 +1,161 @@
var p;
let d=0.994;
let g = 1;
let r = 48.0;
function setup() {
if(windowWidth>1010){
var pendulum;
let D = 0.994;
let G = 1;
let R = 48.0;
let isFirst = true;

function setup() {
if (windowWidth > 1010) {

createCanvas(windowWidth, windowHeight);

slider = createSlider(0, 1, d, 0.001);
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));
slider_r = createSlider(0, 200, r, 1);
slider_r.position(width*(0.05),height*(0.568));
slider_d = createSlider(0, 1, D, 0.001);
slider_d.position(width * (0.05), height * (0.468));

slider_g = createSlider(0, 10, G, 0.1);
slider_g.position(width * (0.05), height * (0.518));

slider_r = createSlider(0, 200, R, 1);
slider_r.position(width * (0.05), height * (0.568));
}
else{
else {
createCanvas(windowWidth, windowHeight);

slider = createSlider(0, 1, d, 0.001);
slider.position(width*(0.3),height*(1.22));

slider_g = createSlider(0, 10, g, 0.1);
slider_g.position(width*(0.3),height*(1.265));
slider_d = createSlider(0, 1, D, 0.001);
slider_d.position(width * (0.3), height * (1.22));

slider_g = createSlider(0, 10, G, 0.1);
slider_g.position(width * (0.3), height * (1.265));

slider_r = createSlider(0, 200, R, 1);
slider_r.position(width * (0.3), height * (1.315));
}
pendulum = new Pendulum(createVector(width / 2, 0), 400);

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);

slider_r = createSlider(0, 200, r, 1);
slider_r.position(width*(0.3),height*(1.315));
if (isFirst) {
text_g = createP();
text_r = createP();
text_d = createP();
}
p = new Pendulum(createVector(width/2,0),400);

text_g = createP();
text_r = createP();
text_d = createP();
isFirst = false
}

function draw() {
background(250);
textSize(24);





if(windowWidth>1010){
if (windowWidth > 1010) {
fill(1);
text("Damping = " + d, width/4, 40);
text("Damping = " + D, width / 4, 40);
textSize(14);
// 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

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_d.value());
text_d.style('font-size', '12pt'); // Set the desired font size
}
else{
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));

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_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_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
text_d.position(width * (0.18), height * 1.21);
text_d.html(slider_d.value());
text_d.style('font-size', '12pt'); // Set the desired font size

}
p.go();
pendulum.go();
}

function changeD0() {
d = 0;
slider_g.remove();
slider_r.remove();
slider.remove();
setup();
D = 0;
slider_g.remove();
slider_r.remove();
slider_d.remove();
setup();
}

function changeD1() {
d = 1;
slider_g.remove();
slider_r.remove();
slider.remove();
setup();
D = 1;
slider_g.remove();
slider_r.remove();
slider_d.remove();
setup();
}

function changeD2() {
d = slider.value();
slider_g.remove();
slider_r.remove();
slider.remove();
setup();
D = slider_d.value();
slider_g.remove();
slider_r.remove();
slider_d.remove();
setup();
}

function changeD3() {
g = slider_g.value();
r = slider_r.value();
slider_g.remove();
slider_r.remove();
slider.remove();
setup();
D = slider_d.value();
G = slider_g.value();
R = slider_r.value();
slider_g.remove();
slider_r.remove();
slider_d.remove();
setup();
}


function Pendulum(origin_, r_) {
// Fill all variables
this.origin = origin_.copy();
this.position = createVector();
this.r = r_;
if(windowWidth>1010)
this.angle = PI/3;
else
this.angle = PI/8;
this.R = r_;
if (windowWidth > 1010)
this.angle = PI / 3;
else
this.angle = PI / 8;

this.aVelocity = 0.0;
this.aAcceleration = 0.0;
this.damping = d;
this.ballr = r;
this.damping = D;
this.ballr = R;

this.go = function() {
this.go = function () {
this.update();
this.display();
};


// Function to update position
this.update = function() {
var gravity = g;
this.aAcceleration = (-1 * gravity / this.r) * sin(this.angle);
this.aVelocity += this.aAcceleration;
this.aVelocity *= this.damping;
this.angle += this.aVelocity;
this.update = function () {
var gravity = G;
this.aAcceleration = (-1 * gravity / this.R) * sin(this.angle);
this.aVelocity += this.aAcceleration;
this.aVelocity *= this.damping;
this.angle += this.aVelocity;
};

this.display = function() {
this.position.set(this.r*sin(this.angle), this.r*cos(this.angle), 0);
this.position.add(this.origin);
this.display = function () {
this.position.set(this.R * sin(this.angle), this.R * cos(this.angle), 0);
this.position.add(this.origin);

stroke(0);
line(this.origin.x, this.origin.y, this.position.x, this.position.y);
Expand Down
13 changes: 9 additions & 4 deletions Pages/Simulation/Interactions/Button-3/sketch.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ let button1, button2, button3, slider, button4;
let slider_m1, slider_m2, slider_u1, slider_u2;
let x, y;
let ball_u1 = 10, ball_u2 = 0, ball_m1 = 100, ball_m2 = 100;
let isFirst=true;

let posx = 200;

Expand All @@ -20,10 +21,13 @@ function setup() {
}
slider_m1 = createSlider(50, 200, ball_m1, 10);
slider_m1.position(width - posx, height * 0.23);
text_m1 = createP(); // Initialize text_m1
text_m2 = createP(); // Initialize text_m
text_u1 = createP(); // Initialize text_m
text_u2 = createP(); // Initialize text_m

if(isFirst){
text_m1 = createP(); // Initialize text_m1
text_m2 = createP(); // Initialize text_m
text_u1 = createP(); // Initialize text_m
text_u2 = createP(); // Initialize text_m
}

slider_m2 = createSlider(50, 200, ball_m2, 10);
slider_m2.position(width - posx, height * 0.26);
Expand Down Expand Up @@ -53,6 +57,7 @@ function setup() {
else
b2 = new Ball(x + 80, y, ball_m2, ball_u2, c2);
frameRate(27);
isFirst=false;
}

function draw() {
Expand Down
2 changes: 1 addition & 1 deletion Pages/Simulation/Interactions/Button-4/wave.js
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ function drawWave(time, d) {
scr.fillText('Time: ' + t.toFixed(2) + 's', 45, maxy-20);
}

/* Functon to clear the screen */
/* Function to clear the screen */
function clrscr() {
scr.fillStyle = "#ffffff";
scr.fillRect(0,0,maxx,maxy);
Expand Down
Loading