JSFiddle - React, Tailwind, and code Playground

by Timatnet

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Mathphys Lab</title>
<link href="layout.css" rel="stylesheet" type="text/css"></link>
<!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="http://flot.googlecode.com/files/jquery.flot-0.1.js"></script>
</head>
<body>
<h1>Диффузия</h1>
<div id="placeholder" style="width:600px;height:300px;"></div>
    <div id="info"></div>
 </body>
</html>

JavaScript

var l = 100;
var D = function(x) {
    return (Math.sin(x*0.01)+1.1)*0.5;
};
var C0 = function(x) {
    return Math.sin(x*Math.PI/l);
};
var Q = function(x, t) {
  return Math.cos(x*Math.PI/l + Math.PI/2);  
};
var dt = 0.3,
    dx = 2;

function nextLayer(previousLayer, time) {
    var newLayer = [];
    newLayer.push({ x: prevousLayer[0].x, u: 0 });
    
    for(var i = 1; i < prevousLayer.length - 1; ++i) {
        var psi = dt/(dx*dx);
        newLayer.push({
            x: prevousLayer[i].x + dx,
            u: psi*prevousLayer[i-1].u +
                (1-2*psi)*prevousLayer[i].u +
                psi*prevousLayer[i+1].u +
                dt*f(prevousLayer[i].x + dx, time)
        });
    }
    newLayer.push({ x: prevousLayer[prevousLayer.length - 1].x, u: 0 });    
    return newLayer;
}
function firstLayer(N) {
    var newLayer = [];
    for(var i = 0; i < N; ++i) {
        var x = dx*i/l;
        newLayer.push({ x: x, u: C0(x) });
    }
    return newLayer;
}
if(!Array.prototype.map) {
    Array.prototype.map = function(func) {
        var converted = [];
        for(var i = 0; i< this.length; ++i) {
            converted[i] = func(this[i]);
        }
        return converted;
    };
}

$(function () {
    var currentState = firstLayer(10);
    var time = 0;
    var timer = setInterval(function() {
        
        var converted = currentState.map(function(e) {
            return [e.x, e.u];
        });
        $("#info").text(JSON.stringify(converted));
        
        $.plot($("#placeholder"), [converted]);
        time += dt;
        nextLayer(currentState);
    }, 300);
});