Development of a Real-Time Dynamic Graphing Web Page

Implementation of the Theory as Code

In summary, there are two key equations relating changes in concentrations of A and B to their concentrations at any given time:

In addition, there are two equations relating k₁ and k₂ to K:

Finally, a measure of whether or not equilibrium has been reached is determined by measuring Q and comparing that value to K.

That pretty much defines our variables.

Our key routine is the one that will change the concentrations of A and B. Let's call it react().

function react() {
    t++;
    dA = -k1 * A + k2 * B;
    dB = -k2 * B + k1 * A;
    A += dA;
    B += dB;
    Q = B / A;
    plotpoint(t, A, "red");
    plotpoint(t, B, "blue");
    if (t < tmax) {
        setTimeout("react()", delay);
    }
}

These variables are global variables, because we have not placed var in front of their definitions. That's OK, because they are variables that mean something in our theory. Let's make plotpoint() simply display on the document status bar for now:

function plotpoint(x, y, color) {
    status = "x=" + x + " y=" + y + " Q=" + Q;
}

In addition, we need to initialize these variables:

function initialize() {
    tmax = 50;
    delay = 1000;
    t = 0;
    A = 1;
    B = 0;
    K = 1;
    r = 0.01;
    Q = B / A;
    k2 = r / (K + 1);
    k1 = K * r / (K + 1);
    plotpoint(t, A, "red");
    plotpoint(t, B, "blue");
}

This is all we need for a perfectly fine JavaScript program that at least displays information on the status bar.

After you click on the "Run initialize();react()" link, above, consider what might be still needed. For example, how could we stop or interrupt the process if we needed to? If you like, go ahead and change the functions in the text area, then click on the "Run" link again and see what happens. When you are ready, go on to the next page.

back to the list of examples