-
Notifications
You must be signed in to change notification settings - Fork 16
/
index.html
73 lines (62 loc) · 2.17 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<html>
<head>
<style>
body {
background: grey;
}
canvas {
width:600px;
width:600px;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script src="algebra.js"></script>
<script src="mls-mpm.js"></script>
<script>
"use strict";
const renderEvery = 5;
const enableTiming = false;
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d', { alpha: false });
let iter = 0;
function display() {
context.fillStyle = '#000000';
context.fillRect(0, 0, 600, 600);
context.lineWidth = 0.5;
context.strokeStyle = '#CCCCCC';
context.strokeRect(24, 24, 552, 552);
for(let p of particles) {
context.fillStyle = `#${p.c.toString(16)}`;
context.fillRect(600*p.x[0]-1, 600-600*p.x[1]-1, 2, 2);
}
}
function step() {
requestAnimationFrame(step);
iter++;
const mustRender = iter % renderEvery === 0;
const mustTime = mustRender && enableTiming;
// Advance simulation
mustTime && console.time('advance');
advance(dt);
mustTime && console.timeEnd('advance');
if(mustRender) {
mustTime && console.time('display');
display();
mustTime && console.timeEnd('display');
}
}
enableTiming && console.time('setup');
add_rnd_square([0.55,0.45], 0xED553B);
add_rnd_square([0.45,0.65], 0xF2B134);
add_rnd_square([0.55,0.85], 0x168587);
enableTiming && console.timeEnd('setup');
step();
</script>
</body>
</html>