Моделирование распространения газовых примесей на JavaSctipt — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
(Новая страница: «== Описание == *Моделирование распространения дыма на JavaScript *Исполнители Боринских_Семен…»)
 
 
(не показаны 4 промежуточные версии этого же участника)
Строка 1: Строка 1:
 +
 
== Описание ==
 
== Описание ==
−
*Моделирование распространения дыма на JavaScript
+
*Моделирование распространения газовых примесей на JavaScript
 
*Исполнители [[Боринских_Семен|Боринских Семен]],[[Лапшов_Андрей|Лапшов Андрей]]
 
*Исполнители [[Боринских_Семен|Боринских Семен]],[[Лапшов_Андрей|Лапшов Андрей]]
 
*Группа 3630103/90003
 
*Группа 3630103/90003
  
 
== Математическая модель ==
 
== Математическая модель ==
−
===Используемые уравнения===
+
===Используемые уравнения:===
−
#22;
+
{{#widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/BorinskihLapshov/asd1.PNG | width=410 | height=110 | border=0}}
−
#22;
+
{{#widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/BorinskihLapshov/aa2.PNG | width=1000 | height=100 | border=0}}
−
===Начальные условия===
+
*F(x,y,t), G(x,y,t) - функции источника
 +
*A, a - специальные коэффициенты
 +
*T - температура
 +
*С - концентрация
 +
===Начальные условия:===
 +
*источник располагается в центре комнаты
 +
*L = 2 - длина и ширина источника
 +
 
 +
====Температура====
 +
*T0 = 300 - начальная температура во всем помещении;
 +
*Tmax = 400 - температура внутри источника;
  
 +
====Концентрация====
 +
*C0 = 0.03 - концентрация газовой смеси во всем помещении;
 +
*Cmax = 0.97 - концентрация газовой смеси внутри источника;
 
== Визуализация ==
 
== Визуализация ==
−
{{#widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/BorinskihLapshov/animation.html | width=1000 | height=600 | border=0}}
+
{{#widget:Iframe | url=http://tm.spbstu.ru/htmlets/js2020/BorinskihLapshov/animation.html | width=1100 | height=600 | border=0}}
 +
 
 +
== Код программы ==
 +
<div class="mw-collapsible mw-collapsed">
 +
'''Код программы на языке JavaScript:''' <div class="mw-collapsible-content">
 +
<syntaxhighlight lang="javascript" line start="1" enclose="div">
 +
/*
 +
x0 - координата источника по иксу
 +
y0 - координата источника по игреку
 +
U0 - начальная температура во всем помещении
 +
C0 - пиковая интенсивность источника
 +
 
 +
C - массив значений концентрации
 +
G - массив значений источника диффузанта
 +
A - коэф. перед dC/dt
 +
*/
 +
window.addEventListener('load', main, false);
 +
function main()
 +
{
 +
 +
var ctx = canvas_example.getContext('2d');
 +
var ctx1 = canvas_example1.getContext('2d');
 +
 
 +
var X_MAX=canvas_example.height;
 +
var Y_MAX=canvas_example.height;
 +
var L=4;
 +
var t0=0;
 +
var U0=300;
 +
var C0=1;
 +
var a=0.08;
 +
var A=1000000;
 +
 
 +
 
 +
var dt = 0.01;
 +
var X_STEPS = 50;
 +
var Y_STEPS = 50;
 +
var x0=X_STEPS/2;
 +
var y0=Y_STEPS/2;
 +
var h=X_MAX/X_STEPS;
 +
var T = new Array();
 +
var C = new Array();
 +
var G = new Array();
 +
var fps = 60;
 +
var MX = X_STEPS/X_MAX;
 +
var MY = Y_STEPS/Y_MAX;
 +
var С0=0.03;
 +
var Cmax=0.97;
 +
var flag1=0;
 +
 
 +
var flag3=0;
 +
 
 +
var timer;
 +
var timer1;
 +
var check=0;
 +
 
 +
 
 +
 
 +
 
 +
 +
Start();
 +
drawC();
 +
drawT();
 +
flag1=1;
 +
flag3=0;
 +
 +
 +
 +
 +
function Start()
 +
{
 +
for(var i = 0; i < X_STEPS; i++) {
 +
T[i] = new Array();
 +
C[i] = new Array();
 +
G[i] = new Array();
 +
for(var j = 0; j < Y_STEPS; j++) {
 +
T[i][j] = U0;
 +
C[i][j] = С0;
 +
G[i][j] = 0.0;
 +
}
 +
}
 +
//это чтобы задать начальное распределение тепла от ичточника
 +
for(var i = x0-L/2; i <x0+L/2; i++)
 +
{
 +
for(var j = y0-L/2; j <y0+L/2; j++)
 +
{
 +
T[i][j] = U0+100;
 +
C[i][j] = Cmax;
 +
}
 +
}
 +
}
 +
//Пуск
 +
button1.onclick = function()
 +
{
 +
if (flag1==1)
 +
{
 +
controlC();
 +
controlT();
 +
console.log('Старт');
 +
flag3=2;
 +
}
 +
}
 +
 +
//пауза
 +
button2.onclick = function()
 +
{
 +
 +
if (flag3==2)
 +
{
 +
clearTimeout(timer);
 +
clearTimeout(timer1);
 +
console.log('Пауза');
 +
flag1=1;
 +
}
 +
//console.log(check);
 +
}
 +
//стоп
 +
button3.onclick = function()
 +
{
 +
 +
if (flag3==2)
 +
{
 +
clearTimeout(timer);
 +
clearTimeout(timer1);
 +
Start();
 +
drawC();
 +
drawT();
 +
console.log('Стоп');
 +
flag1=1;
 +
}
 +
 +
}
 +
 +
 +
function TEMPERATURE()
 +
{
 +
for(var i = 1; i < X_STEPS - 1; i++)
 +
{
 +
for(var j = 1; j < Y_STEPS - 1; j++)
 +
{
 +
T[i][j]= T[i][j] + dt*( (a*a) *((T[i+1][j]-2*T[i][j]+T[i-1][j])/(h*h)+(T[i][j+1]-2*T[i][j]+T[i][j-1])/(h*h)));
 +
C[i][j] = dt*(G[i][j]/A) + C[i][j] + (dt/A)*( ((T[i][j])**(1.5))*((1/(h*h))*(C[i+1][j] + C[i-1][j] + C[i][j-1] + C[i][j+1] - 4*C[i][j])) + (1.5*((T[i][j])**0.5)/(h*h))*((T[i+1][j] - T[i][j])*(C[i+1][j] - C[i][j]) + (T[i][j+1] - T[i][j])*(C[i][j+1] - C[i][j])));
 +
 +
}
 +
}
 +
for(var i = 0; i < X_STEPS; i++)
 +
{
 +
T[i][0] = U0;//T[i][1] + dt*(T[i][1] - U0);
 +
T[i][Y_STEPS -1] =U0; //T[i][Y_STEPS - 2] + dt*(T[i][Y_STEPS - 2] - U0);
 +
C[i][0] = С0;//C[i][1];
 +
C[i][Y_STEPS-1] = С0;//C[i][Y_STEPS - 1];
 +
}
 +
for(var j = 0; j < Y_STEPS; j++)
 +
{
 +
T[0][j] = U0;//T[1][j] + dt*(T[1][j] - U0);
 +
T[X_STEPS-1 ][j] = U0;//T[X_STEPS - 2][j] + dt*(T[X_STEPS - 2][j] - U0);
 +
C[0][j] = С0;//C[1][j];
 +
C[X_STEPS-1][j] = С0;//C[X_STEPS - 1][j];
 +
 +
}
 +
//Это чтобы  поддерживать температуру в источнике
 +
for(var i = x0-L/2; i < x0+L/2; i++)
 +
{
 +
for(var j = y0-L/2; j < y0+L/2; j++)
 +
{
 +
T[i][j] = U0+100;
 +
C[i][j] = Cmax;
 +
}
 +
}
 +
dt += 1;
 +
return T;
 +
return C;
 +
}
 +
 
 +
function drawT()
 +
{
 +
ctx.clearRect(0, 0, X_MAX, Y_MAX);
 +
//Для температуры
 +
for(var i=0; i<X_STEPS; i++)
 +
{
 +
for(var j=0; j<Y_STEPS; j++)
 +
{
 +
 +
ctx.beginPath();
 +
if(T[i][j] < 323.5) {
 +
ctx.fillStyle = ("rgb(0, " + ("" + parseInt(20 + 10*(T[i][j] - U0))) + ", 255)");
 +
}
 +
 +
else if((T[i][j] >= 323.5)&&(T[i][j] < 349)) {
 +
ctx.fillStyle = ("rgb(0, 255, " + ("" + parseInt(490 - 10*(T[i][j] - U0))) + ")");
 +
}
 +
 +
else if((T[i][j] >= 349)&&(T[i][j] < 374.5)) {
 +
ctx.fillStyle = ("rgb(" + ("" + parseInt(10*(T[i][j] - U0) - 490)) + ", 255, 0)")
 +
}
 +
 +
else if((T[i][j] >= 374.5)&&(T[i][j] <= 400)) {
 +
ctx.fillStyle = ("rgb(255," + ("" + parseInt(1000 - 10*(T[i][j] - U0))) + ", 0)");
 +
}
 +
ctx.fillRect(i/MX, j/MY, (j+1)/MX,(i+1)/MY);
 +
ctx.fill();
 +
}
 +
 +
}
 +
console.log('Температура')
 +
ctx.fillStyle="black";
 +
ctx.font = "italic 15pt Arial";
 +
ctx. fillText('Температура',10,450);
 +
ctx. fillText('Синий цвет: T[i][j]=300;',10,470);
 +
ctx. fillText('Красный цвет: T[i][j]=400;',10,490);
 +
}
 +
function drawC()
 +
{
 +
ctx1.clearRect(0, 0, X_MAX, Y_MAX);
 +
//для концентрации
 +
for(var i=0; i<X_STEPS; i++)
 +
{
 +
for(var j=0; j<Y_STEPS; j++)
 +
{
 +
 +
ctx1.beginPath();
 +
if(C[i][j] < 0.22795) {
 +
ctx1.fillStyle = ("rgb(0, " + ("" + parseInt(20 + (100000/97)*(C[i][j]))) + ", 255)");
 +
}
 +
 +
else if((C[i][j] >= 0.22795)&&(C[i][j] < 0.4753)) {
 +
ctx1.fillStyle = ("rgb(0, 255, " + ("" + parseInt(490 - (100000/97)*(C[i][j] ))) + ")");
 +
}
 +
 +
else if((C[i][j] >= 0.4753)&&(C[i][j] < 0.72265)) {
 +
ctx1.fillStyle = ("rgb(" + ("" + parseInt((100000/97)*(C[i][j] ) - 490)) + ", 255, 0)")
 +
}
 +
 +
else if((C[i][j] >= 0.72265)&&(C[i][j] <= 0.97)) {
 +
ctx1.fillStyle = ("rgb(255," + ("" + parseInt(1000 - (100000/97)*(C[i][j] ))) + ", 0)");
 +
}
 +
ctx1.fillRect(i/MX, j/MY, (j+1)/MX,(i+1)/MY);
 +
ctx1.fill();
 +
 +
}
 +
 +
}
 +
 +
ctx1.fillStyle="black";
 +
ctx1.font = "italic 15pt Arial";
 +
ctx1. fillText('Концентрация',10,450);
 +
ctx1. fillText('Синий цвет: C[i][j]=0.03;',10,470);
 +
ctx1. fillText('Красный цвет: C[i][j]=0.97;',10,490);
 +
}
 +
//первый интервал - [Tmin; Tmin + 0.235*(Tmax - Tmin)] - от синего к голубому, rgb(0, 20 + 10*(T - Tmin), 255)
 +
//второй интервал - [Tmin + 0.235*(Tmax - Tmin); Tmin + 0.49*(Tmax - Tmin)] - от голубого к зеленому, rgb(0, 255, 490 - 10*(T - Tmin))
 +
//третий интервал - [Tmin + 0.49*(Tmax - Tmin); Tmin + 0.745*(Tmax - Tmin)] - от зеленого к желтому, rgb(10*(T - Tmin) - 490; 255; 0)
 +
//четвертый интервал - [Tmin + 0.745(Tmax - Tmin); Tmax] - от желтого к красному; rgb(255, 1000 - 10*(T - Tmin); 0)
 +
function controlC()
 +
{
 +
drawC();
 +
TEMPERATURE();
 +
timer = setTimeout(controlC, 1000/fps); //1000мс
 +
if (check==4541)
 +
{
 +
clearTimeout(timer);
 +
Start();
 +
drawC();
 +
drawT();
 +
console.log('Дальше схема может разойтись');
 +
flag1=0;
 +
}
 +
}
 +
function controlT()
 +
{
 +
drawT();
 +
TEMPERATURE();
 +
timer1 = setTimeout(controlT, 1000/fps); //1000мс
 +
if (check==4541)
 +
{
 +
clearTimeout(timer1);
 +
Start();
 +
drawC();
 +
drawT();
 +
console.log('Дальше схема может разойтись');
 +
flag1=0;
 +
}
 +
}
 +
 
 +
}
 +
</syntaxhighlight>
 +
</div>
 +
 
 +
<div class="mw-collapsible mw-collapsed">
 +
'''Код программы на языке HTML:''' <div class="mw-collapsible-content">
 +
<syntaxhighlight lang="html" line start="1" enclose="div">
 +
<!DOCTYPE html>
 +
<html>
 +
<head>
 +
<script src='animation.js'></script>
 +
<link href="style.css" rel="stylesheet"/>
 +
</head>
 +
 +
<body bgcolor='#FFFFFF'>
 +
<table >
 +
<tr>
 +
<td> <canvas id='canvas_example' width=500 height=500 style='border: 1px solid black;'></canvas> </td>
 +
<td> <canvas id='canvas_example1' width=500 height=500 style='border: 1px solid black;'></canvas> </td>
 +
</tr>
 +
</table>
 +
<table >
 +
<tr>
 +
<td> <input type=button id=button1 value='Пуск'> </td>
 +
<td> <input type=button id=button2 value='Пауза'> </td>
 +
<td> <input type=button id=button3 value='Стоп'> </td>
 +
</tr>
 +
</table>
 +
 +
 +
 
 +
</body>
 +
</html>
 +
</syntaxhighlight>
 +
</div>
 +
<div class="mw-collapsible mw-collapsed">
 +
'''Код программы на языке CSS:''' <div class="mw-collapsible-content">
 +
<syntaxhighlight lang="html" line start="1" enclose="div">
 +
input
 +
{
 +
margin:2px;
 +
 
 +
    width:100%;
 +
    height:100%;
 +
background-color:gainsboro;
 +
font-size:100%;
 +
}
 +
 
 +
#button1, #button2, #button3, #button4
 +
{
 +
background-color:gainsboro;
 +
width:100%;
 +
    height:100%;
 +
}
 +
 
 +
 
 +
body
 +
{
 +
background-color: snow;
 +
 +
 +
}
 +
 
 +
 
 +
 
 +
 
 +
</syntaxhighlight>
 +
</div>

Текущая версия на 14:15, 31 мая 2020

Описание[править]

Математическая модель[править]

Используемые уравнения:[править]

  • F(x,y,t), G(x,y,t) - функции источника
  • A, a - специальные коэффициенты
  • T - температура
  • С - концентрация

Начальные условия:[править]

  • источник располагается в центре комнаты
  • L = 2 - длина и ширина источника

Температура[править]

  • T0 = 300 - начальная температура во всем помещении;
  • Tmax = 400 - температура внутри источника;

Концентрация[править]

  • C0 = 0.03 - концентрация газовой смеси во всем помещении;
  • Cmax = 0.97 - концентрация газовой смеси внутри источника;

Визуализация[править]

Код программы[править]

Код программы на языке JavaScript: 
  1 /*
  2 x0 - координата источника по иксу
  3 y0 - координата источника по игреку
  4 U0 - начальная температура во всем помещении
  5 C0 - пиковая интенсивность источника
  6 
  7 C - массив значений концентрации
  8 G - массив значений источника диффузанта
  9 A - коэф. перед dC/dt
 10 */
 11 window.addEventListener('load', main, false);
 12 function main()
 13 {
 14 	
 15 var ctx = canvas_example.getContext('2d');
 16 var ctx1 = canvas_example1.getContext('2d');
 17 
 18 var X_MAX=canvas_example.height;
 19 var Y_MAX=canvas_example.height;
 20 var L=4;
 21 var t0=0;
 22 var U0=300;
 23 var C0=1;
 24 var a=0.08;
 25 var A=1000000;
 26 
 27 
 28 var dt = 0.01;
 29 var X_STEPS = 50;
 30 var Y_STEPS = 50;
 31 var x0=X_STEPS/2;
 32 var y0=Y_STEPS/2;
 33 var h=X_MAX/X_STEPS;
 34 var T = new Array();
 35 var C = new Array();
 36 var G = new Array();
 37 var fps = 60;
 38 var MX = X_STEPS/X_MAX;
 39 var MY = Y_STEPS/Y_MAX;
 40 var С0=0.03;
 41 var Cmax=0.97;
 42 var flag1=0;
 43 
 44 var flag3=0;
 45 
 46 var timer;
 47 var timer1;
 48 var check=0;
 49 
 50 
 51 
 52 
 53 	
 54 	Start();
 55 	drawC();
 56 	drawT();
 57 	flag1=1;
 58 	flag3=0;
 59 	
 60 	
 61 	
 62 	
 63 	function Start() 
 64 	{
 65 		for(var i = 0; i < X_STEPS; i++) {
 66 			T[i] = new Array();
 67 			C[i] = new Array();
 68 			G[i] = new Array();
 69 			for(var j = 0; j < Y_STEPS; j++) {
 70 				T[i][j] = U0;
 71 				C[i][j] = С0;
 72 				G[i][j] = 0.0;
 73 			}
 74 		}
 75 		//это чтобы задать начальное распределение тепла от ичточника
 76 		for(var i = x0-L/2; i <x0+L/2; i++) 
 77 		{
 78 			for(var j = y0-L/2; j <y0+L/2; j++) 
 79 			{
 80 				T[i][j] = U0+100;
 81 				C[i][j] = Cmax;
 82 			}
 83 		}
 84 	}
 85 	//Пуск
 86 	button1.onclick = function()
 87 	{
 88 		if (flag1==1)
 89 		{	
 90 			controlC();
 91 			controlT();
 92 			console.log('Старт');
 93 			flag3=2;
 94 		}
 95 	}
 96 	
 97 	//пауза
 98 	button2.onclick = function()
 99 	{
100 		
101 		if (flag3==2)
102 		{
103 			clearTimeout(timer);
104 			clearTimeout(timer1);
105 			console.log('Пауза');
106 			flag1=1;
107 		}
108 		//console.log(check);
109 	}
110 	//стоп
111 	button3.onclick = function()
112 	{
113 		
114 		if (flag3==2)
115 		{
116 			clearTimeout(timer);
117 			clearTimeout(timer1);
118 			Start();
119 			drawC();
120 			drawT();
121 			console.log('Стоп');
122 			flag1=1;
123 		}
124 		
125 	}
126 	
127 	
128 function TEMPERATURE() 
129 {
130 	for(var i = 1; i < X_STEPS - 1; i++) 
131 	{
132 		for(var j = 1; j < Y_STEPS - 1; j++) 
133 		{
134 			T[i][j]= T[i][j] + dt*( (a*a) *((T[i+1][j]-2*T[i][j]+T[i-1][j])/(h*h)+(T[i][j+1]-2*T[i][j]+T[i][j-1])/(h*h)));
135 			C[i][j] = dt*(G[i][j]/A) + C[i][j] + (dt/A)*( ((T[i][j])**(1.5))*((1/(h*h))*(C[i+1][j] + C[i-1][j] + C[i][j-1] + C[i][j+1] - 4*C[i][j])) + (1.5*((T[i][j])**0.5)/(h*h))*((T[i+1][j] - T[i][j])*(C[i+1][j] - C[i][j]) + (T[i][j+1] - T[i][j])*(C[i][j+1] - C[i][j])));
136 			
137 		}
138 	}
139 	for(var i = 0; i < X_STEPS; i++) 
140 	{
141 		T[i][0] = U0;//T[i][1] + dt*(T[i][1] - U0);
142 		T[i][Y_STEPS -1] =U0; //T[i][Y_STEPS - 2] + dt*(T[i][Y_STEPS - 2] - U0);
143 		C[i][0] = С0;//C[i][1];
144 		C[i][Y_STEPS-1] = С0;//C[i][Y_STEPS - 1];
145 	}
146 	for(var j = 0; j < Y_STEPS; j++) 
147 	{
148 		T[0][j] = U0;//T[1][j] + dt*(T[1][j] - U0);
149 		T[X_STEPS-1 ][j] = U0;//T[X_STEPS - 2][j] + dt*(T[X_STEPS - 2][j] - U0);
150 		C[0][j] = С0;//C[1][j];
151 		C[X_STEPS-1][j] = С0;//C[X_STEPS - 1][j];
152 		
153 	}
154 	//Это чтобы  поддерживать температуру в источнике
155 	for(var i = x0-L/2; i < x0+L/2; i++) 
156 	{
157 		for(var j = y0-L/2; j < y0+L/2; j++) 
158 		{
159 			T[i][j] = U0+100;
160 			C[i][j] = Cmax;
161 		}
162 	}
163 	dt += 1;
164 	return T;
165 	return C;
166 }
167 
168 function drawT()
169 {
170 	ctx.clearRect(0, 0, X_MAX, Y_MAX);
171 	//Для температуры
172 	for(var i=0; i<X_STEPS; i++)
173 	{
174 		for(var j=0; j<Y_STEPS; j++)
175 		{
176 			
177 			ctx.beginPath();
178 			if(T[i][j] < 323.5) {
179 				ctx.fillStyle = ("rgb(0, " + ("" + parseInt(20 + 10*(T[i][j] - U0))) + ", 255)");
180 			}
181 				
182 			else if((T[i][j] >= 323.5)&&(T[i][j] < 349)) {
183 				ctx.fillStyle = ("rgb(0, 255, " + ("" + parseInt(490 - 10*(T[i][j] - U0))) + ")");
184 			}
185 				
186 			else if((T[i][j] >= 349)&&(T[i][j] < 374.5)) {
187 				ctx.fillStyle = ("rgb(" + ("" + parseInt(10*(T[i][j] - U0) - 490)) + ", 255, 0)")
188 			}
189 				
190 			else if((T[i][j] >= 374.5)&&(T[i][j] <= 400)) {
191 				ctx.fillStyle = ("rgb(255," + ("" + parseInt(1000 - 10*(T[i][j] - U0))) + ", 0)");
192 			}			
193 			ctx.fillRect(i/MX, j/MY, (j+1)/MX,(i+1)/MY);
194 			ctx.fill();
195 		}
196 		
197 	}
198 	console.log('Температура')
199 	ctx.fillStyle="black";
200 	ctx.font = "italic 15pt Arial";
201 	ctx. fillText('Температура',10,450);
202 	ctx. fillText('Синий цвет: T[i][j]=300;',10,470);
203 	ctx. fillText('Красный цвет: T[i][j]=400;',10,490);
204 }
205 function drawC()
206 {
207 	ctx1.clearRect(0, 0, X_MAX, Y_MAX);
208 	//для концентрации
209 	for(var i=0; i<X_STEPS; i++)
210 	{
211 		for(var j=0; j<Y_STEPS; j++)
212 		{
213 			
214 			ctx1.beginPath();
215 			if(C[i][j] < 0.22795) {
216 				ctx1.fillStyle = ("rgb(0, " + ("" + parseInt(20 + (100000/97)*(C[i][j]))) + ", 255)");
217 			}
218 				
219 			else if((C[i][j] >= 0.22795)&&(C[i][j] < 0.4753)) {
220 				ctx1.fillStyle = ("rgb(0, 255, " + ("" + parseInt(490 - (100000/97)*(C[i][j] ))) + ")");
221 			}
222 			
223 			else if((C[i][j] >= 0.4753)&&(C[i][j] < 0.72265)) {
224 				ctx1.fillStyle = ("rgb(" + ("" + parseInt((100000/97)*(C[i][j] ) - 490)) + ", 255, 0)")
225 			}
226 			
227 			else if((C[i][j] >= 0.72265)&&(C[i][j] <= 0.97)) {
228 				ctx1.fillStyle = ("rgb(255," + ("" + parseInt(1000 - (100000/97)*(C[i][j] ))) + ", 0)");
229 			}			
230 			ctx1.fillRect(i/MX, j/MY, (j+1)/MX,(i+1)/MY);
231 			ctx1.fill();
232 			
233 		}
234 		
235 	}
236 	
237 	ctx1.fillStyle="black";
238 	ctx1.font = "italic 15pt Arial";
239 	ctx1. fillText('Концентрация',10,450);
240 	ctx1. fillText('Синий цвет: C[i][j]=0.03;',10,470);
241 	ctx1. fillText('Красный цвет: C[i][j]=0.97;',10,490);
242 }
243 	//первый интервал - [Tmin; Tmin + 0.235*(Tmax - Tmin)] - от синего к голубому, rgb(0, 20 + 10*(T - Tmin), 255)
244 	//второй интервал - [Tmin + 0.235*(Tmax - Tmin); Tmin + 0.49*(Tmax - Tmin)] - от голубого к зеленому, rgb(0, 255, 490 - 10*(T - Tmin))
245 	//третий интервал - [Tmin + 0.49*(Tmax - Tmin); Tmin + 0.745*(Tmax - Tmin)] - от зеленого к желтому, rgb(10*(T - Tmin) - 490; 255; 0)
246 	//четвертый интервал - [Tmin + 0.745(Tmax - Tmin); Tmax] - от желтого к красному; rgb(255, 1000 - 10*(T - Tmin); 0)
247 	function controlC()
248 	{
249 		drawC();
250 		TEMPERATURE();
251 		timer = setTimeout(controlC, 1000/fps); //1000мс
252 		if (check==4541) 
253 		{
254 			clearTimeout(timer);
255 			Start();
256 			drawC();
257 			drawT();
258 			console.log('Дальше схема может разойтись');
259 			flag1=0;	
260 		}
261 	}
262 	function controlT()
263 	{
264 		drawT();
265 		TEMPERATURE();
266 		timer1 = setTimeout(controlT, 1000/fps); //1000мс
267 		if (check==4541) 
268 		{
269 			clearTimeout(timer1);
270 			Start();
271 			drawC();
272 			drawT();
273 			console.log('Дальше схема может разойтись');
274 			flag1=0;
275 		}
276 	}
277 
278 }
Код программы на языке HTML: 
 1 <!DOCTYPE html>
 2 <html>
 3 	<head>
 4 		<script src='animation.js'></script>
 5 		<link href="style.css" rel="stylesheet"/>
 6 	</head>
 7 	
 8 	<body bgcolor='#FFFFFF'>
 9 	<table >
10 	<tr>
11 		<td> <canvas id='canvas_example' width=500 height=500 style='border: 1px solid black;'></canvas> </td> 
12 		<td> <canvas id='canvas_example1' width=500 height=500 style='border: 1px solid black;'></canvas> </td> 
13 	</tr>
14 	</table>
15 	<table >
16 	<tr>
17 		<td> <input type=button id=button1 value='Пуск'> </td> 
18 		<td> <input type=button id=button2 value='Пауза'> </td> 
19 		<td> <input type=button id=button3 value='Стоп'> </td> 
20 	</tr>
21 	</table>
22 	
23 		
24 
25 	</body>
26 </html>
Код программы на языке CSS: 
 1 	input
 2 {
 3 	margin:2px;
 4 
 5     width:100%;
 6     height:100%;
 7 	background-color:gainsboro;
 8 	font-size:100%;
 9 }
10 
11 #button1, #button2, #button3, #button4
12 {
13 	background-color:gainsboro;
14 	width:100%;
15     height:100%;
16 }
17 
18 
19 body
20 {
21 	background-color: snow;
22 	
23 	
24 }
Источник — «http://tm.spbstu.ru/?title=Моделирование_распространения_газовых_примесей_на_JavaSctipt&oldid=55999»