Wave Simulation

Done with Processing.js using the awesome jsfiddle.net

by quakeboy

HTML

<canvas width="600px" height="400px"></canvas>

CSS

</style> 
<script type="text/javascript">
    window.addEventListener('load',function() {
    var scripts = document.body.getElementsByTagName('script');
    var canvases = document.body.getElementsByTagName('canvas');
    new Processing(canvases[0],scripts[0].text);
}, false);
// Here prevent javascript in body from throwing error
</script>
<style>

JavaScript

/* 
Wave Simulation Incomplete
 */

int scrwidth = 600;
int defaultlevel = 0;
int displevel = 200;

int[] wavevalues_old = new int[scrwidth];
int[] wavevalues = new int[scrwidth];
int[] wavevalues_temp = new int[scrwidth];

// Setup the Processing Canvas
void setup() {
    size(scrwidth, 400);
    frameRate(60);

    //initing the wave
    for (int i = 0; i < scrwidth; i++)
    wavevalues[i] = defaultlevel;

    for (int i = 0; i < scrwidth; i++)
    wavevalues_old[i] = defaultlevel;
}

// Main draw loop
void draw() 
{
    // Clear + Fill  canvas grey
    background (200);

    for (int i = 1; i < scrwidth - 1; i++) 
        wavevalues[i] = (wavevalues_old[i - 1] + wavevalues_old[i + 1]) - wavevalues[i];


    beginShape();
    //just testing the line at the default level
    for (int i = 0; i <= scrwidth; i++)
    {
        wavevalues[i] *= 0.97;
        vertex(i, wavevalues[i] + displevel);
        
        //point(i, wavevalues[i] + displevel);
        
        //swapping done here
        wavevalues_temp[i] = wavevalues_old[i];
        wavevalues_old[i] = wavevalues[i];
        wavevalues[i] = wavevalues_temp[i];
    }
    endShape();
}

// Set circle's next destination
void mouseClicked() 
{
    if (mouseY >= displevel)
        wavevalues_old[mouseX] = wavevalues_old[mouseX] + 100;
    else
        wavevalues_old[mouseX] = wavevalues_old[mouseX] - 100;
}